Модификации

Надстройки для Pure

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

Руководство по стилю

SMACSS как основа

Pure разбивается на ряд адаптивных модулей. С самого начала, SMACSS был принят в качестве основы для написания CSS Pure. Для тех, кто плохо знаком с SMACSS, вы должны с ним ознакомиться, особенно с разделом модульные правила.

Правила для задания имён классов

Одно из главных условий в Pure, это присвоение для каждого модуля стандартного имени класса, для задания общих правил всему модулю, и дополнительных имён классов для задания частных правил для конкретных элементов модуля. Все имена классов начинаются с префикса pure- для предотвращения конфлитов и переопределения стилей. Кроме того, предпочтительно воздерживаться от назначения неосмысленных имён классов. Вместо имени класса pure-form-horizontal, предпочтительно назвать его pure-form-aligned. Это предотвращает тесную связь между именами и стилями классов, и помогает в поддержке кода.

Например, авайте рассмотрим HTML and CSS-код для формуляра:

Формуляр: HTML

Формуляр создаётся путём добавления двух имён классов: pure-form и pure-form-stacked.

<form class="pure-form pure-form-stacked">
	...
</form>

Формуляр: CSS

Два класса служат разным целям. Один из них используется в качестве общего селектора в общих групповых правилах для всех форм, а другой определяет специфические правила для формуляра.

/*
Стандартные праила для форм Pure. Они вкючают правила для стилей
.pure-form <inputs>, <fieldsets>, and <legends>, а также макетные правила,
такие, как вертикальное выравнивание.
*/
.pure-form { ... }

/*
Особые правила, которые применяются к формулярам. Они включают в себя правила
расположения внутри родительского элемента полей ввода <input> и их отображения:
в форм-факторе логических блоков формуляра.
*/
.pure-form-stacked  { ... }

Модифицирование Pure

Когда вы модифицируете или расширяете Pure, рекомендуется следовать следующим правилам. Например, если вы хотите создать новый тип формы, ваш HTML и CSS-код должен выглядеть примерно так:

<form class="pure-form pure-form-custom">
	...
</form>
/* добавьте свои правила в этот селектор */
.pure-form-custom { ... }

Одна из распространённых задач, которую вы можете решать - создания уникального стиля для кнопок. В документации по кнопкам Pure имеется несколько примеров того, как можно создать кнопки с нестандартным размером и стилем, используя модульную архитектуру.

Использование Skin Builder

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

Запустить Skin Builder

Pure + Bootstrap + JavaScript

Pure хорошо интегрируется с другими библиотеками, в том числе Bootstrap и jQuery. Как разработчик, вы можете подключить Pure, как основной CSS-фреймворк, а затем подключить конкретные модули Bootstrap или jQuery, которые могут потребоваться для вашего приложения. Это даст вам несколько преимуществ:

  • Css-код вашего веб-сайта или веб-приложения будет намного меньше - в 5 раз некоторых случаях!

  • Вы получаете минималистский код Pure, что позволит легко поключить его, как независимую основу дизайна страницы. Нет необходимости переписывать прочии CSS-стили!

  • Вы можете воспользоваться окружением Bootstrap без необходимости подключения и загрузки всей библиотеки.

Например, вот модульное окно от Bootstrap. Оно создаётся путем подключения библиотеки Pure, модуля modal.css от Bootstrap вместе и использования плагина Jquery.

Запуск Pure и модального окна Bootstrap