Переменные для дизайна (размерные)

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

1. Переменные для адаптивности

Такие переменные используются, чтобы согласовать изменение правил адаптивности между различными элементами. Например, вы делаете структуру контента, которая имеет три адаптивности: мобильная, планшетная, и компьютерная. Предположим, что они между собой (как минимум, мобильная), отличаются значительным образом. При этом вы также адаптируете и отдельные страницы, к которым применяется данная структура.

Таким образом, появляется необходимость согласованного перехода с планшетной на мобильную адаптивность сразу в нескольких элементах (структура и страница). Для того, чтобы вручную не менять границы интервалов везде, применяются переменные для интервалов адаптивности.

Названия таких перменных начинаются с adaptive_. Практически во всех шаблонах используется только один переход — с компьютерной на мобильную версию: size_adaptive_mobile, однако вы можете добавить границу для перехода между планшетной и компьютерной версией: size_adaptive_tablet.

Рисунок 2

2. Расстояние между элементами

Между всеми элементами на сайте есть расстояния: между блоками на странице, между кнопками в шапке. Даже отступы между элементами в хлебных крошках к ним относятся.

Для создания целостного дизайна следует придерживаться принципов в назначении размеров. Наиболее удобной является система, где расстояния кратны двум: 2 4 6 8 12 16.

Переменные расстояний глобально делятся на три категории:

1. size_block_gap_ — расстояние между крупными блоками (например, в сетке товаров или между блоками на странице). Как правило, они начинаются сразу с больших значений: 12 20 32 48 80 160
, поскольку для маленьких объектов используется следующая категория.
2. size_item_gap_ — используются для расстояний между маленькими объектами, например, между двумя надписями или между рядом стоящими кнопками.
3. size_block_padding_ — внутренние отступы для блоков.

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

Следует отметить, что переменные можно применять различным образом: расстояние между объектами можно сделать как через промежуток между элементами у flex-верстки, так и через внешний отступ у блока. Однако, рекомендуется внимательно относиться к тому, какой способ задания расстояния в верстке вы применяете, так вы обеспечите грамотные подход к созданию дизайна.

Рисунок 3

Для удобства, в готовых дизайнах по умолчанию сделано по 4–6 переменных для каждой категории:

• size_block_gap_x1
• size_block_gap_x2
• size_block_gap_x3
• size_block_gap_x4
• size_block_gap_x5
• size_block_gap_x6
• size_item_gap_x1
• size_item_gap_x2
• size_item_gap_x3
• size_item_gap_x4
• size_item_gap_x5
• size_item_gap_x6
• size_block_padding_x1
• size_block_padding_x2
• size_block_padding_x3
• size_block_padding_x4

3. Другие размерные переменные

Многие элементы, например, кнопки, имеют разные вариант: черные, цветные, белые и так далее, однако их геометрия (отступы и закругления) повторяются — меняется лишь внешний вид.

Чтобы упростить изменение дизайна, предусмотрены следующие переменные:

1. size_button_radius и size_block_radius — радиусы закругления всех кнопок и блоков.
2. size_button_padding_horizontal и size_button_padding_vertical — внутренние отступы у кнопок.
3. size_page_padding и size_page_padding_mobile — внутренние отступы страницы от краев экрана.
4. Также есть и другие переменные, например size_header_height имеет значение высоты шапки сайта, она может применяться для того, чтобы верно спозиционировать мегаменю сайта (ее значение надо выставлять вручную, замерив высоту шапки).

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

Рисунок 4