Установка Berry CSS

Berry CSS написан на Sass, чтобы обеспечить возможность его настройки. Рекомендуется использовать Dart Sass (описание).

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

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Sample page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="assets/css/berry.css">
</head>
<body>

... html код ...

</body>
</html>

Вы также можете использовать удалённый CDN:

https://cdn.jsdelivr.net/gh/maxsite/berry/dist/berry.css (минифицированный css-файл)
https://cdn.jsdelivr.net/gh/maxsite/berry/dist/berry.format.css (несжатый css-файл)

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

При использовании SASS, достаточно скачать файлы Berry CSS и разместить их в каталоге своего проекта (например sass). Для компиляции используется командная строка:

sass --watch sass:css --style=compressed

Результат будет помещён в каталог css.

Устройство Berry CSS

Berry CSS имеет модульную структуру, где каждый модуль размещается в своём подкаталоге в modules. Каждый модуль содержит файл _index.scss (это требование Sass) в котором подключаются все его scss-файлы (через директиву @use).

Файл модуля _default.scss содержит переменные, отмеченные директивой !default. Изменять эти файлы не требуется, поскольку все настройки модуля вынесены в отдельный файл.

Все конфигурационные файлы, которые можно редактировать, располагаются в каталоге config. Например модуль типографики использует файл _typography.scss.

@use '../modules/typography/default' with (
	... переменные, которые нужно переопределить
);

Здесь используется директива @use with, с помощью которой можно переопределить любую переменную, заданную в файле модуля _default.scss.

Использование @use/@forward является обязательным требованием Sass, поскольку директива @import объявлена устаревшей и будет удалена из будущих версий Sass.

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

Обновление Berry CSS (sass-файлы)

Для обновления фреймворка, если используется Sass, достаточно загрузить файлы каталога modules. Файлы конфигурации меняются редко, поэтому их можно не обновлять.

Использование Berry CSS в своём проекте

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

Для включения своего модуля, необходимо только добавить его подключение в корневой файл berry.scss

@use 'modules/copyright';
@use 'modules/reset';
@use 'modules/utilities';
@use 'modules/typography';
@use 'modules/colors';

@use 'modules/my-site'; // свой модуль