All Projects → yisibl → Postcss Aspect Ratio Mini

yisibl / Postcss Aspect Ratio Mini

Licence: mit
A PostCSS plugin to fix an element's dimensions to an aspect ratio

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Postcss Aspect Ratio Mini

postcss-gtk
Processes GTK+ CSS into browser CSS
Stars: ✭ 23 (-81.3%)
Mutual labels:  postcss, postcss-plugins, postcss-plugin
Postcss Plugins
The "officially unofficial" consolidated list of PostCSS plugins in a ready-to-use package
Stars: ✭ 107 (-13.01%)
Mutual labels:  postcss, postcss-plugin, postcss-plugins
Postcss Import
PostCSS plugin to inline @import rules content
Stars: ✭ 1,048 (+752.03%)
Mutual labels:  postcss, postcss-plugin
Postcss Selector Not
PostCSS plugin to transform :not() W3C CSS level 4 pseudo class to more compatible CSS (multiple css3 :not() selectors)
Stars: ✭ 49 (-60.16%)
Mutual labels:  postcss, postcss-plugins
Postcss High Contrast
Create high contrast version of your project with ease.
Stars: ✭ 108 (-12.2%)
Mutual labels:  postcss, postcss-plugins
Postcss Instagram
📷 PostCSS plugin for using Instagram filters in CSS
Stars: ✭ 111 (-9.76%)
Mutual labels:  postcss, postcss-plugins
Postcss Icon
PostCSS plugin that adds `css icons` from icon sets
Stars: ✭ 20 (-83.74%)
Mutual labels:  postcss, postcss-plugin
Rtlcss
Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)
Stars: ✭ 1,363 (+1008.13%)
Mutual labels:  postcss, postcss-plugin
Postcss Position
PostCSS plugin that adds shorthand declarations for position attributes
Stars: ✭ 26 (-78.86%)
Mutual labels:  postcss, postcss-plugin
Postcss Prefix Selector
Prefix all CSS rules with a selector
Stars: ✭ 75 (-39.02%)
Mutual labels:  postcss, postcss-plugin
Postcss Nested Props
PostCSS plugin to unwrap nested properties.
Stars: ✭ 58 (-52.85%)
Mutual labels:  postcss, postcss-plugin
Postcss Font Family System Ui
PostCSS plugin to transform W3C CSS font-family: system-ui to a practical font-family list
Stars: ✭ 91 (-26.02%)
Mutual labels:  postcss, postcss-plugins
Postcss Register Custom Props
PostCSS plugin that transforms custom property registration in CSS to JS
Stars: ✭ 20 (-83.74%)
Mutual labels:  postcss, postcss-plugin
Postcss Banner
PostCSS plugin to add text banner and footer to resulting file
Stars: ✭ 13 (-89.43%)
Mutual labels:  postcss, postcss-plugin
Postcss Alias
PostCSS plugin that allows you to create aliases for CSS properties
Stars: ✭ 47 (-61.79%)
Mutual labels:  postcss, postcss-plugin
Postcss Interpolate
PostCSS plugin for values interpolation between breakpoints.
Stars: ✭ 9 (-92.68%)
Mutual labels:  postcss, postcss-plugin
Postcss At Rules Variables
PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else and more...
Stars: ✭ 52 (-57.72%)
Mutual labels:  postcss, postcss-plugins
Postcss Start To End
PostCSS plugin that lets you control your layout (LTR or RTL) through logical rather than physical rules
Stars: ✭ 18 (-85.37%)
Mutual labels:  postcss, postcss-plugins
Stencil Postcss
Autoprefixer plugin for Stencil
Stars: ✭ 19 (-84.55%)
Mutual labels:  postcss, postcss-plugins
Postcss Triangle
PostCSS plugin to create a triangle.
Stars: ✭ 57 (-53.66%)
Mutual labels:  postcss, postcss-plugin

PostCSS Aspect Ratio Mini Travis Build Status

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

There is already a standard aspect-ratio in the CSS specification, and Chrome has experimental support. So it is recommended to use / to separate values, the next version may deprecate : separator.

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;
}

.aspect-box2 {
    aspect-ratio: 0.1 / 0.3;
}

Output

.aspect-box {
    position: relative;
}

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

.aspect-box2:before {
    padding-top: 300%;
}

Test

npm test

Changelog

License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].