yisibl / Postcss Aspect Ratio Mini
Licence: mit
A PostCSS plugin to fix an element's dimensions to an aspect ratio
Stars: ✭ 123
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
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].