Tools

Installing Pure with npm

You can add Pure to your project through npm. This is our recommended way to to integrate Pure into your project's build process and tool chain.

$ npm install purecss --save

require('purecss') will load an object with the following methods:

• getFile(name)
– Retrieve contents of a Pure module file.
• getFilePath(name)
– Return full path to a Pure file.

Installing Pure with Composer

You can also install Pure with Composer.

$ composer require pure-css/pure

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
                xxl: 'screen and (min-width: 120em)',  // 1920px
                xxxl: 'screen and (min-width: 160em)',  // 2560px                                    
                x4k: 'screen and (min-width: 240em)'  // 3840px                                    
            }
        }
    }
});

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.

import rework from 'rework';
import pureGrids from 'rework-pure-grids';

const 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
        xxl: 'screen and (min-width: 120em)',  // 1920px
        xxxl: 'screen and (min-width: 160em)'  // 2560px
        x4k: 'screen and (min-width: 240em)'  // 3840px
    }
})).toString();

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

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.

import rework from 'rework';
import selectors from 'rework-mutate-selectors';

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

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