На днях запустил UniCSS.Builder — это генератор html с использованием классов UniCSS в онлайн-режиме. Генератор мне хотелось сделать уже давно, но вот только сейчас получилась готовая реализация. Особая благодарность Юре, который уже традиционно выручил с js-кодом и полезными обсуждениями.
На примерах я покажу разницу в верстке между css-фреймворком UiKit и UniCSS для некоторых блоков. При этом сразу отмечу, что UiKit очень хороший фреймворк, во всяком случае многократно лучше распиаренного бутстрапа или Foundation (это вообще — тихий ужас...). Я лишь хочу показать различия в методике верстки. А UiKit я выбрал именно потому что это хороший фреймворк с которым приятно работать.
Различия фреймворков
Несколько моментов. UniCSS — это фреймворк «атомарного» уровня, то есть в нём нет предопределенного дизайна и готовых компонентов. UiKit, наоборот, фреймворк с готовым набором компонентов и предопределенным дизайном. Что лучше — вопрос спорный, поскольку в UniCSS, если нужно определить дизайн какого-то элемента, вебмастер просто созадаёт my-класс ровно так как ему нужно или использует комбинацию существующих. В UiKit же придется не просто создавать класс, но и учитывать уже предопределенный класс элемента, чтобы его переопределить. Кроме того UiKit предполагает использование предопределенных css-классов и предопределенной html-разметки.
В UniCSS хоть и нет предопределенного дизайна, но есть наборы цветов. Их довольно много, но главное, что они все настраиваются. Поэтому, если в примерах ниже, я использую gray200
— то это не означает, что этот цвет точно соответствует цвету в UiKit. Если нужно точное соответствие, то определяются цвета color1..A1..color5..A5 и используются уже они. Ну и плюс цветовые наборы: white, black, gray, red, green, blue и т.д. Всё это описано на сайте UniCSS и если возникли вопросы, лучше обратиться к документации.
Основы работы с UniCSS.Builder
Думаю, что особых сложностей с пониманием генератора не возникнет. Верхний select — это подключаемый css-фреймворк. В нашем случае UniCSS. Пункт none — это отстутсвие подключаемых стилей, то есть голый html браузера.
Второй select — это локальное хранилище LocalStorage. Кнопками можно добавлять произвольный html-код в хранилище. Это всё работает на уровне браузера, без обращений к серверу. Когда вы закроете страницу, все фрагменты сохранятся.
Нижний select — это группы элементов. Это примеры, которые можно использовать как заготовку или просто для тестирования фреймворка.
В правой части идет живой предпросмотр, а в нижней textarea html-код — здесь мы его будем набирать.
Пример блока из UiKit
Я взял вот эту страницу, где собраны примеры раскладок блоков.
Примеры я буду показывать поблочно, так короче код, и он проще для понимания.
Вот первый пример:
Его html-код:
<div class="uk-grid" data-uk-grid-margin> <div class="uk-width-medium-1-1"> <div class="uk-vertical-align uk-text-center" style="background: url('data:image/svg+xml;...') 50% 0 no-repeat; height: 450px;"> <div class="uk-vertical-align-middle uk-width-1-2"> <h1 class="uk-heading-large">Sample Heading</h1> <p class="uk-text-large">Cras justo odio, ...</p> <p><a class="uk-button uk-button-primary uk-button-large" href="#">Button</a> <a class="uk-button uk-button-large" href="#">Button</a> </p> </div> </div> </div> </div>
Рассмотрим этот блок детальней. Сам блок центрируется по браузеру и имеет ограничение на максимальную ширину. Это достаточно типовое поведение.
Внутри блока размещается заголовок H1, текст и две кнопки. Эти элементы центрируются по вертикали. По html-коду мы можем сказать, что эти элементы, похоже, имеют какой-то большой размер, о чем свидетельствуют css-классы: uk-heading-large
, uk-text-large
и uk-button-large
. Какой конкретно это размер сейчас сказать невозможно. Блок имеет высоту 450px, которая задаётся через параметр style.
Это частая практика, не нужно бояться использовать style.
Попробуем сделать подобный элемент на UniCSS (используйте UniCSS.Builder для проверки кода).
Вначале зададим основной блок, выровненный по центру.
<div class="layout-center-wrap"><div class="layout-wrap"> блок </div></div>
Wrap-блок нужен всегда, иначе просто не получится выровнять его по центру. В UiKit точно также.
Для wrap-блока задаём bg-gray200 t-center h400px
: фон, выравнивание по центру и высоту блока. Высоту я указал 400px, потому что по умолчанию в UniCSS есть 400 и 500px. Если мы хотим использовать ровно 450, то либо используем style (как в UiKit) или добавим в sass-переменные в _variables.scss
.
Теперь давайте подумаем, как сделать центрирование по вертикали.
Самый простой способ — использовать flex и указать класс flex-vcenter
. Таким образом нам потребуется одна flex-ячейка (так по исходному дизайну). За flex-контейнер можно взять wrap-блок и добавить ещё один div-блок (ячейка).
<div class="layout-center-wrap"> <div class="layout-wrap bg-gray200 t-center h400px flex flex-vcenter"> <div class="w100"> блок </div> </div></div>
Сама ячейка должна быть выровнена на всю ширину, поэтому мы указываем w100
(width: 100%).
Сетка готова, у нас получилось на один div-блок меньше, чем в UiKit.
Теперь будем добавлять вложенные элементы блока. Базовая разметка будет такая же:
<h1>Sample Heading</h1> <p>Cras justo odio, dapibus ...</p> <p> <a class="button">button</a> <a class="button">button</a> </p>
Приведем его в соответствие дизайну. Заголовок дожен быть больше, пусть например 3.3rem (330% от базового шрифта 16px — это все также настраивается): это класс t330
.
Текст также должен быть чуть больше, серым цветом и немного поправим отступы сверху и снизу: t130 t-gray700 mar15-t mar20-b
.
С кнопками выставим нужные цвета: первая кнопка: button bg-blue t-white hover-bg-blue600 hover-t-white
. Вторая button bg-gray400 t-white hover-bg-gray500 hover-t-white
. Класс button
делает типовую плоскую кнопку (flat). Если нужен другой вариант, например градация, то придется задать его отдельным my-классом (или существующий gr-gray400-100
), или использовать style.
Вот готовый html-код:
<div class="layout-center-wrap"> <div class="layout-wrap bg-gray200 t-center h400px flex flex-vcenter"> <div class="w100"> <h1 class="t330">Sample Heading</h1> <p class="t130 t-gray700 mar15-t mar20-b">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo.</p> <p> <a class="button bg-blue t-white hover-bg-blue600 hover-t-white" href="#">button</a> <a class="button bg-gray400 t-white hover-bg-gray500 hover-t-white" href="#">button</a> </p> </div> </div></div>
Глядя на код, можно сразу понять назначение css-классов. Классы между собой как правило не связаны и не завязаны на предопределенную html-разметку. В этом и есть принципиальное различие в методике верстки UniCSS и прочих css-фреймворков.