MaxSite.org 11 лет
Блог вебмастера о сайтостроении

CSS: унификация классов и прототипирование (часть 2)

UniCSSПросмотров: 8319 (228)

Классы UniCSS состоят из простых css-правил. Этот фреймворк не задает UI сайта. Его задача — перенести верстку с уровня css-файла в html-код.

Смотрите. Обычно мы делаем так (простой пример):

<div class="my-top">
...
</div>
 
.my-top { 
    margin-top: 20px;
    padding: 10px;
    color: #FFF;
    background-color: #888;
}

C помощью UniCSS будет уже так:

<div class="mar20-t pad10 t-white bg-gray500">
...
</div>

То есть мы написали тот же самый код, только в HTML в виде самостоятельных классов. Если проанализировать работу верстальщика, то это постоянное переключение между css и html файлами. Здесь же мы работаем только с html. Вы удивитесь, сколько это экономит времени и насколько упрощает работу!

В данном примере .my-topкакой-то «технический» класс, не содержащий уникальных стилей. Отступы, фон, текст, ширина и прочие примитивы. При использовании UniCSS уже не требуется создавать отдельный класс блока. CSS-код будет гораздо (многократно!) меньше.

Общая структура фреймворка

Основной файл style.scss, где и выполняется подключение sass-файлов. Каталог UniCSS собственно и содержит классы фреймворка.

Каталог 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>

Первая часть

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.