compass-responsive-embeds 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
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*/
|