Верстка сайтов на 1С-Битрикс
Требования к верстке
- Файлы стилей разделить на 2: styles.css и template_styles.css.Первый из них содержит стили, которые относятся к рабочей (контентной) части страницы, то есть к ее "телу". Эти стили будут применяться в визуальном редакторе битрикс.Второй - стили, относящиеся непосредственно к шаблону сайта. Это все, что относится к "шапке" (хедеру), "подвалу" (футеру), меню, боковому меню и пр. Стили из файла template_styles.css подключаются вторыми, поэтому они будут иметь больший приоритет.
- Тело страницы должно быть обернуто в контейнер с неким классом или id (для примера - main) помимо body. Стили контентной части страницы могут быть указаны относительно элементов внутри него (включая его самого), но никак не внешних. Например, допускается использование такого стиля:.main .big p{background:pink;}
И нельзя использовать такой:
.wrapper .main p{background:pink;} или такой: p{background:pink;}
Объясняется это тем, что при редактировании страницы в визуальный редактор вставляется iframe, тегу <body> которого прописывается класс / идентификатор main. Содержимое страницы вставляется в этот <body>. Вышележащих над main контейнеров добавлено не будет. Соответственно, задействовавшие их стили применены тоже не будут. - Стилевая страница должна быть написана таким образом, чтобы стили применялись ко всем тэгам внутри тела страницы, таким как элементы формы, списки, заголовки и пр. Селекторы этих элементов не должны использовать классы непосредственно этих элементов.
Это нужно для того, чтобы элементы, добавленные на страницу через визуальный редактор Битрикс, получили эти стили (а они добавляются без дополнительных классов и элементов-оберток).
Эти стили лучше всего задавать относительно главного контейнера (см. п. 2). Например, допустимо использовать стиль
.main ul{...}
Но недопустимо
ul.red{...} - Крошки и заголовок h1 НЕ должны входить в тело страницы. Наоборот, контейнер для тела страницы должен открываться следом за ними.
- Структура шаблонной части различных страниц сайта должна быть максимально похожей (т.е. той, которую описывает файл template_styles.css). НЕ следует использовать различные классы / id для контейнера тела основной части различных страниц (например списка товаров и карточки товара).
- Табу на названия классов "title" и "mail", они используются в окнах визуального редактора.
- На странице должен быть ровно один тэг h1.
- Если верстаете баннеры, то учитывайте, что они могут быть отключены со страницы в любое время. Удалённый баннер не должен оставлять после себя пустое место, которое все прочие элементы всегда обтекают и не могут заполнить.
- При верстке списка новостей учесть:
- У новости может не быть изображения (и делать изображение-заглушку здесь не имеет смысла).
- Длина анонса новости может существенно превышать размеры выделенного для него html-элемента. Поэтому контейнер анонса должен учитывать этот факт и скрывать "лишний" текст.
- Если высота контейнера анонса новости больше высоты изображения, картинка должна быть обтекаема этим текстом.
- Учесть, что вставляемая картинка (рядом с новостью) может существенно отличаться по пропорциям / размерам от эталонной. При этом ширина контейнера картинки должна быть фиксированной при любых размерах изображения (вертикальная линия, пущенная от правой стороны верхнего изображения должна касаться всех изображений). Если у новости нет картинки, текст анонса должен быть смещен влево на соответствующее пространство.
- Заголовок новости, картинка (если есть), "Подробнее" (если есть) - ссылки на страницу новости
- В контейнере, в который предусматривается вставка статей / текста, нельзя прописывать изображениям margin:0 и padding:0. Иначе невозможно редактировать отступы от картинок до текста средствами визуального редактора.
- По возможности не следует использовать селекторы прямых потомков (>) и псевдоклассы n-ых потомков (nth-child). В режиме правки Битрикс обрамляет элемент дополнительным div'ом, поэтому селекторы прямых потомков могут перестать работать (между ними появляется посредник). Использование псевдоклассов n-ых потомков не желательно по причине возможной смены номера в процессе развития проекта (например, из таблицы убрали колонку, номер всех колонок уменьшился на 1 и пр.).
- Для формирования текста-заглушки, присутствующего в текстовых элементах (input type="text"), желательно использовать атрибут placeholder и плагин jquery.placeholder (для IE).
- Кросс-браузерность. Проверять, в том числе, в IE9+.
- Крайне желательно, чтобы html-код разных страниц до начала html-кода контентной части (тела страницы) был абсолютно идентичен (включая классы элементов-контейнеров). Различия могут быть после контентной части. В частности, это значит, что html-код боковой колонки должен идти ПОСЛЕ html-кода контентной части, т.к. в большинстве случаев приходится делать еще и одноколоночный шаблон (убирать боковую колонку).
- Помнить о том, что должны быть хлебные крошки (навигационна цепочка).
- В контейнере, содержащем приглашение авторизоваться / зарегистрироваться (обычно в "шапке" сайта) предусмотреть содержимое для авторизованного пользователя.
- Если есть возможность в контентной части поставить изображение в тег img вместо фона какому-либо элементу, ставить в тег img. Тогда при редактировании содержимого в визуальном редакторе можно будет изменить это изображение через интерфейс редактора.
- Если есть выпадающее меню, убедиться, что поверх выпавшей части не будут показываться какие-то другие элементы (для этого надо добавить хотя бы 10-15 пунктов). Часто оказывается, что определенные части слайдера на главной странице показываются поверх выпавшей части меню.
- Если на сайте используются стилизованные ссылки / кнопки, то класс кнопки должен одинаково оформлять как ссылку (тег a), так и теги input[type="submit"] и button.
- Табу на прописывание стилей ВСЕМ элементам формы / спискам / изображениям - обязательно нужно указывать в их селекторе, что интересуют только элементы из главного контейнера.
Иначе эти стили будут присвоены даже служебным элементам, относящимся к интерфейсу Битрикса (в списке параметров компонентов, например).
То есть нельзя использовать такой стиль: input[type="text"] {...}
И можно такой: .main input[type="text"] {...} - Input[type="file"] должен быть стилизован. Надо помнить про этот элемент формы. Для этого можно использовать вспомогательные скрипты.
- Нельзя использовать кириллицу в именах файлов / папок.
- При верстке меню учесть, что от всех остальных визуально должны отличаться 2 пункта меню: тот, на который наведен курсор мыши и тот, который активен в данный момент (в котором находится пользователь).
- Если в какой-либо таблице предусмотрена сортировка по столбцу, то часто в шапке столбца используются треугольнички, обозначающие направление сортировки (с вершиной вверх или вниз). Такие треугольнички лучше делать с помощью CSS и свойства border-width, чем создавать под каждый из них картинки.
- В списке товаров / новинок / лидеров продаж и пр. предусмотреть, что у товара может быть не одна, а несколько лычек (одновременно и новинка, и хит продаж, например).
- При верстке картинок в списках любых элементов, а также карточке товара и пр. учитывать, что реальные изображения по соотношению сторон могут отличаться от запланированных. При этом изображение должно быть корректно вписано в указанную для него область по меньшей из двух сторон, центрироваться по обоим измерениям, а по большей стороне должно обрезаться все, что не вошло в отведенный контейнер. Этого эффекта можно добиться с помощью стиля background-size:cover;
- Все всплывающие окна желательно делать библиотекой fancybox. Предусмотреть всплывающие окна при добавлении товара в корзину, при клике на ссылку "заказать звонок".
- При верстке форм вроде отправки заявки обратного звонка, обратной связи и пр. добавлять поле ввода CAPTCHA. Размеры картинки капчи 180x40 пикселей, пример:
