База знаний Smink
Практическое использование переменных
База знаний Smink
Практическое использование переменных
Переменные используются для того, чтобы создать наибольшую унификацию при редактировании сайта. Поскольку некоторые данные (например, номер телефона) повторяются на многих страницах сайта, очевидно, удобно сделать так, чтобы при редактировании переменной в одном месте, она изменялась везде.
Подробнее о том, как управлять переменными, написано в статье:
Переменные в шаблонах делятся на две основные категории: информационные и используемые дли дизайна. Позже мы рассмотрим оба типа.
Называть переменные рекомендуется в стиле «snake_case», например: название_этой_переменной
.
В начале названия следует использовать наиболее обощающие слова, а затем уточнять их, так получится более целостная структура. Например, есть много переменных, относящихся к размерам, в их начале нужно использовать size_
, затем — к чему относится переменная, например, к блокам — добавляем block_
, если это расстояние между блоками, то добавляем gap_
, и если таких расстояний между блоками несколько, то получится: size_block_gap_x1
.
Если существует переменная, которая меняет свое значение, например, на мобильной адаптивности, ее следует называть с окончанием _mobile
. Они меняются автоматически, вам следует поменять их вручную.
Практический пример. Если на сайте нужен второй номер телефона, помимо существующего data_phone
можно добавить data_phone_2
. Если вы знаете точное предназначение этого номера телефона, например, для службы поддержки, его можно название data_phone_support
.
Информационные переменные содержат данные, которые выводятся на сайт напрямую, например номер телефона или текст об использовании авторских прав. В основном, они начинаются на следующие ключевые слова:
data_
— элемент информации на сайте, например, название компании data_company_name
или адрес data_address
.text_
— имеет схожий с data_ смысл, однако отличается тем, что содержит более длинные осмысленные тексты, а не информацию, связанную с сайтом.link_
— для ссылок на сторонние сайты, например, для социальных сетей link_telegram
или link_vk
.code_
— для специальных кодов, например, для встраивания iframe карты местности.Практический пример (рисунок 1). При использовании переменной номера телефона, ее можно написать в ссылку в конструкции tel:
.Похожая конструкция есть и для электронной почты: mailto:
.
Рисунок 1
Размерные переменные начинаются на size_
, далее рассмотрим более детально каждый тип.
Мы настоятельно рекомендуем использовать переменные согласно их смысловому назначению, даже если их значения совпадают. Это поможет создать универсальный дизайн, который можно будет легко изменить, не испортив целостность дизайна
Такие переменные используются, чтобы согласовать изменение правил адаптивности между различными элементами. Например, вы делаете структуру контента, которая имеет три адаптивности: мобильная, планшетная, и компьютерная. Предположим, что они между собой (как минимум, мобильная), отличаются значительным образом. При этом вы также адаптируете и отдельные страницы, к которым применяется данная структура.
Таким образом, появляется необходимость согласованного перехода с планшетной на мобильную адаптивность сразу в нескольких элементах (структура и страница). Для того, чтобы вручную не менять границы интервалов везде, применяются переменные для интервалов адаптивности.
Названия таких перменных начинаются с adaptive_
. Практически во всех шаблонах используется только один переход — с компьютерной на мобильную версию: size_adaptive_mobile
, однако вы можете добавить границу для перехода между планшетной и компьютерной версией: size_adaptive_tablet
.
Рисунок 2
Между всеми элементами на сайте есть расстояния: между блоками на странице, между кнопками в шапке. Даже отступы между элементами в хлебных крошках к ним относятся.
Для создания целостного дизайна следует придерживаться принципов в назначении размеров. Наиболее удобной является система, где расстояния кратны двум: 2 4 6 8 12 16.
Переменные расстояний глобально делятся на три категории:
size_block_gap_
— расстояние между крупными блоками (например, в сетке товаров или между блоками на странице). Как правило, они начинаются сразу с больших значений: 12 20 32 48 80 160size_item_gap_
— используются для расстояний между маленькими объектами, например, между двумя надписями или между рядом стоящими кнопками.size_block_padding_
— внутренние отступы для блоков.Разделение на такие категории позволяет разнообразно модифицировать уже созданный дизайн, при этом сохранит индивидуальность для различных элементов — согласитесь, было бы странно, если при изменении внутренних отступов у блоков, так же менялись и расстояния между ними.
Следует отметить, что переменные можно применять различным образом: расстояние между объектами можно сделать как через промежуток между элементами у flex-верстки, так и через внешний отступ у блока. Однако, рекомендуется внимательно относиться к тому, какой способ задания расстояния в верстке вы применяете, так вы обеспечите грамотные подход к созданию дизайна.
Рисунок 3
Для удобства, в готовых дизайнах по умолчанию сделано по 4–6 переменных для каждой категории:
Многие элементы, например, кнопки, имеют разные вариант: черные, цветные, белые и так далее, однако их геометрия (отступы и закругления) повторяются — меняется лишь внешний вид.
Чтобы упростить изменение дизайна, предусмотрены следующие переменные:
size_button_radius
и size_block_radius
— радиусы закругления всех кнопок и блоков.size_button_padding_horizontal
и size_button_padding_vertical
— внутренние отступы у кнопок.size_page_padding
и size_page_padding_mobile
— внутренние отступы страницы от краев экрана.size_header_height
имеет значение высоты шапки сайта, она может применяться для того, чтобы верно спозиционировать мегаменю сайта (ее значение надо выставлять вручную, замерив высоту шапки).Если на сайте нужны кнопки с разными внутренними отступами, вы можете добавить переменную, например size_button_padding_horizontal_x2
по аналогии с переменными расстояний.
Рисунок 4
Smink
Аккредитованная IT-компания
Для государственных органов
По вопросам платформы
Этот сайт сделан через конструктор Smink
Платформа
Полезная информация
Сотрудничество
Компания
Этот сайт использует файлы cookie. Продолжая использовать наш сайт, вы принимаете условия соглашения в отношении использования персональных данных
Общество с ограниченной ответственностью «Сминк», ИНН 7751221937