Шаблон сайта и компоненты

В рамках продукта верстку можно разделить на два вида:

• Верстка компонентов
• Верстка шаблона сайта

Контекст

Контексты продуктов и шаблонов сайтов

Прежде чем приступать к работе, необходимо выяснить в каком продукте и в каком шаблоне (или шаблонах) сайта будет использоваться верстка. От контекста использования зависит следующее:

• Стандарт HTML (HTML5, HTML4, XHTML)
• Standard Mode и/или Quirks Mode
• Гибкость верстки
• Устойчивость к внешним стилям
• Тестирование
• Кросс-браузерность

Существует следующие контексты использования верстки:

• Корпоративный портал. Данный продукт поставляется с шаблоном Bitrix24. Компоненты должны хорошо отображаться в этом шаблоне.
• Управление сайтом. Именно с помощью этого продукта клиенты создают новые сайты. Компоненты будут работать в абсолютно разных по дизайну и по верстке проектах. Как правило, партнер, интегрируя стандартный компонент на сайте, идет по пути наименьшего сопротивления. Сначала пробует изменить только CSS шаблона и если этого недостаточно - копирует шаблон и на его основе создает новый.
• Публичные интерфейсы. Административная верхняя панель, диалоги создания и редактирования страницы - это все примеры публичных интерфейсов, которые должны хорошо отображаться в любом дизайне. Здесь важно, чтобы верстка была "пуленепробиваемой" - внешние стили шаблона не должны влиять на ее отображение.
• Административный раздел. Представляет собой по сути отдельный сайт со своим шаблоном и интерфейсами. Однако часть этих интерфейсов могут отображаться в публичной части сайта.
• Сайты готовых решений. Для данных сайтов создается отдельный набор шаблонов, использование которых предназначено только для соответствующего шаблона сайта.
• Решение Интернет-магазин. Несмотря на то, что сайт интернет-магазина является готовым решением, его шаблоны используются в компонентах как стандартные (по умолчанию). Это значит, что такие шаблоны могут использоваться в любых других дизайнах.
• Мобильное приложение. Данный продукт использует браузер на основе движка WebKit.

Bootstrap

Bootstrap в Bitrix Framework

В Bitrix Framework для вёрстки шаблонов сайта и компонентов используется Bootstrap. При вёрстке шаблонов учитывайте что:

1. В БУС подключается не собственный вариант Bootstrap, а оригинальная, не изменённая поставка фреймворка в 4-ой версии.
2. Bootstrap подключается не в конкретном компоненте, а в целом на продукте из модуля main.
3. В Bootstrap рекомендуют кастомизировать стили в отдельном файле, обычно он называется bootstrap-theme.css. В случае с Bitrix Framework он называется template_style.css - для основного шаблона и style.css в каждом отдельном компоненте. В этом случае выше перечисленные файлы подключатся после основной библиотеки.

Если верстальщик не следует рекомендациям Bootstrap и нашей документации, то возможна ситуация, когда "плывёт" дизайн.