🍓 Berry CSS 3.0

Установка Berry CSS

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

  Скачать Berry CSS или GitHub

В комплекте 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>

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

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

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

Выборочное использование

Для удобства в Berry CSS есть sass-файлы для каждого модуля.

И файл berry.scss в котором происходит подключение этих модулей:

@import 'reset';
@import 'utilities';
@import 'colors-variables';
@import 'colors-generation';
@import 'typography';

Каждый файл модуля также состоит из подключаемых файлов. Например _typography.scss

@import 'typography/variables';
@import 'typography/root';
@import 'typography/base';
@import 'typography/blocks';
@import 'typography/details';
@import 'typography/images';
@import 'typography/lines';
@import 'typography/links';
@import 'typography/table';
@import 'typography/badge';
@import 'typography/icons';
@import 'typography/buttons';
@import 'typography/forms';
@import 'typography/drop-cap';
@import 'typography/animate';
@import 'typography/print';

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

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

Все переменные используют директиву !default, что позволяет настраивать Berry без необходимости редактирования его файлов.

// переопределяемые переменные
$layout_max_width: 1140px;

// подключение Berry
@import 'berry/berry';

// прочие подключения
@import 'template/...';

Для удобства, можно вынести свои переменные в отдельный файл, например в _my-variables.scss. Структура каталогов может быть такой:

assets/
    css/
        style.css <— его создаёт Sass
        
    sass/
        berry/
            colors/ ...
            resets/ ...
            typography/ ...
            utilities/ ...
            
            _berry.scss <- переименуйте «berry.scss»
        
        template/ 
            ...

        _my-variables.scss
        style.scss

Файл style.scss:

@import 'my-variables'; // переменные
@import 'berry/berry'; // подключение Berry

// прочие подключения
@import 'template/...';

Ранний доступ к переменным модуля Colors

Если в _my-variables.scss потребуется получить доступ к переменным из модуля Colors, которые также необходимо переопределить, то следует использовать раздельное подключение Berry.

// переопределяем переменные из Colors
$colorHS-primary: 4, 60%; // или @import 'my-colors';

// подключаем переменные berry colors
@import 'berry/colors-variables';

// подключаем остальные свои переменные где уже можно использовать berry colors
@import 'my-variables';

// berry остальное
@import 'berry/reset';
@import 'berry/utilities';
@import 'berry/colors-generation';
@import 'berry/typography';

// прочие подключения
@import 'template/...';

Такой способ подключения позволяет в файле _my-variables.scss получить все переменные цветов до того, как будут подключены остальные модули Berry.