Стратегия Основной структуры
Что такое Основная структура?
Основная структура Client-First - это набор классов и принципов для создания прочной базы HTML для наших страниц.
Маленькие сайты, большие сайты, сайты новичков и продвинутые сайты могут использовать эту структуру.
Разработчики, использующие Client-First, сразу узнают Основную структуру сайта Client-First. Для тех, кто не знаком с Client-First, наши понятные имена классов помогут им определить, что делает каждый слой структуры.
Мы можем рассматривать нашу Основную структуру как "слои" блоков Div, окружающих содержимое наших страниц. Каждый слой имеет определенное назначение для построения веб-страницы.
Объяснение каждого класса Основной структуры
6 классов составляют Основную структуру.
page-wrapper
Самый внешний родитель всех элементов на странице. Этот блок Div оборачивает все элементы на странице.
Стили:
Стили для page-wrapper являются необязательными. Стили могут быть применены, если это необходимо. Однако, этот элемент не должен иметь большого количества стилей.
Назначение:
- Позволяет быстро скопировать в clipboard все элементы на странице. Затем мы можем вставить всю скопированную страницу на другую страницу.
- Позволяет применить глобальный класс ко всей текущей странице. Например, применение overflow: hidden ко всей странице для предотвращения горизонтальной прокрутки. Осторожно: при применении overflow: hidden прекращается все горизонтальное прокручивание страницы, но также блокирует работу CSS sticky на всех вложенных элементах.
- Предотвращает применение классов и уникальных стилей непосредственно к тегу HTML <body>. В Client-First мы ограничиваем стили тега body свойствами типографики и цвета фона. Мы можем применить пользовательские стили к page-wrapper, который оборачивает всю страницу. Это позволит нам ограничить стили body типографикой и цветом фона.
main-wrapper
Основное содержимое страницы. Используйте семантический тег HTML <main>, который оборачивает все или большинство разделов содержимого сайта.
Навигационное меню и подвал не должны быть внутри этого тега <main>.
Стили:
Стили для main-wrapper являются необязательными. Стили могут быть применены, если это необходимо.
Назначение:
- Лучшие практики обеспечения веб-доступности. Этот слой Основной структуры помогает скринридерам и поисковым системам определить, где находится "основное" содержимое нашей страницы.
section_[section-identifier]
Основное применение этого класса – повышение эффективности рабочего процесса в Webflow Designer. Этот элемент организует вид панели Navigator и помогает нам быстро перемещаться внутри области разработки.
Этот блок Div оборачивает весь раздел контента. Рекомендуется установить семантический HTML-тег этого элемента в <section>. Мы делаем это на панели Settings для элемента section_[section-identifier].
Обратите внимание, что этот класс будет находиться в другой папке, отличной от содержимого внутри него. Исходя из соглашения об именовании section_[section-identifier], все классы разделов находятся в папке section_.
Стили:
Если возможно, мы должны избегать применения стилей к section_[section-identifier]. Однако, мы можем применить стили к нему, если потребуется.
Управление глобальными стилями разделов:
Используйте глобальный дополнительный класс, такой как section-style-dark, к классу section_[section-identifier], чтобы применить глобальные свойства CSS ко всем разделам. Каждый класс section_ является пользовательским классом. Применять одни и те же свойства CSS для каждого раздела неправильно. Если нам нужна, например, "темная секция", мы можем применить свойства color: white и background-color: black к section-style-dark, и этот класс может действовать как глобальное дополнение к нашему пользовательскому классу section_.
Назначение:
- Определение раздела на странице с помощью панели Navigator. Цель состоит в создании карты разрабатываемой страницы. Это UX-решение для Webflow Designer.
- Эффект прокрутки к анкору внутри панели Navigator. При клике на Div-блок с этим классом, страница будет прокручиваться к нужному разделу.
- Без визуальной карты страницы сайта нам сложнее адаптировать наших клиентов к Webflow. Это наименование разделов дает нашим клиентам четкое представление о содержимом страницы.
- Быстрая прокрутка в панели Navigator оптимизирует процесс разработки сайта и помогает нам работать быстрее.
Пример:
Главная страница может иметь разделы, такие как заголовок, описание, принцип работы, отзывы и контакты. Мы можем называть эти разделы с помощью понятных названий, чтобы легко ориентироваться в содержимом страницы.
padding-global
Глобальные горизонтальные отступы. Этот класс управляет внутренними отступами слева и справа от содержимого страницы.
Мы не советуем использовать этот класс для добавления пространства к элементам контента. Например, мы не советуем использовать этот класс для стилизации отступов элемента контента в списке.
Стили:
padding-left и padding-right единственные свойства стилей CSS на классе padding-global. Мы не рекомендуем добавлять другие свойства стилей CSS к этому классу.
Назначение:
- Создание единых отступов padding-left и padding-right на всем сайте.
- Глобальный модификатор для управления универсальными внутренними отступами слева и справа на всем сайте.
Стандартная реализация:
Есть гибкость в использовании padding-global. Наша рекомендуемая структура для padding-global выглядит следующим образом:
- main-wrapper
- section_[section-identifier]
- padding-global
- container-large
...(например, компоненты, элементы и т. д.)
Гибкость:
Есть разные варианты размещения padding-global.
Мы отделяем стили padding-global от других стилей Основной структуры, чтобы их можно было использовать с другими элементами структуры страницы или без них. Это преимущество использования слоев.
Отдельное управление внутренними отступами позволяет нам добавлять padding-global:
- В качестве родителя для container-large
- В качестве дочернего элемента для container-large
- Или и там и там
Каждый из вариантов дает разный визуальный результат.
Если мы добавляем значения padding CSS к нашему классу container-large, мы всегда будем привязаны к стилям отступов страницы при использовании этого контейнера. Однако, это не всегда удобно. Отделив padding от max-width, мы можем использовать их независимо.
container-[size]
Единая глобальная система контейнеров для контента на странице. Весь или большая часть контента страницы может находиться внутри класса container-.
Стили:
- margin-left и margin-right установлены на автоматическое выравнивание блока Div по центру страницы.
- width: 100% чтобы контент занимал всё доступное пространство.
- Значение max-width для ограничения ширины контента width. В Client-First включены три разных размера контейнера - маленький, средний и большой. Мы можем изменять эти значения, добавлять новые или удалять.
Назначение:
- Центрирование контента на странице
- Установка и управление едиными значениями max-width в проекте.
В зависимости от разрабатываемого сайта, мы можем установить 2, 3 или 4 разных класса контейнера.
Client-First поставляется с тремя разными размерами max-width контейнера - маленький, средний и большой. Мы можем редактировать эти значения, добавлять новые значения или удалять значения в зависимости от нашего проекта.
padding-section-[size]
Единая глобальная система вертикальных отступов для разделов. Создает отступы сверху и снизу внутри раздела.
Этот базовый структурный класс следует использовать для блока div с классом padding-global, чтобы уменьшить вложенность элементов, как показано в примере ниже:
Стили:
- padding-top и padding-bottom для создания вертикальных отступов раздела.
Назначение:
- Поддержание единых значений отступов разделов в проекте.
- Обновление всех верхних и нижних отступов по всем разделам глобально на проекте.
Мы можем установить 2, 3 или 4 разных размеров отступов разделов в нашем проекте.
Стартовый проект Client-First содержит три разных размера отступов раздела - маленький, средний и большой. Мы можем редактировать эти значения, добавлять новые значения или удалять значения в зависимости от разрабатываемого сайта.
Если у нас где-то встречается какой-то особенный отступ раздела, мы можем применить уникальные стили к классу section_[section-identifier].