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: 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.

Rework Pure Grids Change History

2.0.1 (2020-05-02)

• Disable includeOldIEWidths by default

2.0.0 (2020-05-02)

• Remove IE 8 specific properties

1.0.0 (2014-07-10)

• [!] Stable.

• Move repo to Yahoo org on GitHub.

0.3.2 (2014-01-09)

• Reverted the change v0.3.0 which Forced includeOldIEWidths option to false when generating the grid units rules inside of @media { ... } blocks.

  The decision was made to revert this previous change because when using other tools like grunt-stripmq, the *width declarations need to be present. Also keeping these declaration should add minimal file size overhead with gzip.

0.3.1 (2014-01-09)

• Fixed bug to support the valid call signature:

    pureGrids.units(null, { ... });

  This allows the units argument to be specified as a falsy value.

0.3.0 (2014-01-02)

• Added support for omitting a units value, which enables generating only the media query rules for Pure's default 5ths and 24ths based grid unit sizes. This allows Pure's rollup pure-min.css file to be used along with customized media queries generated by this tool. (#6)

• Forced includeOldIEWidths option to false when generating the grid units rules inside of @media { ... } blocks because old version of IE don't support media queries. (#5)

0.2.0 (2013-12-20)

• Added media query support. A collection of name -> query CSS media queries can now be specified via options.mediaQueries, and custom unit selectors will be generated with the name inside the query. (#3)

0.1.0 (2013-12-17)

• Initial public release.