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 yahoo/purecss

Generating Custom Responsive Grids

Pure was created to help developers 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.

The purecss npm package includes generateGrids(), the same generator Pure uses to build its own grid files. It has no dependencies and returns the CSS as a string.

$ npm install purecss --save-dev

import { generateGrids } from 'purecss';

const css = generateGrids({
    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
    }
});

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

To use your own unit sizes, pass them first. For example, generateGrids([12], options) creates a 12-column grid, including rules outside of any media query. Other options are selectorPrefix (default .pure-u-), decimals (default 4), includeReducedFractions, includeWholeNumbers and indent.

Mutating Selectors

All selectors defined in Pure's source code begin with the .pure- prefix. However, you may want to change this, or scope Pure to part of your page.

To scope Pure's base styles, use the prebuilt base-context.css. It applies them only inside an element with the pure class.

For anything else, a few lines of PostCSS will rewrite Pure's selectors:

$ npm install postcss --save-dev

import postcss from 'postcss';

const mutateSelectors = {
    postcssPlugin: 'mutate-selectors',
    Once(root) {
        root.walkRules((rule) => {
            // Skip keyframe steps such as `from` and `50%`.
            if (rule.parent.type === 'atrule' && /keyframes$/.test(rule.parent.name)) {
                return;
            }

            rule.selectors = rule.selectors.map((selector) =>
                // Rename Pure's classes, then scope them under `.foo`.
                '.foo ' + selector.replace(/\.pure-/g, '.bar-'),
            );
        });
    },
};

const { css } = await postcss([mutateSelectors]).process(inputCSS, { from: undefined });

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