tylersticka / components-flex-embed

Component CSS for intrinsic ratio embeds

SUIT CSS components-flex-embed

CSS for responsive, intrinsic ratio embeds. Includes modifier classes for 3:1, 2:1, 16:9, and 4:3 aspect ratios.

Read more about SUIT CSS's design principles.

Installation

• npm: npm install suitcss-components-flex-embed
• Download: zip

Available classes

• FlexEmbed - The root node.
• FlexEmbed-ratio - The element that provides the aspect ratio (1:1 by default).
• FlexEmbed-ratio--3by1 - The modifier class for 3:1 aspect ratio embed.
• FlexEmbed-ratio--2by1 - The modifier class for 2:1 aspect ratio embed,
• FlexEmbed-ratio--16by9 - The modifier class for 16:9 aspect ratio embed.
• FlexEmbed-ratio--4by3 - The modifier class for 4:3 aspect ratio embed.
• FlexEmbed-content - The descendent class for the content that is being displayed.

Usage

Example:

<div class="FlexEmbed">
  <div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
  <div class="FlexEmbed-content">
    <!-- child content -->
  </div>
</div>

You can add custom own aspect ratios. For example, to create a 2.35:1 aspect ratio:

/**
 * Modifier: 47:20 aspect ratio
 */

.FlexEmbed-ratio--47by20 {
  padding-bottom: 42.55%;
}

Alternatively, aspect ratios can be calculated programmatically and the corresponding padding-bottom value applied using an inline style.

<div class="FlexEmbed">
  <div class="FlexEmbed-ratio" style="padding-bottom:{{percentage}}%"></div>
  <div class="FlexEmbed-content">
    <!-- child content -->
  </div>
</div>

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To lint code with postcss-bem-linter and stylelint

npm run lint

To generate the testing build.

npm run build-test

To watch the files for making changes to test:

npm run watch

Basic visual tests are in test/index.html.

Browser support

• Google Chrome (latest)
• Opera (latest)
• Firefox 4+
• Safari 5+
• Internet Explorer 9+