Rework Pure Grids
Generate custom units for Pure Grids via Rework.
Usage
Install Rework and this Rework plugin from npm:
$ npm i rework rework-pure-gridsCreate custom media queries for Pure's defaut Grids unit sizes:
var rework = require('rework'),
pureGrids = require('rework-pure-grids');
var css = rework('').use(pureGrids.units({
mediaQueries: {
sm : 'screen and (min-width: 35.5em)',
md : 'screen and (min-width: 48em)',
lg : 'screen and (min-width: 64em)',
xl : 'screen and (min-width: 80em)'
}
})).toString();Or create a customized set unit sizes for Pure Grids:
var rework = require('rework'),
pureGrids = require('rework-pure-grids');
// Creates a 12ths-based Grid.
var css = rework('').use(pureGrids.units(12, {
mediaQueries: {
sm : 'screen and (min-width: 35.5em)',
md : 'screen and (min-width: 48em)',
lg : 'screen and (min-width: 64em)',
xl : 'screen and (min-width: 80em)'
}
})).toString();The new classnames can be added to HTML elements whenever their width should
change at the break-points specified in the mediaQueries option above.
<div class="pure-g">
<div id="main" class="pure-u-1 pure-u-med-3-4 pure-u-xlrg-2-3">
<h1>Main Content</h1>
</div>
<div id="side" class="pure-u-1 pure-u-med-1-4 pure-u-xlrg-1-3">
<h1>Side Content</h1>
</div>
</div>License
This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.