Просмотров: 33530
Дата последнего изменения: 14.09.2021
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
4
5
Шаблон сайта и компоненты
В рамках продукта верстку можно разделить на два вида:
- Верстка компонентов
- Верстка шаблона сайта
Компонент - логически и функционально независимый компонент страницы, инкапсулирует в себе поведение (JavaScript), шаблоны и стили. Независимость компонентов обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.
Шаблон сайта определяет внешний вид сайта. Включает в себя HTML и CSS для layout'а страницы (header, footer, колонки), оформление текста и другие элементы, общие для всех страниц сайта.
Контекст
Контексты продуктов и шаблонов сайтов
Прежде чем приступать к работе, необходимо выяснить в каком продукте и в каком шаблоне (или шаблонах) сайта будет использоваться верстка. От контекста использования зависит следующее:
- Стандарт HTML (HTML5, HTML4, XHTML)
- Standard Mode и/или Quirks Mode
- Гибкость верстки
- Устойчивость к внешним стилям
- Тестирование
- Кросс-браузерность
Существует следующие контексты использования верстки:
- Корпоративный портал. Данный продукт поставляется с шаблоном Bitrix24. Компоненты должны хорошо отображаться в этом шаблоне.
- Управление сайтом. Именно с помощью этого продукта клиенты создают новые сайты. Компоненты будут работать в абсолютно разных по дизайну и по верстке проектах. Как правило, партнер, интегрируя стандартный компонент на сайте, идет по пути наименьшего сопротивления. Сначала пробует изменить только CSS шаблона и если этого недостаточно - копирует шаблон и на его основе создает новый.
- Публичные интерфейсы. Административная верхняя панель, диалоги создания и редактирования страницы - это все примеры публичных интерфейсов, которые должны хорошо отображаться в любом дизайне. Здесь важно, чтобы верстка была "пуленепробиваемой" - внешние стили шаблона не должны влиять на ее отображение.
- Административный раздел. Представляет собой по сути отдельный сайт со своим шаблоном и интерфейсами. Однако часть этих интерфейсов могут отображаться в публичной части сайта.
- Сайты готовых решений. Для данных сайтов создается отдельный набор шаблонов, использование которых предназначено только для соответствующего шаблона сайта.
- Решение Интернет-магазин. Несмотря на то, что сайт интернет-магазина является готовым решением, его шаблоны используются в компонентах как стандартные (по умолчанию). Это значит, что такие шаблоны могут использоваться в любых других дизайнах.
- Мобильное приложение. Данный продукт использует браузер на основе движка WebKit.
Bootstrap
Bootstrap в Bitrix Framework
В Bitrix Framework для вёрстки шаблонов сайта и компонентов используется Bootstrap. При вёрстке шаблонов учитывайте что:
- В БУС подключается не собственный вариант Bootstrap, а оригинальная, не изменённая поставка фреймворка в 4-ой версии.
- Bootstrap подключается не в конкретном компоненте, а в целом на продукте из модуля main.
- В Bootstrap рекомендуют кастомизировать стили в отдельном файле, обычно он называется bootstrap-theme.css. В случае с Bitrix Framework он называется template_style.css - для основного шаблона и style.css в каждом отдельном компоненте. В этом случае выше перечисленные файлы подключатся после основной библиотеки.
Если верстальщик не следует рекомендациям Bootstrap и нашей документации, то возможна ситуация, когда "плывёт" дизайн.