Инструменты

Управляйте Pure CSS с помощью инструментария.

Установка Pure с помощью npm

Интегрируйте Pure в ваши проект при помощи npm. Мы рекомендуем именно этот вариант.

$ npm install purecss --save

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

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

Установка Pure через Bower

Можно добавить Pure в проект через Bower. Это прекрасно работает, если ваш веб-сайт использует SSL-шифрование.

$ bower install pure --save

Установка Pure через Composer

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

$ composer require yahoo/purecss

Кастомизация Pure через Grunt

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

Кастомизация Pure через Rework

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

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

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

При помощи Grunt

Установите Pure Grids Grunt Plugin через npm.

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

Далее, добавьте в ваш Gruntfile.js.

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

Наконец, добавьте нужную конфигурацию через задачу pure_grids. Полный список параметров конфигурации доступен в Документации.

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

При помощи Rework

Не работаете с Grunt? генерируйте ваши адаптивные сетки при помощи Pure Grids Rework Plugin. Параметры конфигурации те же, что и в плагине Grunt — фактически, это и есть тот же Grunt-плагин.

Установите плагин Rework через npm.

$ npm install rework rework-pure-grids

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

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); // CSS для сетки будет выведена в консоль.

Адаптируем сетку для старых браузеров

Разработка проекта как мобильно-ориентированного даёт преимущества:

  • Правила CSS легче добавлять, чем удалять, поэтому имеет смысл начать с самого маленького и простого макета и уже потом добавить стили для больших экранов.

  • Заставляет вас думать о самом важном контенте, а не о том, как втиснуть монитор настольного компьютера в маленький экран мобильника.

Однако, старые браузеры (такие как ИЕ 8) не поддерживают медиа-запросы CSS. И мобильно-ориентированные дизайны выглядят в этих браузерах довольно странно.

Если вы собираетесь поддерживать старые браузеры, воспользуйтесь плагином Strip MQ Grunt Plugin. С этим плагином, вы можете писать CSS для мобильных устройств, обеспечивая при этом пользователям IE 8 и ниже возможность корректного просмотра сайта на настольных компьютерах. 

Используем Grunt

Установите Strip MQ Grunt Plugin через npm.

$ npm install grunt-stripmq --save-dev

Далее, добавьте Grunt task в ваш Gruntfile.js

grunt.loadNpmTasks('grunt-stripmq');

Опишите нужную конфигурацию в stripmq. Полный список доступных опций - в  Документации.

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

И затем, добавьте этот блок в ваш <head>:

<!--[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]-->

Смена префикса селекторов

Все CSS-селекторы Pure начинаются с префикса .pure-. В инструментарии Pure есть средство для решения этой задачи.

Через Grunt

Установите CSS Selectors Grunt Plugin через npm.

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

Добавьте task в Gruntfile.js

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

Затем, задайте нужный конфиг в css_selectors. Более подробно - в  Документации.

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

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

Через Rework

То же самое можно сделать с плагином  Mutate Selectors Rework Plugin. Интерфейс тот же. что и Grunt-плагине — это по сути тот же плагин.

Установите Rework-плагин через npm.

$ npm install rework rework-mutate-selectors

Плагин работает как автономно, так и совместно с другими Rework-плагинами.

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); // Результирующая CSS.
Перевод c оригинального сайта purecss.io
© 2017 Aharito