Логотип Berry CSSBerry CSS 3.0

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

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

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

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

Например компонент 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.