工具

Installing Pure with Bower

You can add Pure to your project through Bower. This is our recommended way to to integrate Pure into your project's build process and tool chain. It also works great if your website is SSL-encrypted.

$ bower install pure --save

Extending Pure with Grunt

We've written several tools that help you extend Pure and integrate it with your project's CSS. These tools are available as Grunt plugins that can easily be integrated into your existing Gruntfile.js.

Extending Pure with Rework

We've taken a layered approach to developing Pure's tooling. Most of the tools are first built as Rework plugins. This allows you to compose Pure's Rework plugins together with other Rework plugins. It also allows the Grunt plugins to be written as very thin wrappers.

Generating Custom Responsive Grids

Pure was created to help developer's build mobile-first responsive web projects. However, since CSS Media Queries cannot be over-written via CSS, you can use Pure's tooling to customize Pure's Responsive Grids for your project.

Via Grunt

Install the Pure Grids Grunt Plugin through npm.

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

Next, add it to your Gruntfile.js.

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

Finally, add the necessary configuration through the pure_grids task. To see a full list of all configurable properties, check out the README documentation.

grunt.initConfig({
    pure_grids: {
        dest : 'build/public/css/main-grid.css',

        options: {
            units: 12, // 12-column grid

            mediaQueries: {
                sm: 'screen and (min-width: 35.5em)', // 568px
                md: 'screen and (min-width: 48em)',   // 768px
                lg: 'screen and (min-width: 64em)',   // 1024px
                xl: 'screen and (min-width: 80em)'    // 1280px
            }
        }
    }
});

Via Rework

If you're not using Grunt, you can also generate your custom responsive grids through using the Pure Grids Rework Plugin. It has the same configuration options as the Grunt plugin — in fact, this is what powers the Grunt plugin.

You can install the Rework plugin through npm.

$ npm install rework rework-pure-grids

And it can be used on it's own like this, or along side other Rework plugins you might be using.

var rework    = require('rework'),
    pureGrids = require('rework-pure-grids');

var css = rework('').use(pureGrids.units({
    mediaQueries: {
        sm: 'screen and (min-width: 35.5em)', // 568px
        md: 'screen and (min-width: 48em)',   // 768px
        lg: 'screen and (min-width: 64em)',   // 1024px
        xl: 'screen and (min-width: 80em)'    // 1280px
    }
})).toString();

console.log(css); // This will log-out the grid CSS.

Adapting Mobile-first Designs for Old Browsers

Developing your web project from a mobile-first perspective has benefits:

• CSS rules are easier to add than to remove, so it makes sense to start from the smallest and simplest layout, and add styles for larger screens.

• Forces you to think about your most important content, instead of shoe-horning desktop experiences into small screens.

However, one of the problems with mobile-first designs is that old browsers that don't support CSS Media Queries (such as IE 8) get a mobile-phone experience, which looks odd on a big screen.

To solve this, we helped develop the Strip MQ Grunt Plugin. By using this Grunt plugin, you're able to write mobile-first CSS, while ensuring that users on IE 8 and below get to view the desktop experience. It's the best of both worlds!

Via Grunt

Install the Strip MQ Grunt Plugin through npm.

$ npm install grunt-stripmq --save-dev

Next, add the Grunt task to your Gruntfile.js

grunt.loadNpmTasks('grunt-stripmq');

Add the necessary configuration through the stripmq task. Check out the README documentation for a full list of available options.

grunt.initConfig({
    stripmq: {
        all: {
            files: {
                // Takes the input file `grid.css`, and generates `grid-old-ie.css`.
                'css/grid-old-ie.css': ['css/grid.css'],

                // Takes the input file `app.css`, and generates `app-old-ie.css`.
                'css/app-old-ie.css': ['css/app.css']
            }
        }
    }
});

Finally, you'll need to add this block in your <head> to let old IE browsers request the generated CSS files.

<!--[if lt IE 9]>
    <link rel="stylesheet" href="css/grid-old-ie.css">
    <link rel="stylesheet" href="css/app-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="css/grid.css">
    <link rel="stylesheet" href="css/app.css">
<!--<![endif]-->

Mutating Selectors

All selectors defined in Pure's source code begin with the .pure- prefix. However, you may want to change this. To accomplish this task, you can use Pure's tooling to mutate CSS selectors.

Via Grunt

Install the CSS Selectors Grunt Plugin through npm.

$ npm install grunt-css-selectors --save-dev

Once it's installed, add the task to your Gruntfile.js

grunt.loadNpmTasks('grunt-css-selectors');

Finally, add the necessary configuration through the css_selectors task. Check out the README documentation for more details.

grunt.initConfig({
    css_selectors: {
        options: {
            mutations: [
                {prefix: '.foo'}
            ]
        },

        files: {
            'dest/foo-prefixed.css': ['src/foo.css'],
        }
    }
});

Via Rework

If you're not using Grunt, you can also mutate CSS selectors using the Mutate Selectors Rework Plugin. It has a similar interface to the Grunt plugin — in fact, this is what powers the Grunt plugin.

You can install the Rework plugin through npm.

$ npm install rework rework-mutate-selectors

And it can be used on it's own like this, or along side other Rework plugins you might be using.

var rework    = require('rework'),
    selectors = require('rework-mutate-selectors');

var css = rework(inputCSS)
    .use(selectors.prefix('.foo'))
    .use(selectors.replace(/^\.pure/g, '.bar'))
    .toString();

console.log(css); // This will log-out the resulting CSS.