Системы служебных классов

Введение

Официальный стартовый проект Client-First включает служебные классы и стили, которые помогут начать любой проект в Webflow.

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

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

Некоторые классы предназначены для оптимизации рабочего процесса. Например, класс, который задает display: none.

Важно знать, что служебные классы, входящие в Client-First, не являются обязательными. Если проект требует от нас иной организации отступов или нам надо создать уникальную структуру страницы, мы можем это сделать. Однако мы выяснили, что большинство проектов очень хорошо работают со служебными классами в Client-First.

Самые важные системы служебных классов

С Client-First поставляются три основные глобальные системы служебных классов — основная структура, типографика и отступы.

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

Глобальный горизонтальный отступ

Глобальный горизонтальный отступ управляет левыми и правыми внутренними отступами содержимого страницы.

• padding-global

Размер контейнера

Глобальные значения максимальной ширины max-width для контейнеров контента.

• container-large
• container-medium
• container-small

Узнайте больше об Основной структуре в Стратегии Основной структуры.

Внутренний отступ секции

Внутренний отступ секции управляет глобальной системой вертикальных отступов для секций.

• padding-section-small
• padding-section-medium
• padding-section-large

Типографика

Client-First включает в себя глобальную систему служебных классов для типографики – размеров заголовков и текстов, их цветов и настроек.

HTML теги

Мы всегда используем HTML тег, чтобы определить стили заголовков по умолчанию.

• body
• H1
• H2
• H3
• H4
• H5
• H6

Стилизация заголовков

Изменение стилей заголовков по умолчанию.

Используйте класс с префиксом heading-style- на H1, H2, H3 или на любом другом текстовом элементе, чтобы изменить стилизацию текста на стиль заголовка H. Например, если у нас есть H2, который должен выглядеть как H3, мы можем использовать тег H2 для соответствия требованиям SEO и применить к нему heading-style-h3.

• heading-style-h1
• heading-style-h2
• heading-style-h3
• heading-style-h4
• heading-style-h5
• heading-style-h6

Размер текста

Используйте класс с префиксом text-size- на текстовом элементе, чтобы изменить размер текста.

• text-size-large
• text-size-medium
• text-size-regular
• text-size-small
• text-size-tiny

Стиль текста

Используйте класс с префиксом text-style- на текстовом элементе, чтобы изменить стиль текста.

• text-style-allcaps
• text-style-italic
• text-style-link
• text-style-muted
• text-style-nowrap
• text-style-quote
• text-style-strikethrough
• text-style-2lines
• text-style-3lines

Насыщенность текста

Используйте класс с префиксом text-weight- на текстовом элементе, чтобы изменить насыщенность текста.

• text-weight-xbold
• text-weight-bold
• text-weight-semibold
• text-weight-normal
• text-weight-light

Выравнивание текста

Используйте класс с префиксом text-align- на текстовом элементе, чтобы изменить выравнивание текста.

• text-align-left
• text-align-center
• text-align-right

Цвет текста

Используйте класс с префиксом text-color- на текстовом элементе, чтобы изменить цвет текста.

• text-color-primary
• text-color-secondary
• text-color-alternate

Кнопки

Используйте класс с префиксом button-, чтобы применить стиль кнопки.

• button
• button is-secondary
• button is-text

Узнайте больше о типографике в Стратегии типографики.

Отступы

Система отступов определяет глобальные вертикальные и горизонтальные внешние отступы на нашем веб-сайте.

Чтобы узнать больше о классах внешних и внутренних отступов, ознакомьтесь со страницей Стратегия отступов.

Направление внешнего отступа (Margin direction)

• margin-top
• margin-bottom
• margin-left
• margin-right
• margin-horizontal
• margin-vertical

Размер внешнего отступа (Margin size)

• margin-0 0rem
• margin-tiny 0.125rem
• margin-xxsmall 0.25rem
• margin-xsmall 0.5rem
• margin-small 1rem
• margin-medium 2rem
• margin-large 3rem
• margin-xlarge 4rem
• margin-xxlarge 5rem
• margin-huge 6rem
• margin-xhuge 8rem
• margin-custom1 1.5rem
• margin-custom2 2.5rem
• margin-custom3 3.5rem

Направление внутреннего отступа (Padding direction)

• padding-top
• padding-bottom
• padding-left
• padding-right
• padding-horizontal
• padding-vertical

Размер внутреннего отступа (Padding size)

• padding-0 0rem
• padding-tiny 0.125rem
• padding-xxsmall 0.25rem
• padding-xsmall 0.5rem
• padding-small 1rem
• padding-medium 2rem
• padding-large 3rem
• padding-xlarge 4rem
• padding-xxlarge 5rem
• padding-huge 6rem
• padding-xhuge 8rem
• padding-custom1 1.5rem
• padding-custom2 2.5rem
• padding-custom3 3.5rem

Удаление всех отступов

Устанавливает все margin и padding равными 0. Полезно для удаления системных отступов компонентов Webflow.

• spacing-clean

Узнайте больше об отступах в Стратегии отступов.

Полезные системы служебных классов

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

Скрытие элементов на разных разрешениях

Показывает и скрывает элементы в зависимости от размера экрана.

• hide - скрыть на всех устройствах
• hide-tablet - скрыть, начиная с разрешения планшета
• hide-mobile-landscape - скрыть, начиная с разрешения мобильного устройства в альбомной ориентации
• hide-mobile-portrait - скрыть, начиная с разрешения мобильного устройства в портретной ориентации

Отображение в виде строчного блока flex

Применяет CSS-свойство display: inline-flex, которое не поддерживается в Webflow.

• display-inlineflex - устанавливает display: inline-flex на основном рабочем разрешении.

Максимальная ширина

Добавьте max-width к любому элементу на странице.

Используйте классы container- для ограничения максимальной ширины контента. Используйте классы max-width- для ограничения максимальной ширины контента, расположенного внутри container-.

• max-width-xxlarge 80rem
• max-width-xlarge 64rem
• max-width-large 48rem
• max-width-medium 32rem
• max-width-small 20rem
• max-width-xsmall 16rem
• max-width-xxsmall 12rem

Максимальная ширина без ограничений

Устанавливает max-width: none.

• max-width-full - устанавливает max-width в none
• max-width-full-tablet - устанавливает max-width в none на планшете
• max-width-full-mobile-landscape - устанавливает max-width в none в мобильной альбомной ориентации
• max-width-full-mobile-portrait - устанавливает max-width в none в мобильной портретной ориентации

Размеры иконок

Устанавливает высоту или высоту и ширину иконок. Icon 1x1 устанавливает значения как ширины, так и высоты. Полезно для иконок соцсетей, логотипов компаний, содержимого футера и т.д.

• icon-height-small
• icon-height-medium
• icon-height-large
• icon-1x1-small
• icon-1x1-medium
• icon-1x1-large

Цвета фона

Цвета фона помогают применять повторяющееся CSS-свойство background-color к элементам нашего проекта.

• background-color-primary
• background-color-secondary
• background-color-tertiary
• background-color-alternate

Полезные классы для верстки

Подходит для опытных разработчиков. Использование не обязательно.

• z-index-1 - устанавливает z-index: 1
• z-index-2 - устанавливает z-index: 2
• align-center - устанавливает margin-left и margin-right на auto, центрирует элемент внутри родительского div.
• layer - устанавливает position: absolute с 0% со всех сторон. Добавьте этот класс к div, чтобы он занимал весь размер родительского элемента. Убедитесь, что у родительского div стоит position, отличный от static.
• pointer-events-none - устанавливает pointer-events: none, что предотвращает все взаимодействия с элементом при нажатии и наведении.
• pointer-events-auto - устанавливает pointer-events: auto, что включает все взаимодействия с элементом при нажатии и наведении.
• overflow-hidden - устанавливает overflow: hidden
• overflow-scroll - устанавливает overflow: scroll
• overflow-auto - устанавливает overflow: auto
• aspect-ratio-square - устанавливает aspect-ratio: 1 / 1
• aspect-ratio-portrait - устанавливает aspect-ratio: 2 / 3
• aspect-ratio-landscape - устанавливает aspect-ratio: 3 / 2
• aspect-ratio-widescreen - устанавливает aspect-ratio: 16 / 9

Встраиваемый код

Client-First поставляется с блоком встраиваемого кода, содержащего наши глобальные пользовательские стили CSS для всего сайта. Этот встраиваемый код должен быть добавлен на каждую страницу проекта.

Пользовательские стили CSS лучше всего встраивать через embed, а не через настройки страницы или сайта.

Стили добавляются через embed, чтобы мы могли видеть изменения CSS внутри Designer

Возможность видеть влияние глобальных пользовательских стилей непосредственно в Designer - основная причина, почему мы рекомендуем использовать embed вместо настроек сайта.

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

Когда стили CSS находятся в embed внутри Designer, мы можем видеть эти стили визуально, когда мы работаем внутри Designer. В большинстве случаев предпочтительно видеть пользовательские стили CSS непосредственно внутри Designer.

Обновление некоторых стандартных стилей Webflow

В нашем встраиваемом коде есть несколько стилей, переопределяющих стандартные стили Webflow по умолчанию, которые мы предпочитаем не использовать в наших проектах.

Создано для корректировок и обновлений

Стили служебных классов Client-First и стили во встраиваемом коде могут быть изменены в зависимости от нашего проекта.

В клонируемом стартовом проекте содержатся комментарии для каждого стиля внутри встраиваемого кода. Если вы не уверены, что делает пользовательский CSS, оставьте его и не удаляйте. Каждая строка во встраиваемом коде находится там по определенной причине и, вероятно, полезна для проекта.

Узнайте больше о Встраиваемом коде

Страница Встраиваемого кода объясняет каждый используемый CSS стиль. Вы можете разобраться, зачем нужен каждый фрагмент кода и почему он является частью клонируемого проекта Client-First.