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-grids

Create 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: 30em)',
        med : 'screen and (min-width: 48em)',
        lrg : 'screen and (min-width: 64em)',
        xlrg: 'screen and (min-width: 75em)'
    }
})).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: 30em)',
        med : 'screen and (min-width: 48em)',
        lrg : 'screen and (min-width: 64em)',
        xlrg: 'screen and (min-width: 75em)'
    }
})).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.