rework-pure-grids

2.0.1 • Public • Published

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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.0.1
    21
    • latest

Version History

Package Sidebar

Install

npm i rework-pure-grids

Weekly Downloads

41

Version

2.0.1

License

BSD

Unpacked Size

14 kB

Total Files

5

Last publish

Collaborators

  • ericf
  • redonkulus