Skip to content
Generate custom units for Pure Grids via Rework
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Nov 15, 2013
HISTORY.md Update HISTORY for 1.0.0 Jul 10, 2014
LICENSE Initial commit Nov 15, 2013
README.md Update README to match default names and sizes (#14) Nov 22, 2016
index.js Revert "Omit generating old IE `*width`s inside media queries" Jan 9, 2014
package.json 1.0.0 Jul 10, 2014

README.md

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.

You can’t perform that action at this time.