Область блоков

Область блоков — это область на странице или панели, в которой информация визуально разделена по смыслу или содержанию на отдельные блоки.

<div class="controls-BlockLayout">
    <div class="controls-BlockLayout__blockGroup">
        <div class="controls-BlockLayout__block">BLOCK 1</div>
        <div class="controls-BlockLayout__block">BLOCK 2</div>
    </div>
    <div class="controls-BlockLayout__blockGroup">
        <div class="controls-BlockLayout__block">BLOCK 3</div>
    </div>
</div>

Для того чтобы организовать область блоков, есть три основных элемента – раскладка, группа и блок. Описание элементов происходит с помощью css-классов:

• controls-BlockLayout;
• controls-BlockLayout__blockGroup;
• controls-BlockLayout__block.

Классы controls-BlockLayout и controls-BlockGroup нужно использовать только в том случае, если блоки могут динамически менять свое расположение на странице. Класс controls-BlockLayout__block нужно использовать для каждого блока.

Раскладка блоков является контейнером для групп блоков. Раскладка блоков должна быть определена в любом случае, даже если она содержит только одну группу блоков.

Группа блоков объединяет блоки для позиционирования их друг относительно друга. Алгоритм позиционирования элементов задается программистом отдельно на контейнере группы. Выбор алгоритма позиционирования, влияет на структуру раскладки блоков и количество групп в ней.

Блоком является контейнер с рамками, в котором размещается пользовательский контент. Блоки всегда располагаются в группах.

Если блоки статичны, то для их позиционирования нужно использовать следующие классы:

• controls-BlockLayout__block_border-top;
• controls-BlockLayout__block_border-right;
• controls-BlockLayout__block_border-bottom;
• controls-BlockLayout__block_border-left.

Если при организации области блоков требуется Controls/scroll:Container, то структура меняется:

<Controls.scroll:Container attr:class="controls-BlockLayout">
   <div class="controls-BlockLayout__block"></div>
   <div class="controls-BlockLayout__block"></div>
   <div class="controls-BlockLayout__block"></div>
   ...
</Controls.scroll:Container>

Использование controls-BlockLayout__blockGroup не требуется.

Примеры позиционирования блоков

Алгоритм позиционирования блоков в группе задается прикладным разработчиком. Как правило необходимо указать пользовательские CSS-классы для позиционирования на элементы с классами controls-BlockLayout__block внутри контейнера с классом controls-BlockLayout__blockGroup.

В простейшем случае блоки располагаются вертикально друг относительно друга благодаря стандартной потоковой блочной верстке.

Для более сложных правил позиционирования необходимо пользоваться богатым набором возможностей CSS-раскладок Flexbox и Grid Layout.

Настройка внешнего вида раскладки

• .controls-BlockLayout_detached — добавляет верхнюю границу. Используется совместно с классом .controls-BlockLayout.

Настройка внешнего вида блоков

• .controls-BlockLayout__block_style_1 — добавляет блоку цвет фона #FFFFFF. Используется совместно с controls-BlockLayout__block.
• .controls-BlockLayout__block_style_2 — добавляет блоку цвет фона #F8F8F8. Используется совместно с .controls-BlockLayout__block.
• .controls-BlockLayout__block_style_3} — добавляет блоку цвет фона #FBF9F7. Используется совместно с .controls-BlockLayout__block.
• .controls-BlockLayout__block_style_4 — добавляет блоку цвет фона #F7F4F0. Используется совместно с controls-BlockLayout__block.
• .controls-BlockLayout__block_style_5 — добавляет блоку цвет фона #F0F5FB. Используется совместно с controls-BlockLayout__block.
• .controls-BlockLayout__block_style_6 — добавляет блоку цвет фона #F0F5FB. Используется совместно с controls-BlockLayout__block.
• .controls-BlockLayout_background — добавляет цвет фона раскладке. Цвет соответствует цвету границ между блоками.