Логотип Berry CSSBerry CSS 3.0

Настройка Berry через CSS-переменные

Berry CSS сконструирован таким образом, что его можно настраивать через CSS-переменные.

Многие css-классы фреймворка объявлены следующим образом:

.rounded {
    border-radius: var(--rounded-radius, 7px);
}

Таким образом, чтобы изменить поведение класса достаточно объявить переменную с нужным значением:

<style>
    :root {
        --rounded-radius: 10px;
    }
</style> 

Переменные в :root будут иметь глобальную область видимости и будут влиять на все блоки. Таким образом можно переопределить любые значение сразу для всего сайта.

Если нужно изменить переменную только для какого-то одного блока, то её следует именно там и разместить.

Значение по умолчанию
Изменённый вариант
<div class="bordered rounded">Значение по умолчанию</div>

<div style="--rounded-radius: 20px;">
    <div class="bordered rounded">Изменённый вариант</div>
</div>

или

<div class="bordered rounded" style="--rounded-radius: 20px;">Изменённый вариант</div>
Данный способ работы с css-переменными является предпочтительным, поскольку не создаёт конфликтов имён с разными переменными.

Другой вариант — объявление своего класса, содержащего переменные, которые следует изменить. После этого он указывается вторым классом.

<style>
    .my-rounded20 {
        --rounded-radius: 20px;
    }
    </style>

<div class="bordered rounded my-rounded20">Собственный класс</div>
Собственный класс

В целом следует отметить, что css-переменные утилитарных классов лучше менять в пределах используемого блока, поскольку их имена могут совпадать. А css-переменные цветов и типографики можно указывать глобально, поскольку их имена не пересекаются.

Настройка сайта через css-переменные, обычно начинается с настройки типографики, которая задаётся глобально. После этого там же настраиваются основные цвета.

<style>
    :root {
        --body-size-base: 17px;
        --body-color: #575748;
   
        --link-color: #D51558;
        --link-hover-color: #F33F7E;
   
        --blockquote-color: #0B6CAE;
        --blockquote-bor-l: 5px solid #D51558;
        
        --color1: #bf00ff;
        --color2: #006cd9;
        
        ... и т.д.
    }
</style>

После этого можно настроить прочие блоки и html-тэги.

Согласно стандарту HTML 5, блок стилей <STYLE> может располагаться не только в секции <HEAD>, но и в теле страницы в <BODY>, что позволяет менять css-переменные в любом месте HTML. Это актуально для случаев, когда нет возможности изменить css-файлы, например при редактировании страницы в админ-панели CMS.

Классы с суффиксом «-var»

Классы с суффиксом -var специально предназначены для использования через css-переменные. Они используются для того, чтобы обеспечить многообразие возможных вариантов дизайна и/или поведения класса.

Например класс gr-linear-var служит для создания линейного градиента. Поскольку вариантов градиентов слишком много, и если делать для всех отдельный класс, то это негативно скажется на размере css-кода. Поэтому лучше вынести изменяемые части в css-переменные.

<div class="pad20 mar10-tb gr-linear-var" style="--start: yellow; --end: red;"></div>
<div class="pad20 mar10-tb gr-linear-var" style="--start: blue; --end: green;"></div>
<div class="pad20 mar10-tb gr-linear-var" style="--start: gray; --end: navy;"></div>