Клиент прежде всего — версия 2.1

Руководство по стилю

Client-First — это набор рекомендаций и стратегий, разработанных Finsweet, которые помогут вам создавать веб-сайты Webflow.

Классы структур

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

обертка для страниц
основная обертка
контейнер маленький
контейнер-средний
контейнер большой
глобальное потепление
прокладочная секция-маленькая
прокладочное сечение-среднее
прокладочная секция-большая
группа кнопок

Заголовки

HTML-теги определяют стили заголовков по умолчанию. Используйте классы заголовков, если стиль типографики не соответствует стандартному тегу HTML.

H1

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

стиль заголовка-h1

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

ЧАС 2

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

стиль заголовка-h2

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

ЧАС 3

Образец текста поможет вам понять, как настоящий текст может выглядеть на вашем сайте. Образец текста используется в качестве заполнителя реального текста, который обычно присутствует.

стиль заголовка-h3

Образец текста поможет вам понять, как настоящий текст может выглядеть на вашем сайте. Образец текста используется в качестве заполнителя реального текста, который обычно присутствует.

H4

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

стиль заголовка-h4

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

ЧАС 5
Образец текста используется в качестве заполнителя. Образец текста помогает понять, как может выглядеть настоящий текст. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как может выглядеть настоящий текст.
стиль заголовка-h5
Образец текста используется в качестве заполнителя. Образец текста помогает понять, как может выглядеть настоящий текст. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как может выглядеть настоящий текст.
H6
Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как может выглядеть настоящий текст. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как может выглядеть настоящий текст.
стиль заголовка-h6
Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как может выглядеть настоящий текст. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как может выглядеть настоящий текст.

Другие HTML-теги

HTML-теги определяют стили текста по умолчанию.

Все абзацы

Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как настоящий текст может выглядеть на вашем сайте. Образец текста используется в качестве заполнителя реального текста.

Все ссылки
Все ссылки
Все цитаты
Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как настоящий текст может выглядеть на вашем сайте.
Все упорядоченные списки
  1. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
  2. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
  3. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
Все неупорядоченные списки
  • Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
  • Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
  • Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.

Текстовые классы

Текстовые классы, если стиль типографики не соответствует стандартному тегу HTML.

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

размер текста — большой

Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.

размер текста — средний

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

размер текста — обычный

Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как настоящий текст может выглядеть на вашем сайте.

размер текста — маленький

Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует на вашем сайте. Образец текста поможет вам понять, как настоящий текст может выглядеть на вашем сайте.

размер текста — маленький

Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует на вашем сайте. Образец текста поможет вам понять, как настоящий текст может выглядеть на вашем сайте.

Текстовые стили

текстовый стиль — зачеркивание

текстовый стиль — зачеркивание

текстовый стиль-курсив

текстовый стиль-курсив

в текстовом стиле отключен

в текстовом стиле отключен

текстовый стиль — все заглавные буквы

текстовый стиль — все заглавные буквы

текстовый стиль — nowrap

текстовый стиль — nowrap

ссылка в текстовом стиле

ссылка в текстовом стиле

цитата в текстовом стиле

Образец текста используется в качестве заполнителя.

текстовый стиль — 2 строки
Этот стиль CSS не поддерживается для расширенных текстов на iOS.

Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как настоящий текст может выглядеть на вашем сайте. Образец текста используется в качестве заполнителя текста в реальном тексте — text-style-2lines

текстовый стиль — 3 строки
Этот стиль CSS не поддерживается для расширенных текстов на iOS.

Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как настоящий текст может выглядеть на вашем сайте. Образец текста используется в качестве заполнителя реального текста. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как настоящий текст может выглядеть на вашем сайте. Образец текста используется в качестве заполнителя реального текста.

Вес текста

вес текста полужирным шрифтом
вес текста полужирным шрифтом
вес текста — полужирный
вес текста — полужирный
вес текста (полужирный)
вес текста (полужирный)
размер текста — средний
размер текста — средний
вес текста — нормальный
вес текста — нормальный
текст-вес-легкий
текст-вес-легкий

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

выравнивание текста влево
выравнивание текста влево
центр выравнивания текста
центр выравнивания текста
выравнивание текста вправо
выравнивание текста вправо

Кнопки

Система комбинированных классов кнопок.

кнопка
Текст кнопки
кнопка
маленький
Текст кнопки
кнопка
большой
Текст кнопки
кнопка
является вторичным
Текст кнопки
кнопка
is-текст
Текст кнопки
кнопка
is-значок
Текст кнопки

Цвета

Управляйте повторяющимся текстом и цветами фона.

Цвета текста

цвет текста — основной
цвет текста — основной
цвет текста — вторичный
цвет текста — вторичный
альтернативный цвет текста
альтернативный цвет текста

Цвета фона

фон: основной цвет
фон: вторичный цвет
фон: цвет-третичный
фон: альтернативный цвет

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

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

максимальная ширина-полная
максимальная ширина планшета
портрет с максимальной шириной и полной мобильностью
максимальная ширина, полная мобильная среда
максимальная ширина-xxlarge
максимальная ширина-xlarge
максимальная ширина-большой
максимальная ширина-средняя
максимальная ширина-маленький
максимальная ширина-маленький
максимальная ширина-xxsmall

Прокладки

Система интервалов между утилитами — классы заполнения. [направление заполнения] + [размер отступа].

Классы режиссуры

прокладочное дно
набивной топ
прокладочная вертикальная
пробивка — горизонтальная
отступы влево
отступы вправо

Классы размеров

набивка-0
набивка крошечная
набивка — xxsmall
набивка — маленькая
набивка маленькая
набивочная среда
набивка большая
прокладка-большая
набивка — xxlarge
набивка огромная
огромный набивной
набивка xxhuge
набивка на заказ (1)
набивка — на заказ 2
набивка на заказ 3

Поля

Система интервалов между утилитами — классы заполнения. [направление поля] + [размер поля].

Классы режиссуры

нижняя часть поля
верхняя часть поля
край вертикальный
край горизонтальный
левое поле
маргинальное право

Классы размеров

маржа-0
маржа крошечная
маржа-xxsmall
маржа небольшая
маржа небольшая
маржинальная средняя
большая маржа
размер маржи
маржина-xxlarge
маржа огромная
маржа огромна
маржина-xxhuge
маржа-кастом1
маржа-кастом2
маржинальный кастом3

Проставки

Унифицированная система спейсеров для проекта.

прокладка крошечная
пробел-xxмаленький
проставка-маленькая
проставка-маленькая
спейсер-носитель
прокладка большая
спейсер-большая
спейсер-xxlarge
прокладка огромная
спейсер-огромный
спейсер-ххогромный

иконы

Унифицируйте размеры иконок. высота значка задает высоту значков. значок-1x1 задает высоту и ширину значков.

высота значка маленькая
высота значка средняя
высота значка — большая
значок — 1 x 1 — маленький
значок — 1 x 1 — средний
значок — 1x1 — большой

Полезные инженерные системы

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

скрыть
Этот элемент скрыт
скрыть планшет
скрыть мобильный портрет
скрыть мобильный ландшафт
виден переполнение
переполнение скрыто
автоматическое переполнение
переполнение и прокрутка
указатель событий в автоматическом режиме
события-указатели — нет
слой
расстояние чистое
выравнивание по центру
z-индекс-1
z-индекс-2
наследовать цвет
соотношение сторон и квадрат
соотношение сторон — портрет
соотношение сторон и ландшафт
широкоэкранный формат с соотношением сторон
анимация со стрелками в виде карточек
анимация со стрелками в виде белой карточки

Элементы веб-потока

Нативные элементы Webflow с применением классов Client-First.

компонент_формы

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

Спасибо! Ваша заявка получена!
Упс! При отправке формы что-то пошло не так.
насыщенный текстом текст

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Образец текста с ссылка на сайт используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как настоящий текст может выглядеть на вашем сайте. Образец текста используется в качестве заполнителя реального текста. Образец текста используется в качестве заполнителя для реального текста. Образец текста используется в качестве заполнителя для реального текста.

  • Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
  • Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
  • Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
  1. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
  2. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
  3. Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует.
Образец текста используется в качестве заполнителя для реального текста, который обычно присутствует. Образец текста помогает понять, как настоящий текст может выглядеть на вашем сайте. Образец текста используется в качестве заполнителя реального текста, который обычно присутствует.