Варианты модификации блоков

• Модификатором
• Контекстом
• Уровнем переопределения

Модификатором

Блоку/элементу добавляется модификатор и изменение блока/элемента описывается в коде этого модификатора.

Примеры

По умолчанию фон у попапа осутствует.

Добавление модификатора theme блоку b-popup добавляет ему фон.
theme=yellow добавляет фон желтого цвета:

theme=black добавляет фон черного цвета:

У блока может быть одновременно несколько модификаторов.

Примеры

Модификатор theme — отвечает за фон попапа. Модификатор direction — отвечает за направление отображения попапа.

theme=yellow и direction=left — попап желтого цвета открывается влево:

theme=yellow и direction=right — попап желтого цвета открывается вправо:

Модификатор блока может изменять структуру блока (например, добавлять/удалять элементы) или его реализацию.

Пример
Модификатор has-close=yes — добавляет элемент закрывающий крестик. Добавляет отступы блоку, освобождая место крестика.

Контекстом

Блок при размещении в другом блоке может менять свой внешний вид или поведение.

Пример
Цвет текста вложенного блока меняется с зелёного на красный, если он помещён в блок с синим фоном с красными буквами.

Примеры

Переключатель языков (b-lang-switcher)

Переключатель языков (b-lang-switcher) в подвале страницы (b-foot), уменьшается размер шрифта.

Уровнем переопределения

Изменения создаются на следующем уровне переопределения и добавляют или изменяют функциональность блока.

Пример
Блок может выглядеть на разных проектах по разному. При этом его общая часть лежит в одном файле (например, в репозитории фреймворка), а частная для проекта в другом (в репозитории проекта). Блок доопределяется дополнительными проектными файлами.

TODO: Сделать пример или ссылку на пример.