Инструменты

Установка Pure с npm

Вы можете добавить Pure в свой проект через npm . Это рекомендуемый нами способ интеграции Pure в процесс сборки и цепочку инструментов вашего проекта.

$ npm install purecss --save

require('purecss') загрузит объект следующими методами:

• getFile(name)
- Получить содержимое файла модуля Pure.
• getFilePath(name)
- Вернуть полный путь к файлу Pure.

Установка Pure с Composer

Вы также можете установить Pure с Composer .

$ composer require pure-css/purecss

Расширение Pure с помощью Grunt

Мы написали несколько инструментов, которые помогут вам расширить Pure и интегрировать его с CSS вашего проекта. Эти инструменты доступны в виде подключаемых модулей Grunt, которые можно легко интегрировать в существующие Gruntfile.js.

Расширение Pure с помощью Rework

Мы использовали многоуровневый подход к разработке инструментов Pure. Большинство инструментов сначала создаются как плагины Rework . Это позволяет вам составлять плагины Pure's Rework вместе с другими плагинами Rework. Это также позволяет писать плагины Grunt в виде очень тонких оберток.

Создание настраиваемых адаптивных сеток

Pure был создан, чтобы помочь разработчикам создавать адаптивные веб-проекты, ориентированные на мобильные устройства. Однако, поскольку CSS Media Queries не может быть перезаписан с помощью CSS, вы можете использовать инструменты Pure для настройки адаптивных сеток Pure для вашего проекта.

Через Грунт

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
            }
        }
    }
});

$ npm install rework rework-pure-grids

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
    }
})).toString();

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

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

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

grunt.initConfig({
    css_selectors: {
        options: {
            mutations: [
                {prefix: '.foo'}
            ]
        },
        files: {
            'dest/foo-prefixed.css': ['src/foo.css'],
        }
    }
});

$ npm install rework rework-mutate-selectors

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);