A PostCSS plugin to fix an element's dimensions to an aspect ratio
Switch branches/tags
Nothing to show
Clone or download
Latest commit 5bef7af Dec 3, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Fix: `npm test` error Dec 3, 2018
.editorconfig First commit 👻 Jul 12, 2017
.gitignore First commit 👻 Jul 12, 2017
.npmignore First commit 👻 Jul 12, 2017
.travis.yml Fix: `npm test` error Dec 3, 2018
CHANGELOG.md Fix: `npm test` error Dec 3, 2018
LICENSE First commit 👻 Jul 12, 2017
README.md Update: Keep only padding-top Jul 12, 2017
gulpfile.js New: V1.0.0 Fixed #4 Dec 3, 2018
index.js New: V1.0.0 Fixed #4 Dec 3, 2018
package.json Fix: `npm test` error Dec 3, 2018

README.md

PostCSS Aspect Ratio Mini Travis Build Status

A PostCSS plugin to fix an element's dimensions to an aspect ratio.

Install

npm i postcss-aspect-ratio-mini --save

Usage

var postcss = require('postcss')

var output = postcss()
  .use(require('postcss-aspect-ratio-mini'))
  .process(require('fs').readFileSync('input.css', 'utf8'))
  .css

Example

A simple example using the custom ratio value '16:9'.

Input

.aspect-box {
    position: relative;
}

.aspect-box {
    aspect-ratio: '16:9';
}

Output

.aspect-box {
    position: relative;
}

.aspect-box:before {
    padding-top: 56.25%;
}

Test

npm test

Changelog

License