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

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

UniCSSПросмотров: 8171 (237)

Классы 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-код будет гораздо (многократно!) меньше.

Последние версии UniCSS используют не LESS, а SASS-препроцессор.

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

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

Каталог main это то, где и выполняется верстка сайта. Причем файлы в этом каталоге подключаются вручную в style.less, а не все скопом.

В файле main/base.less прописаны базовые стили. Это сбросы, подключение шрифтов, а также основная типографика. В этом файле по возможности прописываются только стили тэгов без классов. Выносить в less-переменные какие-то значения для этого файла не имеет смысла, поскольку они будут только единыжды использованы. Так что проще сразу задать нужные css-стили.

Файл main/variables.less для задания переменных. Эти переменные могут быть использованы в файлах UniCSS.

Файл main/my-template.less используется для собственных стилей сайта.

Общий порядок работы такой:

  • Выставляем в main/variables.less нужные значения.
  • Правим main/base.less под нужный дизайн.
  • Свои стили в main/my-template.less.

Миксы

Параметизированные (!) миксы размещаются в mixins. Сейчас там lite-версия моего less-фреймворка (закрытая разработка), а также переменные с цветами от гугла. Миксы подключаются автоматом в самом начале.

Группы классов

Классы UniCSS разделены на функциональные группы по файлам. Если какая-то группа не требуется, то файл можно удалить. Или, наоборот, добавить новый.

Обновление фреймворка

Важный вопрос — как обновлять UniCSS? Мой совет — никак. Для каждого сайта используйте только ту версию, с которой начали работать. Строго говоря, обновлять не следует и любой другой css-фреймворк, поскольку измененные классы/стили/файлы могут поломать сайт.

Цвета

Охватить всю гамму цветов нереально, поэтому за основу взят принцип, что любой дизайн можно составить из 5-ти основных и 5-ти дополнительных цветов. Они задаются в less-переменных. Само значение цвета может быть любым, а можно взять готовые решения из гугловского material design. Они определены как less-переменные в colors-gmd.less.

Серому цвету (серая градация) отдано особое значение, поскольку он часто используется для прототипирования. Он также задается в less-переменных.

Цвета задаются для текста (t-), фона (bg-), границ (brd-) и градаций (gr-).

Сетка. Ширина. Адаптивность

Используется только flex-сетка. IE9 уже мало кого интересует, поэтому ограничений по браузерам можно сказать, что нет. Те, кто уже работает с flex, прочуствовали всю прелесть такого решения.

Для задания ширины используется width с шагом 1%. Такой мелкий шаг часто нужен для задания промежутков. Например три колонки по 32%.

Адаптивность реализуется через постфиксы -tabletи -phone. За основу берется desktop first, то есть вначале определяются стили десктопов (широкие экраны — это дефолт), далее tablet и в конце phone. Это отличается от mobile first других css-фреймворков, но зато проще для понимания. Технически же это просто последовательность задания классов.

Для адаптивности используется только две точки: 768px и 480px (задаются в less-переменных). По момему опыту этого достаточно.

Точные размеры

Поначалу я решил, что оптимально будет использовать абстрактные размеры, вроде t-small, pad-large. В процессе создания сайтов выяснилось, что такая абстракция только усложняет работу. Какой бы ни был абстрактный класс, в результате нужно получить точный размер. Поэтому проще сразу указать нужный класс: t250 (2.5rem), pad50 (50px), t24px (24px), w992px (992px).

Для текста используются единицы rem — это позволяет задавать размер от корневого элемента сайта (body), а не от родительского блока.

Модульная сетка

Модульная сетка может быть глобальной для всего сайта, либо локальной для каждого блока. Модульная сетка — это не flex. Задача модульной сетки — расположение глобальных блоков: шапка, подвал, сайдбар и т.п. Технически модульная сетка бывает двух вариантов: со 100% шириной браузера и с центральным позиционированием. Вот так задано центрирование:

.layout-center {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: @layout_max_width;
    .box > .clearfix;
}

Если нужно задать фон на всю ширину браузера, а содержимое отцентрировать, то используется дополнительный wrap-блок.

<div class="layout-center-wrap"><div class="wrap">
...
</div></div>

Для div.layout-center-wrapможно задать дополнительное оформление, например фон и отступы.

<div class="layout-center-wrap bg-gray200 pad20-tb"><div class="wrap">
...
</div></div>

Бордюры

С ними пришлось повозиться, поскольку охватить все возможные варианты очень сложно. Поэтому придумал простую вещь — отдельно задаются разные параметры border: border-style, border-width и border-color. Например, чтобы отобразить левую серую границу в 3px:

<h6 class="brd-gray700 brd-solid-l brd3px">Текст</h6>

Это довольно объёмынй код, но только так можно охватить все варианты. Если ширина равна 1px, то её можно не указывать:

<h6 class="brd-gray300 brd-dashed">Текст</h6>

Иконки

Для иконок используется Font-Awesome. Из-за этого размер css-файла увеличивается почти на 25Кб. Это много, но с другой стороны это аж 479 иконки! Думаю, что оно того стоит.

Отступы

В файле padding-margin.less задаются варианты для padding и margin с помощью миксов:

.box > .set_padding(10px, pad10)

Поскольку размеров много (5, 6, 7, 10, 15, 20, 25, 30, 40, 50px), да еще и с !important, то получается довольно большой объём кода. Если какие-то значения не нужны, то их можно удалить. Или добавить новые. Данный ряд возник в процессе работы над сайтами, но у вас может быть другой вариант.

Для адаптивности используются только сбросы отступов (pad0 и mar0). Вариант, где прописываются все отступы для phone и tablet у меня оказался невостребованным.

Классы UniCSS в своём css-коде

Можно делать так (тот же пример, что и вверху):

<div class="my-top">
...
</div>
 
.my-top { 
    .mar20-t;
    .pad10;
    .t-white;
    .bg-gray500;
}

А если вы знаете что такое :extend, то даже так:

.my-top {
    .mar20-t;
    .pad10;
    &:extend(.t-white);
    &:extend(.bg-gray500);
}

Таковы возможности языка LESS.

Развитие UniCSS

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

В перспективе, возможно, будет какой-то фиксированный вариант классов. Пока я использую UniCSS в основном для лэндингов, но с прицелом адаптации для будущей версии MaxSite CMS.


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.