postcss-grid-unit

A PostCSS plugin to create custom measurement units to ease grid enforcement.

Usage no npm install needed!

<script type="module">
  import postcssGridUnit from 'https://cdn.skypack.dev/postcss-grid-unit';
</script>

README

postcss-grid-unit

A PostCSS plugin to create custom grid units to ease grid enforcement. Inspired by Mark Goodyear's postcss-vertical-rhythm.

Examples

Given options

{
  units: [
    {unit: 'u', size: 8},
    {unit: 'lu', size: 32},
  ],
}

and input

.block {
  margin-bottom: 1u;
  padding-top: 2lu;
}

output will be

.block {
  margin-bottom: 8px;
  padding-top: 64px;
}

Usage

Install:

npm install postcss-grid-unit --save-dev

Then include the plugin:

postcss([ require('postcss-grid-unit')(options) ])

See [PostCSS] docs for examples for your environment.

Licence

Released under the MIT license.