База знаний Smink

Практическое использование переменных

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

Подробнее о том, как управлять переменными, написано в статье:

Переменные в шаблонах делятся на две основные категории: информационные и используемые дли дизайна. Позже мы рассмотрим оба типа.

Названия переменных

Называть переменные рекомендуется в стиле «snake_case», например: название_этой_переменной.

В начале названия следует использовать наиболее обощающие слова, а затем уточнять их, так получится более целостная структура. Например, есть много переменных, относящихся к размерам, в их начале нужно использовать size_, затем — к чему относится переменная, например, к блокам — добавляем block_, если это расстояние между блоками, то добавляем gap_, и если таких расстояний между блоками несколько, то получится: size_block_gap_x1.

Если существует переменная, которая меняет свое значение, например, на мобильной адаптивности, ее следует называть с окончанием _mobile. Они меняются автоматически, вам следует поменять их вручную.

Практический пример. Если на сайте нужен второй номер телефона, помимо существующего data_phone можно добавить data_phone_2. Если вы знаете точное предназначение этого номера телефона, например, для службы поддержки, его можно название data_phone_support.

Информационные переменные

Информационные переменные содержат данные, которые выводятся на сайт напрямую, например номер телефона или текст об использовании авторских прав. В основном, они начинаются на следующие ключевые слова:

  1. data_ — элемент информации на сайте, например, название компании data_company_name или адрес data_address.
  2. text_ — имеет схожий с data_ смысл, однако отличается тем, что содержит более длинные осмысленные тексты, а не информацию, связанную с сайтом.
  3. link_ — для ссылок на сторонние сайты, например, для социальных сетей link_telegram или link_vk.
  4. code_ — для специальных кодов, например, для встраивания iframe карты местности.

Практический пример (рисунок 1). При использовании переменной номера телефона, ее можно написать в ссылку в конструкции tel:.Похожая конструкция есть и для электронной почты: mailto:.

image_12721

Рисунок 1

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

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

image_10429

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

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

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

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

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

image_12733

Рисунок 2

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

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

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

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

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

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

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

image_12741

Рисунок 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 по аналогии с переменными расстояний.

image_12751

Рисунок 4

Smink

Российский IT разработчик

Для государственных органов

По вопросам платформы

Этот сайт сделан через конструктор Smink

Этот сайт использует файлы cookie. Продолжая использовать наш сайт, вы принимаете условия соглашения в отношении использования персональных данных

Общество с ограниченной ответственностью «Сминк», ИНН 7751221937