CSS: унификация классов и прототипирование (часть 2)
20-12-2014Время чтения ~ 5 мин.CSS, HTML, LESS, SASS 13902
Классы Berry CSS состоят из простых css-правил. Этот фреймворк не задает UI сайта. Его задача — перенести верстку с уровня css-файла в html-код.
Смотрите. Обычно мы делаем так (простой пример):
<div class="my-top">
...
</div>
.my-top {
margin-top: 20px;
padding: 10px;
color: #FFF;
background-color: #888;
}
C помощью Berry CSS будет уже так:
<div class="mar20-t pad10 t-white bg-gray500"> ... </div>
То есть мы написали тот же самый код, только в HTML в виде самостоятельных классов. Если проанализировать работу верстальщика, то это постоянное переключение между css и html файлами. Здесь же мы работаем только с html. Вы удивитесь, сколько это экономит времени и насколько упрощает работу!
В данном примере .my-top какой-то «технический» класс, не содержащий уникальных стилей. Отступы, фон, текст, ширина и прочие примитивы. При использовании Berry CSS уже не требуется создавать отдельный класс блока. CSS-код будет гораздо (многократно!) меньше.
Общая структура фреймворка
Основной файл style.scss, где и выполняется подключение sass-файлов. Каталог Berry CSS собственно и содержит классы фреймворка.
Каталог main это то, где и выполняется верстка сайта. Причем файлы в этом каталоге подключаются вручную в style.scss, а не все скопом.
В файле main/_base.scss прописаны базовые стили. Это сбросы, подключение шрифтов, а также основная типографика. В этом файле по возможности прописываются только стили тэгов без классов. Выносить в less-переменные какие-то значения для этого файла не имеет смысла, поскольку они будут только единыжды использованы. Так что проще сразу задать нужные css-стили.
Файл main/_variables.scss для задания переменных. Эти переменные могут быть использованы в файлах UniCSS.
Общий порядок работы такой:
- Выставляем в main/_variables.scss нужные значения.
- Правим main/_base.scss под нужный дизайн.
- Свои стили в каталоге main.
Sass-функции
UniCSS использует различные функции для генерации css-классов. Особенностью является то, что через настройки можно управлять тем, какие классы требуются для работы.
Группы классов
Классы UniCSS разделены на функциональные группы по файлам. Если какая-то группа не требуется, то файл можно удалить. Или, наоборот, добавить новый.
Обновление фреймворка
Важный вопрос — как обновлять UniCSS? Мой совет — никак. Для каждого сайта используйте только ту версию, с которой начали работать. Строго говоря, обновлять не следует и любой другой css-фреймворк, поскольку измененные классы/стили/файлы могут поломать сайт.
Цвета
Охватить всю гамму цветов нереально, поэтому за основу взят принцип, что любой дизайн можно составить из 5-ти основных и 5-ти дополнительных цветов. Они задаются в less-переменных. Само значение цвета может быть любым, а можно взять готовые решения из гугловского material design. Они определены как less-переменные в _colors-gmd.scss.
Серому цвету (серая градация) отдано особое значение, поскольку он часто используется для прототипирования. Он также задается в less-переменных.
Цвета задаются для текста (t-), фона (bg-), границ (bor-) и градаций (gr-).
Сетка. Ширина. Адаптивность
Используется только flex-сетка. IE9 уже мало кого интересует, поэтому ограничений по браузерам можно сказать, что нет. Те, кто уже работает с flex, прочуствовали всю прелесть такого решения.
Для задания ширины используется width с шагом 1%. Такой мелкий шаг часто нужен для задания промежутков. Например три колонки по 32%. Конкретные ширины указываются в _variables.scss, где можно оставить толькт те варианты, которые будут востребованы.
Адаптивность реализуется через постфиксы -tablet и -phone. За основу берется desktop first, то есть вначале определяются стили десктопов (широкие экраны — это дефолт), далее tablet и в конце phone. Это отличается от mobile first других css-фреймворков, но зато проще для понимания. Технически же это просто последовательность задания классов.
Для адаптивности используется только точки: 768px и 480px (задаются в sass-переменных). Всего доступно несколько точек: SMALL, PHONE, TABLET, MEDIUM, DESKTOP, LARGE. Все они также настраиваются.
Точные размеры
Поначалу я решил, что оптимально будет использовать абстрактные размеры, вроде t-small, pad-large. В процессе создания сайтов выяснилось, что такая абстракция только усложняет работу. Какой бы ни был абстрактный класс, в результате нужно получить точный размер. Поэтому проще сразу указать нужный класс: t250 (2.5rem), pad50 (50px), t24px (24px), w992px (992px).
Для текста используются единицы rem — это позволяет задавать размер от корневого элемента сайта (body), а не от родительского блока.
Layout-сетка
Модульная (layout) сетка может быть глобальной для всего сайта, либо локальной для каждого блока. Модульная сетка — это не flex. Задача модульной сетки — расположение глобальных блоков: шапка, подвал, сайдбар и т.п. Технически модульная сетка бывает двух вариантов: со 100% шириной браузера и с центральным позиционированием. Вот так задано центрирование:
.layout-center {
width: 100%;
margin-right: auto;
margin-left: auto;
max-width: $layout_max_width;
}
Если нужно задать фон на всю ширину браузера, а содержимое отцентрировать, то используется дополнительный wrap-блок.
<div class="layout-center-wrap"><div class="layout-wrap"> ... </div></div>
Для div.layout-center-wrap можно задать дополнительное оформление, например фон и отступы.
<div class="layout-center-wrap bg-gray200 pad20-tb"><div class="layout-wrap"> ... </div></div>
Бордюры
С ними пришлось повозиться, поскольку охватить все возможные варианты очень сложно. Поэтому придумал простую вещь — отдельно задаются разные параметры border: border-style, border-width и border-color. Например, чтобы отобразить левую серую границу в 3px:
<h6 class="bor-gray700 bor-solid-l bor3">Текст</h6>
Это довольно объёмынй код, но только так можно охватить все варианты. Если ширина равна 1px, то её можно не указывать:
<h6 class="bor-gray300 bor-dashed">Текст</h6>
Иконки
Для иконок используется Font-Awesome. Из-за этого размер css-файла увеличивается почти на 40Кб. Это много, но с другой стороны это аж 675 иконок! Думаю, что оно того стоит.
Отступы
Поскольку размеров много (5, 6, 7, 10, 15, 20, 25, 30, 40, 50px), да еще и с !important, то получается довольно большой объём кода. Если какие-то значения не нужны, то их можно удалить. Или добавить новые. Данный ряд возник в процессе работы над сайтами, но у вас может быть другой вариант.
Классы UniCSS в своём css-коде
Можно делать так (тот же пример, что и вверху):
<div class="my-top">
...
</div>
.my-top {
@extend .mar20-t;
@extend .pad10;
@extend .t-white;
@extend .bg-gray500;
}
ps Кстати, по задачке из первой части: «Почему, например, нельзя сделать двуколоночную сетку 29% и 14% с промежутком 8% выровненным по центру, но смещенным слева на 50px?». В UniCSS это будет так (добавил цвета для красоты):
<div class="flex flex-hcenter bg-color1"> <div class="w29 mar50-l bg-gray200">29%</div> <div class="w8 bg-gray300"></div> <div class="w14 bg-gray400">14%</div> </div>