Berry CSS — фреймворк на основе утилитарных классов

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

Berry CSS придерживается концепции Atomic CSS — это архитектура CSS, которая отдает предпочтение небольшим одноцелевым классам с именами, основанными на их функциональном назначении.

Berry CSS можно использовать с любыми другими css-фреймворками — этот подход называется utility-first, когда для создания индивидуального дизайна используются утилитарные классы, без необходимости переписывания css-кода основного фреймворка. При этом стоит отметить, что возможностей Berry CSS вполне достаточно и для самостоятельного использования без сторонних css-фреймворов (см. раздел «Примеры» и «Блоки»).

Использование Berry CSS

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

С помощью Sass можно добавить или изменить основные настройки фреймворка, например отступы, размеры адаптивности и т.д.

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

Berry Builder

Для настройки и проверки работы Berry, вы можете воспользоваться Builder, где в on-line режиме редактировать html-код блоков и css-классы под свою задачу.

Структура фреймворка

Berry CSS состоит из модулей:

• resets — сбросы normalize и border-box
• utilities — утилитарные классы
• colors — цвета
• typography — типографика
• design — кнопки и формы

Каждый из этих модулей состоит из отдельных файлов. При необходимости можно указать какие из них нужно использовать в конфигурации.

Настойки Berry CSS

Berry CSS имеет модульную структуру, где нет необходимости редактировать исходные sass-файлы. Настройки каждого модуля вынесены в отдельные конфигурационные файлы в каталоге config.

Модуль «resets»

Данный модуль состоит из сброса normalize.css и box-sizing: border-box, которые обеспечивают корректное отображение html-страниц в любом современном браузере.

Модуль «utilities»

Утилитарные классы позволяют создавать html-страницы на «атомарном» уровне — прописывая необходимое поведение блоков для каждого свойства. Особенностью Berry CSS является то, что он автоматически генерирует большую часть классов на основе sass-переменных, что позволяет создавать только те классы, которые будут реально востребованы.

Все модули и файлы Berry CSS автономны, то есть вы можете использовать только те из них, которые будут востребованы в вашем проекте.

Модуль «colors»

Berry CSS использует цветовую модель от Google Material Design, где каждый цвет задаётся в виде ступени от 50 до 950. Цвета настраиваются через sass-переменные, где можно указать произвольные их комбинации: от собственных фиксированных до только указанных оттенков. В состав Berry включены 14 цветовых палитр, в каждой из которых по 19 оттенков. Кроме этого 7 фиксированных оттенков (плюс black и white), а также 3 палитры Material Design: primary, secondary и tertiary.

Модуль «typography»

Типографика применяется уже к обычным html-тэгам: BODY, P, H1..6, A и т.д.

Модуль «design»

Данный модуль состоит из файлов, которые обычно менятся под конкретный дизайн сайта. В часности это кнопки и элементы форм.

Модуль «demo»

Этот модуль создан для демонстрации того, как можно расширять Berry CSS своими модулями. Используйте demo в качестве основы для своего модуля и интеграции своего проекта в Berry CSS.

Компоненты

Предыдущая версия Berry CSS содержала несколько компонентов, которые использовали JavaScript. Вы можете их продолжать использовать, поскольку они полностью автономные. В новых версиях не будет компонентов: вместо них рекомендуется использовать Alpine.js, которая прекрасно работает в связке с Berry CSS.