Berry - библиотека утилитарных CSS-классов

20-07-2019Время чтения ~ 5 мин.Berry CSS 10291

Утилитарные классы используются в любом css-фреймворке. С их помощью решаются какие-то типовые задачи верстки, например задаются отступы или размер шрифта. Каждый фреймворк использует свои утилитарные классы, которые именуются не всегда очевидным образом.

Например в Bootstrap 4 есть такие классы:

.py-5, .pt-2, .p-5, .m-5, .my-1, .m-1, .m-n1, .text-reset

Понять их назначение невозможно без обращения к документации.

.p-5 {padding: 3rem !important;}
.m-n1 {margin: -0.25rem !important;}
.m-1 { margin: 0.25rem !important; }
.text-reset {color: inherit !important;}

Во некоторых случаях css-классы меняют свое поведение. Например в UiKit 3 есть классы .uk-padding, который задает padding: 30px;, но при @media (min-width: 1200px) становится уже 40px.

Проблемы бывают и более глобального уровня. Например в Bootstrap 4 было принято решение, что для всех компонентов и многих элементов используется нулевой верхний отступ (margin-top:0), а отступы между элементами следует делать с помощью нижнего отступа. Это глобальное поведение, которое сложно изменить. Но что делать, если нужно состыковать два блока непосредственно друг к другу или задать какой-то другой вариант, не предусмотренный во фреймворке?

Библиотека Berry как раз и призвана решать эти проблемы.

Berry по своей сути это ядро UniCSS. Вообще UniCSS и создавался как утилитарные классы (atomic design), но в процессе работы я решил добавить несложную типографику под основные задачи. UniCSS я активно использую при верстке лендингов и сайтов MaxSite CMS, где нет потребности использовать сторонний css-фреймворк.

Но, css-фреймворк это не только типографика, которую в общем-то несложно создать, но и множество дополнительных компонентов (включая и JS). Поэтому Berry представляет собой лишь надстройку над произвольным css-фреймворком. Иногда это называется utility-first, когда вначале загружается css-файл утилит, а после основной файл фреймворка:

<link href="/path_to_styles/berry.css" rel="stylesheet">
<link href="/path_to_styles/ANY.css" rel="stylesheet">

Но, в целом, конечно классы практически не пересекаются, поскольку в Berry (и UniCSS) используется строгая методика именования классов. Более того, в Berry можно задать произвольный префикс для всех утилитарных классов, что позволяет на 100% гарантировать совместимость с любым фреймворком.

Методика именования css-классов

Я не буду её приводить, поскольку всё описано в на сайте. Но общий смысл в том, что классы содержат префикс, указывающий на назначение, и модификаторы, которые уточняют действие класса.

Сами модификаторы интуитивно понятны, во всяком случае хватит даже беглого ознакомления, чтобы без проблем понять назначение класса. Это основа атомного дизайна.

Сбросы

Некоторые фреймворки не содержат сбросов Normalize и border-box, как например UiKit. Поэтому в Berry можно подключить файлы сбросов под свою задачу.

Настройка Berry

Berry написан на Sass, поэтому легко компилируется под свою задачу. В нём используется модульный подход, когда все зависимости находятся в одном файле. Например если не нужны классы flex, то достаточно закоментировать строчку в berry.scss — это никак не отразится на других файлах.

В Berry большинство css-классов создаются динамически. То есть создание классов напрямую зависит от указанных значений в настройках. Таковы возможности Sass.

Все основные настройки вынесены в _variables.scss. Их довольно много, но я их сгруппировал для удобного редактирования.

Адаптивность

В Berry адаптивность создается с помощью @media-условий (как и везде). Сложность в том, что css-фреймворки используют разные breakpoint, поэтому при использовании желательно как-то согласовать их с используемым фреймворком.

Я например использую в основном две точки:

$SCREEN_TABLET:  "(max-width: 768px)";
$SCREEN_PHONE:   "(max-width: 667px)";

Поскольку они наиболее полно покрывают текущие телефоны и планшеты (см. статистику)

Что касается постфикстов адаптивности, то каждый фреймворк предлагает свои варианты. В Bootstrap 4 используют -sm, -md, -lg, и -xl. В UiKit 3: -small, -medium, -large, -xlarge и -xxlarge. При этом у каждого под этим подразумеваются свои значения:

UiKit:
small: 640px
medium: 960px
large: 1200px
 
Bootstrap 4:
sm: 576px // small
md: 768px // medium
lg: 992px // large

В Berry проблема решается через произвольные @media-условия и произвольные префиксы. То есть определяется переменная и её медиа-условие. Дальше переменная указывается с произвольным префиксом.

$SCREEN_MD: "(max-width: 768px)";
$SCREEN_MY_PHONE: "(max-width: 640px)";
 
$screen_media_flex_list: (
    "md": $SCREEN_MD, // .w30-md
    "myphone": $SCREEN_MY_PHONE, // .w30-myphone
);

То есть Berry позволяет настроить любой подходящий вариант.

Классы цветов

Обычно css-фреймворк уже имеет свои наборы цветов, правда обычно они именуются как primary, secondary и т.п. В Berry принята другая схема, когда класс содержит название цвета. Например .t-red однозначно указывает на красный цвет. Как правило при верстке достаточно цветов самого фреймворка, поэтому по умолчанию в Berry классы цветов генерируются отдельным файлом (его можно использовать в lazy-загрузке). Это файл berry-colors.css.

Примеры всех доступных цветов вы может посмотреть на демо-странице.

Что касается самих цветов, то в Berry реализована поддержка цветов Material Design от Google. Цвет разбивается на градацию яркости от 50 до 900, где 500 совпадает с базовый цветом. Например .t-red500 это тоже самое, что .t-red. Классы цветов удобно использовать при прототипировании или с небольшими css-фреймворками, которые содержать очень ограниченный объем возможностей.

Переменные всех цветов находятся в файле variables/_all-colors.scss. Но классы цветов генерируются на основе переменных в файле variables/_colors.scss. То есть можно указать какие именно классы нужно сгенерировать (например когда не нужна яркостная градация).

Итоги

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

Скачать Berry