Свой дизайн

Свой уникальный стиль с Pure.

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

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

Основан на SMACSS

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

Соглашение по именам классов

  • Все имена классов начинаются с префикса pure- для предотвращения конфликтов.
  • Для общих CSS-правил каждого модуля применяется стандартное имя класса, например pure-form.
  • Для CSS-правил каждого суб-модуля применяются дополнительные имена классов, например pure-form-stacked.

Кроме того, мы старались избегать презентационных имён классов. Вместо имени класса вида pure-form-horizontal мы предпочитаем pure-form-aligned.

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

Как пример, рассмотрим HTML и CSS для Вертикальной формы:

Вертикальная форма: HTML

Для вертикальной формы используем два имени класса, pure-form и pure-form-stacked.

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

Вертикальная форма: CSS

Каждое имя класса служит своей цели. Первое pure-form используется в качестве селектора для группировки общих правил для всех форм, в то время как другое pure-form-stacked определяет особые правила именно для вертикальной формы.

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

/*
Это правила, действущие только для вертикальных форм.
Например, сюда входит правило display: block
для <input> полей вертикальной формы.
*/
.pure-form-stacked  { ... }

Свой дизайн с Pure

Создавая свой уникальный дизайн «поверх» Pure, придерживайтесь этих соглашений. Например, вы создаёте новый вид форм на сайте. Тогда ваши HTML и CSS будут выглядеть примерно так:

<form class="form-custom pure-form">
    ...
</form>
/* здесь будут ваши стили для формы */
.form-custom { ... }

Одна из распространённых задач — создание кнопок разных цветов и размеров. В Документации по кнопкам вы найдёте примеры создания кнопок разных цветов и размеров, применяя модульную архитектуру SMACSS.

Pure + Bootstrap + JavaScript

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

  • Ваш CSS будет намного меньше — до 5X меньше в некоторых случаях!

  • Вы работаете с минималистичным Pure, на основе которого легко создать свой дизайн. Больше не придётся переопределять кучу стилей!

  • Работайте с экосистемой Bootstrap без громоздкого цельного CSS-файла Bootstrap.

Вот пример всплывающего модального окна Bootstrap Modal. Используем Pure CSS, и просто добавляем modal.css из комплекта Bootstrap вместе с соответствующим jQuery плагином.

Запустить Pure + Bootstrap Modal

Перевод c оригинального сайта purecss.io
© 2017 Aharito