• Stars
    star
    111
  • Rank 314,510 (Top 7 %)
  • Language
    HTML
  • License
    MIT License
  • Created about 12 years ago
  • Updated about 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Component CSS for intrinsic ratio embeds

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+

More Repositories

1

suit

Style tools for UI components
HTML
3,801
star
2

utils

CSS utility classes
JavaScript
304
star
3

base

CSS base styles for web apps (a thin layer on top of normalize.css)
HTML
194
star
4

components-grid

Component CSS for grids
HTML
156
star
5

preprocessor

A future-facing CSS preprocessor (used by SUIT CSS)
JavaScript
135
star
6

stylelint-config-suitcss

SUIT CSS config for Stylelint
JavaScript
77
star
7

components-arrange

Component CSS for arranging/aligning horizontal cells, a bit like flexbox
HTML
72
star
8

utils-flex

CSS flexbox utilities
HTML
63
star
9

components-button

Component CSS for buttons
HTML
52
star
10

rework-suit

Collection of "pure CSS" plugins for Rework (DEPRECATED)
JavaScript
50
star
11

rework-suit-conformance

Rework plugin for SUIT CSS to check component style isolation (DEPRECATED)
JavaScript
41
star
12

utils-size

CSS sizing utilities
CSS
38
star
13

components

Collection of SUIT CSS components
CSS
34
star
14

theme

Example theme for SUIT CSS
CSS
29
star
15

generator-suit

A Yeoman generator for SUIT packages
JavaScript
26
star
16

utils-text

CSS text utilities
HTML
23
star
17

stylelint-suitcss

A collection of Stylelint plugins for SUIT CSS
JavaScript
22
star
18

components-button-group

Component CSS for button-groups (DEPRECATED)
HTML
21
star
19

components-test

Component CSS to help test the visual presentation of components
CSS
19
star
20

utils-layout

CSS layout utilities
HTML
19
star
21

suitcss.github.io

SUIT CSS project site
HTML
18
star
22

utils-link

CSS link utilities
HTML
16
star
23

utils-display

CSS display utilities
HTML
15
star
24

utils-position

CSS positioning utilities
HTML
13
star
25

utils-state

CSS state utilities (DEPRECATED)
HTML
13
star
26

utils-align

CSS vertical-alignment utilities
HTML
12
star
27

component-builder-suit

A Component(1) builder plugin for SUIT CSS (DEPRECATED)
JavaScript
10
star
28

utils-before

CSS leading offset utilities
CSS
8
star
29

utils-after

CSS trailing offset utilities
CSS
8
star
30

utils-offset

CSS offset utilities
JavaScript
8
star
31

initial-values

1
star