compass-responsive-embeds 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.md
CHANGED
|
@@ -28,6 +28,17 @@ Add to a project:
|
|
|
28
28
|
|
|
29
29
|
## Usage
|
|
30
30
|
|
|
31
|
+
In your html template:
|
|
32
|
+
|
|
33
|
+
<div class="embed-16-9">
|
|
34
|
+
<iframe src="http://www.youtube.com/embed/J---aiyznGQ" frameborder="0" allowfullscreen></iframe>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="embed-4-3">
|
|
37
|
+
<script async class="speakerdeck-embed" data-id="4eb80921b029470054011d3f" data-ratio="1.3333333333333333" src="//speakerdeck.com/assets/embed.js"></script>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
In your stylesheet:
|
|
41
|
+
|
|
31
42
|
@import 'compass-responsive-embeds';
|
|
32
43
|
|
|
33
44
|
// 16/9 embed
|
|
@@ -40,6 +51,13 @@ Add to a project:
|
|
|
40
51
|
@include embed-container(4/3);
|
|
41
52
|
}
|
|
42
53
|
|
|
54
|
+
// default 1 ratio for a square embed
|
|
55
|
+
@embed-1-1 {
|
|
56
|
+
@include embed-container;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
You can use any ratio, as long as the result can be converted to percentages.
|
|
60
|
+
|
|
43
61
|
## Contributing
|
|
44
62
|
|
|
45
63
|
1. Fork it
|
|
@@ -1,7 +1,12 @@
|
|
|
1
|
+
// Default settings
|
|
2
|
+
$responsive-embeds-default-ratio : 1 !default;
|
|
3
|
+
|
|
1
4
|
// Mixin
|
|
2
5
|
//
|
|
3
6
|
// $ratio : any valid ratio like 16/9, 4/3...
|
|
4
|
-
@mixin embed-container(
|
|
7
|
+
@mixin embed-container(
|
|
8
|
+
$ratio : $responsive-embeds-default-ratio
|
|
9
|
+
) {
|
|
5
10
|
position: relative;
|
|
6
11
|
padding-bottom: 100%/$ratio;
|
|
7
12
|
padding-top: 30px; /* IE6 workaround*/
|