Компоненты Berry CSS

Компоненты расширяют возможности фреймворка.

Важно! Следующая версия Berry CSS не будет содержать собственных js-компонентов. Старые компоненты можно будет продолжать использовать как и раньше (поскольку они независимы). Вместо этого предполагается ипользовать библиотеку Alpine.js, которая прекрасно работает вместе с Berry CSS.

Компоненты Berry являются автономными и должны придерживаться следующих правил.

Компоненты располагаются в components каждый в своём подкаталоге.
Стили компонента размещаются в scss-файле, а его скомпилированная версия в css-файле там же.
Если компонент содержит js-код, то он размещается в там же в отдельном файле.
Каждый компонент сопровождается readme-файлом с инструкцией по его использованию.
Компонент не должен иметь никаких внешних зависимостей. Sass-код не должен использовать внешие переменные. Js-код не должен иметь зависимостей от других js-файлов/библиотек/функций.
Имена файлов совпадают с названием каталога компонента.
Имена переменных/функций должны иметь префикс, совпадающий с каталогом компонента.

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

Например компонент modal1 реализует поддержку всплывающего окна.

components/
    modal1/
        modal1.js
        modal1.scss
        modal1.css
        readme.txt

Sass переменные имеют префикс modal1-

$modal1-bg: rgba(0, 0, 0, 0.4) !default;
$modal1-zindex: 100 !default;
$modal1-top: 30% !default;
$modal1-radius: 5px !default;

Подключение компонентов происходит индивидуально там, где они используются. То есть css-классы компонентов не включены в css-файл Berry CSS.

<link rel="stylesheet" href="assets/components/modal1/modal1.css">
<script src="assets/components/modal1/modal1.js"></script>

После этого размещается html-код, указанный в readme-файле.

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