postcss-gridlover
Enables using Gridlover sx and gr units in your CSS
Gridlover
Gridlover gives you a modular scale & vertical rhythm to work with. You can use values from the scale with sx units and grid row values with gr units. Play around with Gridlover to get a feel for how the units work.
Using this input.css
:
Will produce
Take a look at test/input.css
for the css file the Gridlover app uses.
- An sx value must be an integer.
- Values in gr units don't need to be integers, but if you want to maintain a vertical rhythm, you should keep them integers or make sure adding them up (like 1.5 + 0.5) becomes an integer.
Installation
npm install postcss-gridlover
Usage
var fs = require('fs');
var postcss = require('postcss');
var gridlover = require('postcss-gridlover');
var css = fs.readFileSync('input.css', 'utf8');
var output = postcss()
.use(gridlover)
.process(css)
.css;
fs.writeFile("output.css", output);
If you have any questions, tweet to @gridlover or @sakamies.