Переменные
⚠️ Мы решили не выпускать переменные размеров, так как в панели переменных отсутствует функция точек остановки (брейкпоинтов).
Когда Webflow добавит точки остановки, мы вернемся к панели переменных. На данный момент мы начинаем с явного преимущества переменных — Цветов.
Каковы преимущества использования цветовых переменных на вашем сайте?
Согласованность во всем проекте
Цветовые переменные помогают унифицировать цвета в рамках всего проекта. Определяя цвет один раз и используя его в нескольких местах, мы поддерживаем единообразный внешний вид, что крайне важно для идентичности бренда и пользовательского опыта.
Когда нам нужно выбрать цвет, цветовые переменные предоставляют нам список доступных вариантов на выбор.
Простота обслуживания
Если нам нужно изменить цвет, нам достаточно обновить его в одном месте — в панели переменных. Обновление цветовой переменной изменит этот цвет во всем проекте. Это делает обслуживание и обновления гораздо более простыми. Это также сокращает количество ошибок.
В случае, если нам нужно обновить цвет бренда во всем проекте, это можно быстро сделать, изменив значение базовых значений цветов:
Используя переменные, мы также можем быстро и одновременно обновлять цвета в различных пользовательских компонентах и служебных классах:
Создание тем*
*Это отправная точка для будущих обновлений переменных Webflow.
Использование цветовых переменных упростит создание различных тем, включая темный/светлый режимы, когда Webflow добавит режимы (modes). Изменяя набор цветовых переменных, мы сможем легко переключаться между темами, что позволит создавать более динамичные и настраиваемые дизайны.
Улучшение читаемости и организация
Использование цветовых переменных делает наш проект в Webflow более читаемым и организованным. Намного проще понять и запомнить цветовую переменную, такую как --primary-color, чем помнить конкретные коды цветов, такие как #FF5733.
Контекст использования
Организованные смысловые значения помогают нам понять, какой цвет использовать в процессе сборки. Название переменных дает нам много информации о том, как они используются в проекте.
Если нам нужно добавить цвет текста к заголовку, мы можем быстро найти цвета текста проекта в разделе переменных «Text Color» (Цвет текста).
Базовые значения (Primitive tokens)
Базовые значения, представленные основными цветами, являются фундаментальными строительными блоками цветовой палитры дизайн-системы. Эти переменные отражают самый базовый уровень цветовых значений. Они служат основой для более сложных и специфических дизайнерских решений.
Они идентифицируются префиксом - Base Color (Базовый цвет):
Как использовать базовые значения
С практической точки зрения на их основе создаются переменные с осмысленными названиями, которые используются в проекте.
⚠️ Избегайте прямой привязки базовых цветов к классам, если для этого нет веской причины.
Связывать стиль напрямую с базовым значением цвета рекомендуется только в том случае, если вы не планируете использовать это базовое значение цвета где-либо еще.
Как группировать базовые значения
В стартовом проекте Client-First мы начинаем со следующих групп для базовых значений:
- Цвета бренда (Brand colors)
- Нейтральные цвета (Neutral colors)
- Системные цвета (System colors)
Каждый проект индивидуален. Client-First предлагает гибкость в группировке, позволяя вам переименовывать и перегруппировывать переменные в зависимости от проекта. В примере ниже приведены дополнительные варианты того, как можно группировать базовые значения.
Как именовать базовые значения
То, как дизайнеры или компании называют базовые значения, может существенно различаться. Мы решили начать наше руководство по стилю с названий цветов, сопровождаемых небольшим количеством оттенков, как показано ниже:
Если это не подходит для вашего проекта, вот несколько дополнительных примеров того, как вы можете называть свои базовые значения:
Смысловые названия (Semantic tokens)
Смысловые переменные - это переменные, названия которых описывают назначение или роль цвета в дизайне, а не сам цвет. По имени смысловой переменной можно сразу понять, для чего она используется.
В Client-First все переменные, которые не содержат префикс - Base Color, относятся к смысловым.
Как использовать смысловые переменные
Смысловые переменные - это цветовые переменные, которые мы используем для стилизации элементов сайта в соответствии с их назначением.
В примерах ниже показаны конкретные случаи, в которых стоит использовать такие переменные.
Для цвета фона используйте смысловые переменные Background Color:
Для цвета текста используйте смысловые переменные Text Color:
Для цвета границ используйте смысловые переменные Border Color:
Использование смысловых переменных в качестве служебных классов
Каждая смысловая переменная, созданная в проекте, при необходимости может использоваться как служебный класс. Такой подход позволяет быстро вносить изменения в отдельные элементы. В руководстве по стилю мы начинаем со следующих служебных классов, связанных со смысловыми переменными:
- background-color-primary привязан к var(background-color--background-primary
- background-color-secondary привязан к var(background-color--background-secondary
- background-color-tertiary привязан к var(background-color--background-tertiary
- background-color-alternate привязан к var(background-color--background-alternate
- text-color-primary привязан к var(text-color--text-primary
- text-color-secondary привязан к var(text-color--text-secondary
- text-color-alternate привязан к var(text-color--text-alternate
По возможности избегайте привязки базового тега текстового элемента напрямую к смысловой переменной
Когда мы применяем цвет напрямую к текстовому элементу (на уровне тега), мы теряем возможность наследовать цвет от родительского элемента. Использование наследования — очень распространенный прием, когда разработчики хотят быстро изменить цвет всех дочерних элементов одновременно.
Если нам необходимо применить смысловую переменную к текстовому элементу, в Client-First используется служебный класс inherit-color, чтобы переопределить стиль и наследовать его от родительского элемента. См. пример ниже:
Как называть смысловые переменные
Мы предлагаем называть смысловые переменные, используя следующее соглашение об именовании:
[элемент] - [стиль] - [идентификатор]
- background - color - dark
- text - color - primary
- border - color - brand
Вопросы, которые стоит задать себе при именовании смысловых переменных
- Элемент: К чему это добавляется?
- Стиль: Какое значение или стиль изменяется?
- Идентификатор: Какой идентификатор у этой переменной?
Ниже вы можете увидеть примеры смысловых переменных, которые можно использовать в вашем проекте:
Как и в случае с базовыми значениями, дизайнеры и компании используют разные подходы к именованию. Выбирайте те названия и соглашения, которые наиболее понятны для проекта.
Не называйте смысловую переменную названием цвета
Если мы назовем переменную просто по её цвету, любое изменение цветовых схем или тем потребует переименования самой переменной. Это противоречит цели смысловых переменных, которая заключается в том, чтобы абстрагировать дизайн от конкретных значений цвета. Это позволяет нам управлять темами и глобальными изменениями без переименования переменных.
Соглашение об именовании важно для создании тем в будущем
Названия переменных должны быть достаточно общими, чтобы соответствовать различным значениям для тем, таких как светлая или темная тема. В примере ниже показано, как это должно выглядеть:
Если название цвета включено в переменную, соглашение об именовании будет несовместимо с другими названиями цветов, используемыми в разных режимах:
Концепция основного и альтернативного
При именовании переменных рассмотрите возможность установки «темы» вашего сайта по умолчанию в качестве отправной точки.
Например, если переменная background primary представляет черный цвет black, вы можете использовать background alternate для представления белого цвета white — инверсии черного black.
Этот подход также можно применить к переменным Text Color. Например, text primary может представлять белый цвет white, в то время как text alternate может представлять черный цвет black, обеспечивая четкий контраст для использования на белом фоне.
FAQ
Безусловно. Если у вашего клиента есть устоявшееся руководство по стилю, лучше всего придерживаться их системы цветов и соглашений об именовании. Это обеспечивает согласованность и соответствует их установленным стандартам брендинга.
Это, скорее всего, будет случаться часто. Некоторые дизайнеры или клиенты могут плохо структурировать свои цвета, и нашей задачей становится организовать их для создания более упорядоченного проекта. Чтобы понять, как это сделать, изучите разделы «Как называть базовые значения» и «Как называть смысловые переменные» выше.
Это не рекомендуется. Если вы назовете переменную просто по её цвету, любое изменение цветовых схем или тем потребует переименования самой переменной. Вся суть смысловых переменных заключается в том, чтобы сохранять гибкость и простоту обновлений. Поэтому лучше выбирать названия, которые описывают роль переменной, а не только её цвет.
Базовые значения (Primitive tokens) идентифицируются префиксом - Base Color.
Вы можете создавать служебные классы, привязанные к цветовым переменным. Для этого всегда используйте смысловые переменные, чтобы поддерживать согласованность, и обязательно используйте четкие соглашения об именовании, которые ясно описывают назначение каждого цвета.