Инструменты

Пишите, манипулируйте и делайте больше с помощью CSS.

Установка 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
            }
        }
    }
});

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

И его можно использовать отдельно, как это, или вместе с другими плагинами Rework, которые вы, возможно, используете.

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