Релиз Berry CSS 5.0

Новая версия Berry CSS — это реализация моих новых идей. В первую очередь я ставил задачу сделать так, чтобы можно было управлять css-стилями через css-переменные.

Предыдущая 4-я версия фреймворка была направлена на настройку через Sass. Поскольку в Berry CSS используется модульная система с отдельными конфигурационными файлами, то для изменения стилей, достаточно просто поменять настройки в конфиг-файлах. После этого выполняется sass-компиляция и получается css-файл с нужными цветами, отступами, размерами и т.д.

Такой подход очень хорошо себя зарекомендовал и я его использовал в шаблоне MF (и Default) MaxSite CMS. Если кто не в курсе, то эти шаблоны могут менять свой цветовой дизайн. Например в MF предусмотрено 15 цветовых дизайнов.

Технически это отдельные компиляции Berry CSS. Если стоит задача сделать новый дизайн, то делается копия исходных sass-файлов, в конфигурации прописываются все изменения и после компиляции получается css-файл. Именно он и подключается при выборе в настройках шаблона MaxSite CMS.

Такой подход (с отдельной sass-компиляцией) является общепринятым.

Когда я стал делать Albireo CMS, то решил, что он не совсем оптимальный. Дело в том, что изменения как правило затрагивают только некоторые модули Berry CSS: в первую очередь это настройка цветов. Поэтому остальные классы в разных дизайнах одни и те же. В процессе я тестировал несколько разных подходов и в итоге остановился на том, что нужно использовать css-переменные, вместо фиксированных значений.

В Berry CSS 4, чтобы изменить цвет нужно было открыть sass-файл, внести новое значение цвета и при компиляции это значение автоматом расставится в многочисленные css-классы. Схематично это можно представить так:

# sass config
$red: #ff8030;

# sass file
.t-red {color: $red}
.bg-red {color: $red}

В Berry CSS используется другая схема, которая связывает sass-переменные с css-переменными. Опять же схематично это выглядит так:

# sass config
$red: #ff8030;

# sass root
:root {
    --red: $red;
}

# sass file
.t-red {color: var(--red)}
.bg-red {color: var(--red)}

Либо так:

# sass config
$red: #ff8030;

# sass file
.t-red {color: var(--red, $red)}
.bg-red {color: var(--red, $red)}

Такой подход позволяет вынести всё то, что требует изменения в css-переменные, но при этом, с помощью Sass формируется дефолтное состояние, что приравнивается к дефолтному дизайну (как текущий сайт).

Поэтому большая часть работ в Berry CSS 5.0 была связана именно с переделкой css-классов под css-переменные. Теперь, если стоит задача изменить дизайн, то достаточно переопределить только нужные css-переменные, вместо того, что создавать новую sass-компиляцию.

Профессиональные цвета RAL

Об этом я писал немного раньше. Теперь Berry CSS использует цвета RAL, что само по себе довольно круто. И опять, же если нужно переопределить любую палитру, то можно использовать css-переменные без sass-компиляции.

Структура каталогов. Theme-зация

Структуру Berry CSS я переделал под структуру шаблонов Albireo CMS, то есть сделал более логичной. С точки зрения шаблона файл berry.css — это файл «темы» (theme) — основной css-файл шаблона. Например, если использовать sass-компиляцию, то можно сделать файл red.css, который тоже будет theme-файлом, то есть определяющим дизайн шаблона. Эта схема похожа на подключение разных цветовых тем для шаблонов MaxSite CMS.

Поэтому, когда стоит задача создать новую тему, то нужно сделать копию исходных файлов Berry CSS и sass-файл, который скомпилируется в css-файл. Именно поэтому теперь berry.css размешается в каталоге themes/berry.

Изменения в CSS Grid

В предыдущей версии CSS Grid я использовал как экспериментальную возможность, потому что grid — очень гибкая система сеток, под которую пришлось бы сделать огромное количество css-классов. Поэтому моей идеей было то, чтобы использовать всего пару классов, а настройки вынести в css-переменные. В 4-й версии был некий «прототип», в новой же Berry CSS уже полноценная реализация.

Например 12-колоночная сетка задаётся даже проще чем flex. Потому что у flex-сетки нужно прописывать классы для каждой ячейки, а у grid-сетки достаточно указать класс у контейнера.

Изменения по именованию css-переменных

В 4-й версии Berry CSS был некий разнобой в именовании css-переменных, потому что я ещё толком с ними не определился. В 5-й версии все эти имена уже «причёсаны», причём так, чтобы они совпадали (насколько это возможно) с sass-переменными. Это сильно упрощает понимание фреймворка вебмастерами.

Изменения по css-классам

Практически все имена css-классов остались без изменений, поэтому переход на новую версию должен быть безболезненным. Ну кроме тех случаев, когда используются css-переменные (они могут иметь другие имена).

Естественно были добавлены новые модули и классы.

Довольно сильно изменился подход к формированию классов кнопок. Раньше это было два класса, но сами классы не отражали дизайн. Теперь основной класс это .button, которой формирует кнопку с дизайном primary. Для того, чтобы сменить дизайн добавляется второй класс, например .button-red, который поменяет цвет на палитру red. Таким образом теперь кнопки 100% соответствуют всем палитрам Berry CSS.

Изменения по Material Design

Основное изменение — это отсутствие палитры tertiary. Я ориентируюсь на свой опыт и понял, что primary и secondary более чем достаточно, а если нужен акцент, то проще использовать готовую цветовую палитру, чем подбирать её отдельно.

Опять же, если вы делаете сайты как Material Design, то можно в любой момент поменять цвета без sass-компиляции. На сайте Berry CSS есть примеры как это просто сделать.

Berry CSS как основа Albireo CMS

В процессе работы с Albireo CMS я понял, что можно сделать Berry CSS так, чтобы не добавлять ни одного дополнительного css-класса. Если вы посмотрите на sass-файлы Default-шаблона MaxSite CMS, то увидите, что есть особый модуль mf, в котором располагаются классы, специфичные для системы. Например для type_foreach-файлов, поиска, менюшек, форм и т.п. Я захотел изменить такой подход, потому что концепции Atomic CSS подразумевает, что при вёрстке не нужно создавать специфичные классы для разных html-блоков.

Это новый подход, который противоречит большинству старых css-фреймворков, но полностью соответствует новым css-фреймворкам вроде Tailwind CSS. Но в том же Tailwind CSS используется более сложный подход, который заключается в том, чтобы охватить максимум возможностей CSS. Именно поэтому в Tailwind CSS есть огромное количество css-классов, которые подходят под любую задачу. Цена за такой подход — огромный размер фреймворка: в Tailwind CSS итоговый файл весит примерно 3Мб, что соответствует примерно 300Кб трафика. Очевидно, что это очень много.

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

То есть Berry CSS имеет очень скромный размер примерно 170Кб, что соответствует примерно 25Кб трафика. Конечно Berry CSS не охватывает весь CSS, но полностью охватывает верстку шаблона. Там, где возможностей Berry CSS недостаточно, можно использовать либо css-переменные, либо сделать вставку своих css-классов или css-style.

Изменение по сайту Berry CSS

Сайт Berry CSS я полностью переписал на Albireo CMS, причём это именно отдельный сайт (например сайт Albireo CMS — это часть сайта maxsite.org).

Сайт я решил ориентировать именно на вебмастеров, поэтому там теперь полная документация по всем классам, sass/css-переменным. Идея в том, что верстальщику проще иногда посмотреть код класса, чем тыкаться в расплывчатых примерах. Естественно на сайте не полный код, а несколько упрощённый, но который позволяет полностью понять его поведение.

Планы

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

Слава Украине! Смерть рашистам!