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+

HEAD

2.0.4 (December 12, 2015)

• Update preprocessor to ^1.0.1

2.0.3 (December 12, 2015)

• Update preprocessor to ^0.8.0

2.0.2 (October 28, 2014)

• Add support for JS bundling.

2.0.1 (July 2, 2014)

2.0.0 (July 2, 2014)

• No longer affects the styles of child images / embeds.
• Fix dynamic aspect ratio support.

1.7.1 (June 24, 2014)

• Add .css extension to imports for interoperability.

1.7.0 (June 22, 2014)

• npm-based workflow.
• Add new preprocessor build tools.

1.6.0 (May 14, 2014)

• Add 1:1 aspect ratio as the default.

1.5.1 (April 3, 2014)

• Add npm support.

1.5.0 (February 14, 2014)

• Improve precision of a percentage.
• Stop using CSSLint.

1.4.0 (January 7, 2014)

• Add support for 3:1 and 2:1 aspect ratios.

1.3.0 (January 6, 2014)

• Add support for max-height.

1.2.1 (November 20, 2013)

• Use 'suit-test' to structure the UI tests.
• Use Component(1) for development.
• Add CSS linting and configuration.
• Apply display:block to FlexEmbed by default.

1.2.0 (May 31, 2013)

• Add explicit descendant class.

1.1.1 (May 26, 2013)

• Rename component.json to bower.json.

1.1.0 (March 7, 2013)

• Add test file.
• Change class naming convention.

1.0.0 (October 13, 2012)

• Public release.