grunt-pure-grids

Generate custom grid units for Pure Grids.

Getting Started

This plugin requires Grunt.

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-pure-grids --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-pure-grids');

The "pure_grids" task

Overview

In your project's Gruntfile, add a section named pure_grids to the data object passed into grunt.initConfig().

grunt.initConfig({
    pure_grids: {
        dest : 'path/to/my-responsive-grid.css',
        options: {
            units: 12, //12-column grid
            mediaQueries: {
                sm : 'screen and (min-width: 35.5em)', // 568px
                med: 'screen and (min-width: 48em)',   // 768px
                lrg: 'screen and (min-width: 58em)',   // 928px
                xl : 'screen and (min-width: 75em)'    // 1200px
            }
        }
    }
});

Options

options.units

Type: Integer || Array Default value: undefined

Determines how many columns your grid should have. If undefined, it only generates the media queries for a 5ths and 24ths-column grid (same as Pure's Default Grid).

options.mediaQueries

Type: Object Default value: undefined

Used to generate responsive grids. Pass an object where the key denotes the grid key, and the property denotes the media query breakpoint. (ex: {md: min-width: 48em} would generate .pure-u-md-* class names that were active when the viewport was >= 48em)

options.includeOldIEWidths

Type: Boolean Default value: true

Determines whether or not each grid unit should have an accompanying *width value, to make it work properly in IE 6/7.

options.includeReducedFractions

Type: Boolean Default value: true

Determines whether or not the output should only include the reduced fractions. Setting this to true means that all grid classnames would be provided in their reduced form (ex: .pure-u-md-2-4 would be renamed to .pure-u-md-1-2). Setting this to false will output class names in their regular and reduced fractional form.

options.decimals

Type: Integer Default value: 4

Determines the width accuracy when constructing the individual grid units. You shouldn't need more than 4 decimals, but you may want fewer.

options.selectorPrefix

Type: String Default value: .pure-u-

Determines the prefix for each grid class name.

Usage Examples

Default Options

In this example, we just create a regular 12-column Pure grid.

grunt.initConfig({
    pure_grids: {
        dest : 'path/to/my-grid.css',
        options: {
            units: 12, //12-column grid
        }
    }
});

Responsive Grid

In this example, we create a 6-column responsive grid with breakpoints at 48em and 60em. We also customize the prefix to just be .col-.

grunt.initConfig({
    pure_grids: {
        dest : 'path/to/my-responsive-grid.css',
        options: {
            units: 6, //6-column grid,
            mediaQueries: {
                md: 'screen and (min-width: 48em)', //768px
                lg: 'screen and (min-width: 60em)'  //960px
            },
            selectorPrefix: '.col-'
        }
    }
});

In my HTML, I can now write something like this:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
<link rel="stylesheet" href="path/to/my-responsive-grid.css">

..

<div class="pure-g">
    <!--
        an element which is:
        width: 100% < 48em,
        width: 50% >= 48em,
    and width: 25% >= 60em
    -->
    <div class="col-1 col-md-1-2 col-lg-1-4">
        ...
    </div>
</div>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

• 1.0.0: Stable, Added unit tests, moved to Yahoo org on GitHub.
• 0.0.2: Added docs to README. (@tilomitra)
• 0.0.1: Initial release on npm.

License

This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.