# suitcss-components-flex-embed

> CSS for responsive, intrinsic ratio embeds

Latest version **2.0.4** (published 2016-02-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install suitcss-components-flex-embed
pnpm add suitcss-components-flex-embed
yarn add suitcss-components-flex-embed
bun add suitcss-components-flex-embed
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2016-02-28 |
| First published | 2014-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 108 |
| Maintainers | giuseppegurgone, necolas, simonsmith, timkelty |
| Keywords | browser, css-components, flex-embed, suitcss, style |

## Links

- npm: https://www.npmjs.com/package/suitcss-components-flex-embed
- Repository: https://github.com/suitcss/components-flex-embed
- Homepage: https://github.com/suitcss/components-flex-embed#readme
- Issues: https://github.com/suitcss/components-flex-embed/issues
- npm.io page: https://npm.io/package/suitcss-components-flex-embed

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.0.4 (latest) — 2016-02-28
- 2.0.3 — 2015-12-10
- 2.0.2 — 2014-10-28
- 2.0.1 — 2014-07-02
- 2.0.0 — 2014-07-02
- 1.7.1 — 2014-06-24
- 1.7.0 — 2014-06-22
- 1.6.0 — 2014-05-14
- 1.5.1 — 2014-04-03

## README

# SUIT CSS components-flex-embed

[![Build Status](https://travis-ci.org/suitcss/components-flex-embed.svg?branch=master)](https://travis-ci.org/suitcss/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](https://github.com/suitcss/suit/).

## Installation

* [npm](https://www.npmjs.org/package/suitcss-components-flex-embed): `npm install suitcss-components-flex-embed`
* Download: [zip](https://github.com/suitcss/components-flex-embed/releases/latest)

## 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:

```html
<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:

```css
/**
 * 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.

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

## Testing

Install [Node](http://nodejs.org) (comes with npm).

```
npm install
```

To generate a build:

```
npm run build
```

To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)

```
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+

---
_Source: https://npm.io/package/suitcss-components-flex-embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._