suitcss-components-flex-embed

CSS for responsive, intrinsic ratio embeds

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
suitcss-components-flex-embed
11212.0.48 years ago10 years agoMinified + gzip package size for suitcss-components-flex-embed in KB

Readme

SUIT CSS components-flex-embed
Build Status
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+