├── .gitignore ├── .stylelintrc ├── .travis.yml ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── index.css ├── index.js ├── lib └── flex-embed.css ├── package.json └── test ├── config.json ├── index.html └── test.css /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | build 3 | components 4 | node_modules 5 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-suitcss" 3 | } 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - "4" 5 | - "5" 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### HEAD 2 | 3 | ### 2.0.4 (December 12, 2015) 4 | 5 | * Update preprocessor to `^1.0.1` 6 | 7 | ### 2.0.3 (December 12, 2015) 8 | 9 | * Update preprocessor to `^0.8.0` 10 | 11 | ### 2.0.2 (October 28, 2014) 12 | 13 | * Add support for JS bundling. 14 | 15 | ### 2.0.1 (July 2, 2014) 16 | ### 2.0.0 (July 2, 2014) 17 | 18 | * No longer affects the styles of child images / embeds. 19 | * Fix dynamic aspect ratio support. 20 | 21 | ### 1.7.1 (June 24, 2014) 22 | 23 | * Add `.css` extension to imports for interoperability. 24 | 25 | ### 1.7.0 (June 22, 2014) 26 | 27 | * npm-based workflow. 28 | * Add new preprocessor build tools. 29 | 30 | ### 1.6.0 (May 14, 2014) 31 | 32 | * Add 1:1 aspect ratio as the default. 33 | 34 | ### 1.5.1 (April 3, 2014) 35 | 36 | * Add npm support. 37 | 38 | ### 1.5.0 (February 14, 2014) 39 | 40 | * Improve precision of a percentage. 41 | * Stop using CSSLint. 42 | 43 | ### 1.4.0 (January 7, 2014) 44 | 45 | * Add support for 3:1 and 2:1 aspect ratios. 46 | 47 | ### 1.3.0 (January 6, 2014) 48 | 49 | * Add support for `max-height`. 50 | 51 | ### 1.2.1 (November 20, 2013) 52 | 53 | * Use 'suit-test' to structure the UI tests. 54 | * Use Component(1) for development. 55 | * Add CSS linting and configuration. 56 | * Apply `display:block` to `FlexEmbed` by default. 57 | 58 | ### 1.2.0 (May 31, 2013) 59 | 60 | * Add explicit descendant class. 61 | 62 | ### 1.1.1 (May 26, 2013) 63 | 64 | * Rename `component.json` to `bower.json`. 65 | 66 | ### 1.1.0 (March 7, 2013) 67 | 68 | * Add test file. 69 | * Change class naming convention. 70 | 71 | ### 1.0.0 (October 13, 2012) 72 | 73 | * Public release. 74 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) Nicolas Gallagher 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SUIT CSS components-flex-embed 2 | 3 | [![Build Status](https://travis-ci.org/suitcss/components-flex-embed.svg?branch=master)](https://travis-ci.org/suitcss/components-flex-embed) 4 | 5 | CSS for responsive, intrinsic ratio embeds. Includes modifier classes for 3:1, 6 | 2:1, 16:9, and 4:3 aspect ratios. 7 | 8 | Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/). 9 | 10 | ## Installation 11 | 12 | * [npm](https://www.npmjs.org/package/suitcss-components-flex-embed): `npm install suitcss-components-flex-embed` 13 | * Download: [zip](https://github.com/suitcss/components-flex-embed/releases/latest) 14 | 15 | ## Available classes 16 | 17 | * `FlexEmbed` - The root node. 18 | * `FlexEmbed-ratio` - The element that provides the aspect ratio (1:1 by default). 19 | * `FlexEmbed-ratio--3by1` - The modifier class for 3:1 aspect ratio embed. 20 | * `FlexEmbed-ratio--2by1` - The modifier class for 2:1 aspect ratio embed, 21 | * `FlexEmbed-ratio--16by9` - The modifier class for 16:9 aspect ratio embed. 22 | * `FlexEmbed-ratio--4by3` - The modifier class for 4:3 aspect ratio embed. 23 | * `FlexEmbed-content` - The descendent class for the content that is being displayed. 24 | 25 | ## Usage 26 | 27 | Example: 28 | 29 | ```html 30 |
31 |
32 |
33 | 34 |
35 |
36 | ``` 37 | 38 | You can add custom own aspect ratios. For example, to create a 2.35:1 aspect 39 | ratio: 40 | 41 | ```css 42 | /** 43 | * Modifier: 47:20 aspect ratio 44 | */ 45 | 46 | .FlexEmbed-ratio--47by20 { 47 | padding-bottom: 42.55%; 48 | } 49 | ``` 50 | 51 | Alternatively, aspect ratios can be calculated programmatically and the 52 | corresponding `padding-bottom` value applied using an inline style. 53 | 54 | ```html 55 |
56 |
57 |
58 | 59 |
60 |
61 | ``` 62 | 63 | ## Testing 64 | 65 | Install [Node](http://nodejs.org) (comes with npm). 66 | 67 | ``` 68 | npm install 69 | ``` 70 | 71 | To generate a build: 72 | 73 | ``` 74 | npm run build 75 | ``` 76 | 77 | To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/) 78 | 79 | ``` 80 | npm run lint 81 | ``` 82 | 83 | To generate the testing build. 84 | 85 | ``` 86 | npm run build-test 87 | ``` 88 | 89 | To watch the files for making changes to test: 90 | 91 | ``` 92 | npm run watch 93 | ``` 94 | 95 | Basic visual tests are in `test/index.html`. 96 | 97 | ## Browser support 98 | 99 | * Google Chrome (latest) 100 | * Opera (latest) 101 | * Firefox 4+ 102 | * Safari 5+ 103 | * Internet Explorer 9+ 104 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | @import "./lib/flex-embed.css"; 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | require('./lib/flex-embed.css'); 2 | -------------------------------------------------------------------------------- /lib/flex-embed.css: -------------------------------------------------------------------------------- 1 | /** @define FlexEmbed */ 2 | 3 | /** 4 | * Flexible media embeds 5 | * 6 | * For use with media embeds – such as videos, slideshows, or even images – 7 | * that need to retain a specific aspect ratio but adapt to the width of their 8 | * containing element. 9 | * 10 | * Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video 11 | */ 12 | 13 | .FlexEmbed { 14 | display: block; 15 | overflow: hidden; 16 | position: relative; 17 | } 18 | 19 | /** 20 | * The aspect-ratio hack is applied to an empty element because it allows 21 | * the component to respect `max-height`. Default aspect ratio is 1:1. 22 | */ 23 | 24 | .FlexEmbed-ratio { 25 | display: block; 26 | padding-bottom: 100%; 27 | width: 100%; 28 | } 29 | 30 | /** 31 | * Modifier: 3:1 aspect ratio 32 | */ 33 | 34 | .FlexEmbed-ratio--3by1 { 35 | padding-bottom: calc(100% / 3); 36 | } 37 | 38 | /** 39 | * Modifier: 2:1 aspect ratio 40 | */ 41 | 42 | .FlexEmbed-ratio--2by1 { 43 | padding-bottom: 50%; 44 | } 45 | 46 | /** 47 | * Modifier: 16:9 aspect ratio 48 | */ 49 | 50 | .FlexEmbed-ratio--16by9 { 51 | padding-bottom: 56.25%; 52 | } 53 | 54 | /** 55 | * Modifier: 4:3 aspect ratio 56 | */ 57 | 58 | .FlexEmbed-ratio--4by3 { 59 | padding-bottom: 75%; 60 | } 61 | 62 | /** 63 | * Fit the content to the aspect ratio 64 | */ 65 | 66 | .FlexEmbed-content { 67 | bottom: 0; 68 | height: 100%; 69 | left: 0; 70 | position: absolute; 71 | top: 0; 72 | width: 100%; 73 | } 74 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "suitcss-components-flex-embed", 3 | "description": "CSS for responsive, intrinsic ratio embeds", 4 | "version": "2.0.4", 5 | "style": "index.css", 6 | "files": [ 7 | "index.css", 8 | "index.js", 9 | "lib" 10 | ], 11 | "devDependencies": { 12 | "stylelint-config-suitcss": "^4.0.0", 13 | "suitcss-components-test": "*", 14 | "suitcss-preprocessor": "^1.0.1" 15 | }, 16 | "scripts": { 17 | "build": "npm run setup && npm run preprocess", 18 | "build-test": "npm run setup && npm run preprocess-test", 19 | "lint": "suitcss -c test/config.json index.css build/lint.css && rm build/lint.css", 20 | "preprocess": "suitcss index.css build/build.css", 21 | "preprocess-test": "suitcss -i test test/test.css build/test.css", 22 | "setup": "npm install", 23 | "watch": "npm run preprocess-test -- -w -v", 24 | "test": "npm run lint" 25 | }, 26 | "license": "MIT", 27 | "repository": { 28 | "type": "git", 29 | "url": "git://github.com/suitcss/components-flex-embed.git" 30 | }, 31 | "keywords": [ 32 | "browser", 33 | "css-components", 34 | "flex-embed", 35 | "suitcss", 36 | "style" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /test/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "lint": true, 3 | "postcss-reporter": { 4 | "throwError": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | FlexEmbed [component] - SUIT CSS 4 | 5 | 6 | 29 | 30 |
31 |

SUIT CSS: FlexEmbed component tests

32 | 33 |

.FlexEmbed

34 |

renders 1:1 (iframe)

35 |
36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |

renders 1:1 (img)

44 |
45 |
46 |
47 |
48 | 49 |
50 |
51 |
52 |

support dynamic ratios

53 |
54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 |

supports max-height

62 |
63 |
64 |
65 |
66 | 67 |
68 |
69 |
70 |

supports max-width

71 |
72 |
73 |
74 |
75 | 76 |
77 |
78 |
79 | 80 |

.FlexEmbed-ratio--3by1

81 |

renders 3:1 (iframe)

82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 |

renders 3:1 (img)

91 |
92 |
93 |
94 |
95 | 96 |
97 |
98 |
99 | 100 |

.FlexEmbed-ratio--2by1

101 |

renders 2:1 (iframe)

102 |
103 |
104 |
105 |
106 | 107 |
108 |
109 |
110 |

renders 2:1 (img)

111 |
112 |
113 |
114 |
115 | 116 |
117 |
118 |
119 | 120 |

.FlexEmbed-ratio--16by9

121 |

renders 16:9 (iframe)

122 |
123 |
124 |
125 |
126 | 127 |
128 |
129 |
130 |

renders 16:9 (img)

131 |
132 |
133 |
134 |
135 | 136 |
137 |
138 |
139 | 140 |

.FlexEmbed-ratio--4by3

141 |

renders 4:3 (iframe)

142 |
143 |
144 |
145 |
146 | 147 |
148 |
149 |
150 |

renders 4:3 (img)

151 |
152 |
153 |
154 |
155 | 156 |
157 |
158 |
159 |
160 | -------------------------------------------------------------------------------- /test/test.css: -------------------------------------------------------------------------------- 1 | @import "suitcss-components-test"; 2 | @import "../index.css"; 3 | --------------------------------------------------------------------------------