1С-Битрикс Разработчикам - Как создать адаптивный шаблон и сниппеты на Bootstrap 3 для 1С-Битрикс

Всем привет!
Решил затронуть тему адаптивной верстки.
Итак на дворе конец 2016 и более 20% посетителей вашего сайта заходят на него со смартфона. В южных регионах России этот показатель может быть более 40%, что очень большая доля и ее нельзя игнорировать. Ваш сайт должен нормально отображаться на любом устройстве вашего посетителя с которого он зашел на него.

Но как сделать адаптивную верстку?
Можно заказать ее у фрилансера/компании подрядчика, которые сделают это за 10-100 тысяч рублей в зависимости от типа вашего сайта. А можно сделать его самому или переделать существующий сайт в адаптивный. Как? Дальше я расскажу, как это сделать для системы управления сайтом 1С-Битиркс.

1: Подготавливаем Bootstrap элементы

Для подготовки нам понадобится сайт Bootstrap 3 или Bootstrap 4 если вас не смущает его альфа версия. На этом сайте мы будем создавать сборку bootstrap под себя и уже в дальнейшем будем использовать ее как базовый набор стилей для нашего сайта.
Также нам понадобится отличный сайт Layoutit с помощью которого мы будем делать прототип нашего сайта и уже на основе этого прототипа с созданной сборкой bootstrap создадим наш адаптивный шаблон.

1.1 Сборка bootstrap
Итак первым делом настраиваем сборку bootstrap под себя. Для этого идем на RU сайт или EN сайт
Я беру все компоненты css и JavaScript.
При кастомизации CSS настраиваем как минимум следующие блоки:

Colors — 4 базовых цвета вашего сайта. Обычно это какие то корпоративные цвета кроме черного и белого.
Scaffolding — Цвет фона и цвет ссылок и текста.
Typography — Шрифты, которые будут использоваться на вашем сайте. После выхода шрифта Google Noto я использую только его. Можем прописать любые другие шрифты, напрмер open sans.

Если вы хотите использовать свои стили для меню, то нужно настроить блок Navs. Также можно прописать свои стили для таблиц и других элементов, но часть стилей и особенно цвета будут браться из блока Colors или их можно справить уже на сайте, если есть необходимость.
Прокручиваем страницу до самого низа и скачиваем нашу сборку bootstrap.
Получаем архив со следующим списком файлов:

В папке css есть как полные так и минимизированные версии файлов стилей нашей сборки bootstrap.

В папке js файл с javascript компонентами и его минимизированная копия.

В папке fonts находятся файлы шрифта glyphicons для создания иконок с помощью написания их кода. Подробнее о них по ссылке.

1.2 Блоки bootstrap и верстка прототипа сайта

Теперь нам нужен прототип дизайнаи функциональные блоки для нашего сайта. Заходим на сайт http://www.layoutit.com/build и переносим из левого меню сайта нужные на нашем сайте блоки в правую часть. Это делается с помощью перетаскивания, при этом появляются подсказки и вы можете настроить эти блоки.

Я обычно переношу следующие обязательные блоки:

Grid system

Обязательный элемент настройки.
Выносим блоки:

12
6-6
8-4
4-4-4
3-3-3-3 (вписываем в пустое поле)

Base CSS

Title
Paragraph
Address
Blockquote
Unordered List
Ordered List
Description
Table
Form
Horizontal Form
Button
Anchor Button
Image

Components

Breadcrumb
Pagination
Jumbotron
Text
Thumbnails
Media Object

JavaScript

Navbar
Tabs
Alerts
Collapse
Carousel

Посте того, как вы перенесли и настроили все блоки, скачиваем наш прототип.

В архиве у нас некастомизированный bootstrap 3 и файл index.html с блоками нашего прототипа.

В итоге у нас скачан архив с готовыми стилями bootstrap и прототип шаблона. Теперь переходим к этапу 2.

2: Создаем базовый адаптивный шаблон для 1С-Битрикс

Теперь переходим к созданию адаптивного шаблона для сайта под управлением 1С-Битрикс.
Для этого заходим на наш сервер в SFTP или FTP и переходим в папку «/bitrix/tempates/»
В ней создаем 4 пустых файла:

footer.php
header.php
description.php
styles.css
template_styles.css

В файле header.php прописываем подключение пролога и языковых файлов:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?IncludeTemplateLangFile(__FILE__);?>

В файле footer.php прописываем только подключение языковых файлов:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?IncludeTemplateLangFile(__FILE__);?>

Из папки с подготовленными ранее стилями bootstrap копируем папки fonts и js.

Содержимое файлов стилей копируем:

bootstrap.css в style.css
bootstrap-theme.css в template_styles.css

Это делается для того, чтобы редакторы и администраторы сайта могли использовать стили bootstrap из редактора с помощью инструмента подсказок при наборе. Я покажу далее как это работает и насколько это удобно.

В файле description.php прописываем название шаблона, чтобы его можно было выбрать в панели управления сайтом.

<?$arTemplate = array (
'NAME' => 'bootstrap',
'DESCRIPTION' => 'Адаптивный шаблон',
'SORT' => '',
'TYPE' => '',
);?>

Далее переходим к переносу прототипа. Идем в папку с архивом прототипа и разархивируем ее.
Идем в папку «/layoutit/src/js/» и копируем файл jquery.min.js в наш адаптивный шаблон в папку js.
Далее идем в папку «/layoutit/src/» и открываем файл index.html на редактирование.

2.1 header.php

Копируем в файл header.php следующее содержимое файла index.html

<!DO CTYPE html>
<ht ml lang="ru-RU">

Далее вставляем служебные теги и код вызова css и js файлов методом 1С-Битрикс. Эти же методы помогут создать минимизированные копии этих файлов.

<head>
<title>
<?$APPLICATION->ShowTitle()?></title>
<?$APPLICATION->ShowHead()?>
<met a name="robots" content="noyaca"/>
<met a http-equiv="X-UA-Compatible" content="IE=edge" />
<met a name="viewport" content="width=device-width, initial-scale=1">
<sc ript src="<?=SITE_TEMPLATE_PATH;?>/js/jquery.min.js" type="text/javascript"></sc ript>
<sc ript src="<?=SITE_TEMPLATE_PATH;?>/js/bootstrap.min.js" type="text/javascript"></sc ript>
<sc ript src="<?=SITE_TEMPLATE_PATH;?>/js/scripts.js" type="text/javascript"></sc ript>
</head>

CSS файлы будут подключены методом <?$APPLICATION->ShowHead()?>
Далее вставляем тег body вызов административной панели 1С-Битрикс и основной div адаптивной верстки.

<body>
<?$APPLICATION->ShowPanel();?>
<div class="container-fluid">

При работе в адаптивной версткой есть два базовых div блока

<div class=»row»> — во всю ширину
<div class=»container»> -блок ограниченный 970px или 1170px в зависимости от настроек

Я решил ограничить вернее меню сайта по ширине и прикрепить к верхней части экрана и заключил его в <div class=»container»>

<div class="container">
<nav class="navbar navbar-default navbar-fixed-top container" role="navigation">
<div class="navbar-header">

2.1.1 Гамбургер для меню

Потом добавляем «гамбургер» кнопку, которая появляется только на смартфонах. При нажатии на нее у нас на смартфоне появится меню.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>

2.1.2 Логотип

Дальше у нас идет логотип

<a class="navbar-brand" href="#">Brand</a>

Мы его вставляем в отдельный файл и подключаем в header.php через функцию включения редактируемой области.
Для этого создаем папку /public_html/bitrix/templates/bootstrap/include/ в ней создаем файл header_logo.php и в него добавляем код логотипа

<a class="navbar-brand" href="<?=SITE_DIR;?>"><img src="<?=SITE_TEMPLATE_PATH;?>/images/logo.png" title="Brand" alt="Brand"></a>

Да логотип нужно перед этим зачать в созданную папку /public_html/bitrix/templates/bootstrap/images/

Переменная <?=SITE_DIR;?> содержит путь до корня сайта
Переменная <?=SITE_TEMPLATE_PATH;?> содержит путь до шаблона в котором вызвана. В нашем случае это /bitrix/templates/bootstrap/

Подключаем файл header_logo.php в файле header.php в помощью компонента bitrix:main.include

<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "file",
"PATH" => SITE_TEMPLATE_PATH."/include/header_logo.php",
"EDIT_TEMPLATE" => ""
),
false
);?>

И теперь закрываем блок navbar-header

</div>

2.1.3 Меню

Дальше у нас идет меню. Меню на разных устройствах может быть как развернутое, так и свернутое в «гамбургер». За то, что будет в свернутом блоке отвечает следующий div

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

Потом мы вставляем код вызова компонента меню.

<?$APPLICATION->IncludeComponent(
"bitrix:menu",
"horizontal_multilevel",
array(
"ALLOW_MULTI_SELECT" => "N",
"CHILD_MENU_TYPE" => "left",
"DELAY" => "N",
"MAX_LEVEL" => "2",
"MENU_CACHE_GET_VARS" => array(
),
"MENU_CACHE_TIME" => "3600",
"MENU_CACHE_TYPE" => "N",
"MENU_CACHE_USE_GROUPS" => "Y",
"ROOT_MENU_TYPE" => "top",
"USE_EXT" => "N",
"COMPONENT_TEMPLATE" => "horizontal_multilevel"
),
false
);?>

Это стандартное горизонтальное меню с уровнем вложенности 2. То есть при нажатии на пункт меню низ выпадет список. Выглядит это изначально вот так.

Теперь мы копируем стиль компонента bitrix:menu и в него добавляем верстку из нашего прототипа index.html

Так как и в прототипе и в компоненте bitrix:menu используется ненумерованный список, то вы просто дописываем классы из прототипа вместо существующих

<ul class="nav navbar-nav">
 
<li class="dropdown"><a href="<?=$arItem["LINK"]?>" data-toggle="dropdown" class="dropdown-toggle <?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?><strong class="caret"></strong></a>
<ul class="dropdown-menu">

Полный код компонента доступен в архиве в конце этого поста.
Также я добавил горизонтальный разделитель в меню.

<?if ($arItem["TEXT"] == "divider"):?>
<li class="divider"></li>
<?else:?>

Его можно установить добавив в меню новый пункт с текстом divider

2.1.4 Телефон и другие элементы в header

Отдельно в div меню collapse navbar-collapse добавляем телефон. Делается это с помощью следующего кода кода

<p class="navbar-text navbar-right">+7 (812) 123-45-67-89</p>

Закрываем блок с навигацией.

</div>
</nav>

Хак для меню

Так как меню у нас всегда приклеено к верхней части окна браузера, то часть элементов страницы расположенных ниже него будет перекрываться меню. Для предотвращения этого я использую div с вертикальным отступом margin-top. Размер отступа в пикселях ставим в зависимости от высоты блока с меню.

<div class="body-navi-padding"></div>

2.1.5 Хлебные крошки

Тут все просто.
Устанавливаем код компонента хлебные крошки bitrix:breadcrumb в отдельный div из grid таблицы:

<div class="container">
<div class="col-md-12">
<?$APPLICATION->IncludeComponent(
"bitrix:breadcrumb", 
".default", 
array(
"PATH" => "",
"SITE_ID" => "s1",
"START_FROM" => "0",
"COMPONENT_TEMPLATE" => ""
),
false
);?>
</div>
</div>

Если вы заметили у меня все блоки добавляются в отдельные div container а уже в нем в col-md-12. Это сделано, чтобы на смартфоне, данный блок правильно адаптировался под содержимое страницы. Все блоки в дальнейшем будут вставляться в отдельные div.
Теперь в браузере в режиме правки создаем копию стилей для данного компонента и копируем их в наш шаблон.

Правим код компонента на основе кода прототипа с сайта Layoutit

<ul class="breadcrumb">
<li>
<a href="#">Home</a> <span class="divider">/</span>
</li>
<li>
<a href="#">Library</a> <span class="divider">/</span>
</li>
<li class="active">
Data
</li>
</ul>

2.1.6 Заголовок H1

Следующий обязательный элемент на странице, заголовок H1. Тут все просто вставляем его в grid блок col-md-12

<div class="container">
<div class="col-md-12">
<h1><?$APPLICATION->ShowTitle(false)?></h1>
</div>
</div>

На этом с файлом header.php закончили. Переходим к файлу footer.php

2.2 footer.php

В footer.php у нас обычно следующие блоки:

Адрес
Ссылки на важные разделы сайта
Соцсети или панель соцзакладок
Копирайты
Счетчики

Grid сетка выглядит так:

Блок адрес, счетчик, соцсети, ссылки выглядит так:

<div class="container">
<div class="col-md-4">
<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "file",
"PATH" => SITE_TEMPLATE_PATH."/include/address.php",
"EDIT_TEMPLATE" => ""
),
false
);?>
<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "file",
"PATH" => SITE_TEMPLATE_PATH."/include/schet.php",
"EDIT_TEMPLATE" => ""
),
false
);?>
<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "file",
"PATH" => SITE_TEMPLATE_PATH."/include/socseti.php",
"EDIT_TEMPLATE" => ""
),
false
);?>
</div>
<div class="col-md-8">
<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "file",
"PATH" => SITE_TEMPLATE_PATH."/include/footer_links.php",
"EDIT_TEMPLATE" => ""
),
false
);?>
</div>
</div>

Блок с копирайтами выглядит так:

<div class="row">
<div class="container">
<div class="col-md-12">
<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "file",
"PATH" => SITE_TEMPLATE_PATH."/include/copyright.php",
"EDIT_TEMPLATE" => ""
),
false
);?>
</div>
</div>
</div>

Вконце footer.php мы добавляем закрывающий div и закрывающие теги body и html

</div>
</body>
</html>

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

3: Верстка страниц в редакторе и сниппеты

Мы сделали адаптивный шаблон таким образом, чтобы можно было верстать страницы, как во весь экран, так и с ограничением по ширине вне зависимости от настроек шаблона. Это нужно для создания на одном сайте, как лендинг страниц, так и обычных страниц. Плюс у нас стоит задача, чтобы создавать страницы мог контент менеджер или редактор сайта без необходимости редактирования страниц по FTP.

Для этого я использую инструмент редактора 1С-Битрикс под названием сниппет. Сниппет — это подготовленный код, который вставляется в нужное место на странице прямо в редакторе и уже содержит нужные стили и разметку.

Спиппеты находятся в папке /public_html/bitrix/templates/bootstrap/snippets

Сниппеты лучше создавать из редактора, тогда можно избежать прописывания настроек для каждого из них в файл .content.php

При редактировании новой страницы редактор выглядит так:

Мы будем создавать следующие типы сниппетов:

Grid сниппеты
Сниппеты оформления

Создадим первый grid сниппет col-md-12

Укажем категорию для сниппета.

Код сниппетра «Блок 12» из прототипа с сайта LayoutIt:

<div class="container">
  <div class="col-md-12">
<p>Text...</p>
  </div>
</div>

По этому же принципу делаем сниппеты для блоков:

6-6
8-4
4-8
4-4-4
3-3-3-3

Это все распространенные блоки в grid сетке bootstrap. Все эти блоки ограниченны div сlass=»container» по ширине.
Также нам необходимы grid блоки с установленными в них стилями и другими элементами:

grid не фиксированные по ширине
grid с заголовками h2-h4
grid с картинкой
grid с кнопками

grid не фиксированные по ширине

Блок 12.

<div class="row">
<div class="col-md-12">
<p>Text...</p>
</div>
</div>

Блок 6-6.

<div class="row">
<div class="col-md-6">
<p>col-md-6</p>
</div>
<div class="col-md-6">
<p>col-md-6</p>
</div>
</div>

grid с заголовками h2-h4

Блок 4-4-4 с заголовком h3.

<div class="container">
<div class="col-md-4">
<h3>col-md-4</h3>
<p>...</p>
</div>
<div class="col-md-4">
<h3>col-md-4</h3>
<p>...</p>
</div>
<div class="col-md-4">
<h3>col-md-4</h3>
<p>...</p>
</div>
</div>

grid с картинкой
Блок 4-4-4 с заголовком h3 и картинкой.

<div class="container">
<div class="col-sm-4 col-md-3">
<img src="http://lorempixel.com/140/140/" alt="...">
<div class="caption">
<h3>col-md-3</h3>
<p>...</p>
</div>
</div>
<div class="col-sm-4 col-md-3">
<img src="http://lorempixel.com/140/140/" alt="...">
<div class="caption">
<h3>col-md-3</h3>
<p>...</p>
</div>
</div>
<div class="col-sm-4 col-md-3">
<img src="http://lorempixel.com/140/140/" alt="...">
<div class="caption">
<h3>col-md-3</h3>
<p>...</p>
</div>
</div>
<div class="col-sm-4 col-md-3">
<img src="http://lorempixel.com/140/140/" alt="...">
<div class="caption">
<h3>col-md-3</h3>
<p>...</p>
</div>
</div>
</div>

grid с кнопками
Блок 4-4-4 с заголовком и кнопкой.

<div class="container">
<div class="col-md-4">
<h3>col-md-4</h3>
<p>...</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="col-md-4">
<h3>col-md-4</h3>
<p>...</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="col-md-4">
<h3>col-md-4</h3>
<p>...</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>

Благодаря этому у нас появляются блоки необходимые для верстки страниц в редакторе.
Кроме того нам необходимы функциональные блоки:

Цитата
Табы
Алерт (выделенный блок определенного цвета
Спойлер

Эти блоки мы также переносим с сайта LayoutIt в наши спойлеры.
В итоге у нас есть все для верстки страницы.
Как работать с снипетами редактору и копирайтеру.

Вот я на видео показываю, как с этим может работать копирайтер или редактор вашего сайта. Это позволит при должном опыте делать 4-6 лендингов в день!

https://www.youtube.com/watch?v=LHmbqy3X1ak

Вот как это выглядит на сайте в компьютера.

Вот как выглядит со смартфона.

Итог

В итоге у нас есть адаптивный шаблон Bootstrap для сайта на 1С-Битрикс и набор сниппетов для работы копирайтера и редактора с таким сайтом.
Ссылки на скачивание шаблона сайта с Bootstrap 3 для 1С-Битрикс и скачивание отдельно сниппетов для 1С-Битрикс.

bootstrap.tar.gz
snippets.tar.gz

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

Как создать адаптивный шаблон и сниппеты на Bootstrap 3 для 1С-Битрикс

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером