postcss-responsive-units v0.1.0

postcss-responsive-units

PostCSS plugin to add support for res(), allowing for responsive unit sizes between two screen sizes.

Installation

yarn add postcss-responsive-units

Require postcssResUnits at the top of Webpack or Mix:

const postcssResUnits = require('postcss-responsive-units');

Using Webpack

postcss([postcssResUnits]);

Using Mix Sass (Sage 10)

mix
    .sass('resources/assets/styles/editor.scss', 'styles')
    .options({
        postCss: [postcssResUnits]
    });

Config

Some config can be passed into postcssResUnits() in Webpack or Mix.

Example below with the current defaults.

postcssResUnits({
    rootRem: 16,
    prefix: 'res',
    screenMin: '48rem', // 768
    screenMax: '87.5rem', // 1400
})

Usage

Responsive unit sizes can be passed to any CSS property that supports sizing.

res($min-value, $max-value, $screen-min, $screen-max)

The unit size will responsively scale from $min-value to $max-value between $screen-min and $screen-max.

Basic

.res-unit {
    font-size: res(2rem, 6rem, 48rem, 87.5rem);
}

You can omit $screen-min and $screen-max if passed in your postcssResUnits config.

.res-unit {
    font-size: res(2rem, 6rem);
}

Using ratios

You can also use ratios to calculate the $min-value or $max-value. For ratio suggestions use modularscale.com.

Scaling up using the golden ratio (1.618) from 2rem.

.res-unit {
    margin-bottom: res(2rem, 1.618);
}

Scaling down using the golden ratio (1.618) from 6rem.

.res-unit {
    margin-bottom: res(1.618, 6rem);
}

Shorthand support

There is shorthand support for margin, margin-inline, margin-block and padding, padding-inline, padding-block.

.res-unit {
    margin: res(2rem, 6rem) auto;
}

.res-unit {
    margin: res(1.618, 10rem) res(1.618, 6rem) 2rem 2rem;
}