Современная, быстрая и удобная система управления сайтом

Основы UniCSS

Архив записейКомментарии: 0Просмотров: 8877

UniCSS — css-фреймворк атомарного уровня. Это значит, что его классы описывают только одно css-свойство (как правило), что делает его универсальным в использовании. Атомарные классы давно уже присутствуют в css-фреймворках в виде хелперов (helpers, utils или tools), да и любой верстальщик как правило имеет свой подбный набор.

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

Прежде чем переходить к примерам, необходимо сразу ответить на вопросы, касающиеся эффективности версткой обычным способом (с разделением в css и в html) и атомарным (только в html). Ответ простой — атомарный лучше, поскольку это быстрей и проще. На этот счёт на недавней киевской вебконференции был доклад Дмитрия Цысаря: Атомарный CSS — просто посмотрите, чтобы здесь не повторяться.

Возвращаясь к именованию классов я хочу привести несколько примеров. В Atomic CSS (Atomizer) используется «функциональная нотация», например вот такие классы:

<div class="Bd Bdc(#ff6347) P(10px)">Lorem ipsum dolor sit amet.</div>

С точки зрения программиста, в нём можно разобраться, хотя аналогичный класс BdEnd уже вызовет массу вопросов. При верстке важно сразу видеть назначение класса. Если есть неопределенность, то это уже проблема. Например какое назначение класса Cf? Хотя это обычный Clearfix.

В Atomizer такой подход используется для того, чтобы с помощью специальной утилиты можно было бы собрать указанные в html-странице классы и создать отдельный css-файл. Это интересный подход, но он мало пригоден там, где множество страниц с разным html-кодом и разными css-классами. Кроме того, здесь отсекается конечный пользователь сайта, который должен иметь в своём распоряжении уже готовые классы для оформления статей сайта. Поэтому оптимальным будет всё-таки другой подход, где формируется готовый набор css-классов.

Первый бич «атомных» фреймворков — невнятное описание. Например .button-warning указывает на кнопку, но не указывает на конкрентый цвет. Или например что это за цвет .is-link? Такие классы не только не ускоряют верстку, а скорее её тормозят, поскольку приходится постоянно обращаться к документации или исходному css-коду.

Вторая проблема — избыточность классов там где она не нужна. Например в Bootstrap'е есть класс .h1, который дублирует тэг H1. В реальной верстке это излишество, поскольку если требуется указать заголовок, то будет использоваться именно тэг, а не его класс, вроде h6.h1, а если нужно изменить какой-то текст, то следует использовать атомарные классы, задающие размер, цвет и т.д.

Теперь перейдём непосредственно к UniCSS. Классы начинаются с префикса, который указывает на группу. Они общеприняты, поэтому не вызывают сложностей с запоминанием. Префикс нужен там, где возникает неоднозначность. Например класс red хоть и говорит о цвете, но не указывает на css-свойство. При этом t-red однозначно задаёт цвет текста (свойство color), bg-red укажет на цвет фона (background-color), а bor-red определит цвет бордюра (border-color).

C цветами вообще довольно сложно. Почему-то в верстке преобладает мнение, что нужно называть цвет по функциональному назначению, вроде danger, warning, success или info. При таком именовании мы не то что точный цвет не знает, но даже его оттенка. Если нужно сделать зеленую кнопку с желтым текстом, то логичней указывать bg-green t-yellow, вместо success.

Иногда встречаются совершенно замечательные примеры, где например класс white указывает не на #FFF, а что-то вроде #F6F6F8.

В UniCSS имеются группы цветов и их градация яркости, как это используется в гугловском Material Design. Каждый цвет имеет яркость от 0 (самый светлый) до 1000 (самый темный), которые представлены классами (на примере t-red): t-red50, t-red100, t-red200 ... t-red900. Это позволяет охватить практически любые задачи верстки.

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

Также в UniCSS присутствуют классы color1..5 и colorA1..5 которые можно настроить под задачи верстки.

Из особенностей UniCSS следует отметить, что он содержит сброс стилей normalize, а также для всех элементов выставляется box-sizing: border-box. Сейчас это общепринятая практика.

В каталоге main располагаются файлы, которые можно переопределять для своего шаблона. Это типографика и начальное оформление элементов (тэгов). В файл _variables.scss вынесены все настройки и который в процессе верстки нужно будет редактировать. В стандартном варианте он немного избыточен, чтобы охватить все варианты, но их легко можно сократить до любого объёма.

В комплект включен иконочый шрифт FontAwesome, что увеличивает результирующуй css-файл, но с другой стороны даёт доступ к 675 (в версии 4.7.0) иконок.

Касаемо размера css-файла. Если на сервере использутся gzip-сжатие, то такой файл занимает очень мало трафика — примерно 20Кб. Для браузера атомарные классы очень «легки», поэтому парсинг страниц не вызывает никаких сложностей.

В UniCSS присутствует поддержка flex, поэтому все сетки мы делаем по этой методике. Я рекомендую посмотреть примеры и их исходный код, чтобы разобраться в этом вопросе.

Для задания модульной сетки испольуются два варианта. Первый (.layout-center) — без внутреннего контейнера, когда нужно просто ограничить размер блока до максимального размера.

.layout-center {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: 992px;
}

Максимальный размер (max-width) задается в переменной $layout_max_width в файле _variables.scss. При создании шаблона эту переменную следует определять как можно раньше.

Второй вариант — использование внутреннего контейнера. Здесь используются два div-блока:

<div class="layout-center-wrap"><div class="layout-wrap"> блок </div></div>

Контейнер .layout-center-wrap имеет 100% ширину браузера, а .layout-wrap ограничивается уже максимальной шириной. Для контейнера обычно задают фон или границу, которая расстягивается на весь браузер, а внутренний блок аккуратно центрируется. Это очень частый приём верстки.

Чтобы потренироваться или отладить код, воспользуйтесь UniCSS.Builder, где в реальном времени можно увидеть готовый результат верстки.

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

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

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