Всем привет! Решил затронуть тему адаптивной верстки. Итак на дворе конец 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 прописываем подключение пролога и языковых файлов:
Из папки с подготовленными ранее стилями bootstrap копируем папки fonts и js.
Содержимое файлов стилей копируем:
bootstrap.css в style.css bootstrap-theme.css в template_styles.css
Это делается для того, чтобы редакторы и администраторы сайта могли использовать стили bootstrap из редактора с помощью инструмента подсказок при наборе. Я покажу далее как это работает и насколько это удобно.
В файле description.php прописываем название шаблона, чтобы его можно было выбрать в панели управления сайтом.
Далее переходим к переносу прототипа. Идем в папку с архивом прототипа и разархивируем ее. Идем в папку «/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С-Битрикс. Эти же методы помогут создать минимизированные копии этих файлов.
CSS файлы будут подключены методом <?$APPLICATION->ShowHead()?> Далее вставляем тег body вызов административной панели 1С-Битрикс и основной div адаптивной верстки.
Мы его вставляем в отдельный файл и подключаем в header.php через функцию включения редактируемой области. Для этого создаем папку /public_html/bitrix/templates/bootstrap/include/ в ней создаем файл header_logo.php и в него добавляем код логотипа
Да логотип нужно перед этим зачать в созданную папку /public_html/bitrix/templates/bootstrap/images/
Переменная <?=SITE_DIR;?> содержит путь до корня сайта Переменная <?=SITE_TEMPLATE_PATH;?> содержит путь до шаблона в котором вызвана. В нашем случае это /bitrix/templates/bootstrap/
Подключаем файл header_logo.php в файле header.php в помощью компонента bitrix:main.include
Дальше у нас идет меню. Меню на разных устройствах может быть как развернутое, так и свернутое в «гамбургер». За то, что будет в свернутом блоке отвечает следующий div
Так как меню у нас всегда приклеено к верхней части окна браузера, то часть элементов страницы расположенных ниже него будет перекрываться меню. Для предотвращения этого я использую div с вертикальным отступом margin-top. Размер отступа в пикселях ставим в зависимости от высоты блока с меню.
<div class="body-navi-padding"></div>
2.1.5 Хлебные крошки
Тут все просто. Устанавливаем код компонента хлебные крошки bitrix:breadcrumb в отдельный div из grid таблицы:
Если вы заметили у меня все блоки добавляются в отдельные div container а уже в нем в col-md-12. Это сделано, чтобы на смартфоне, данный блок правильно адаптировался под содержимое страницы. Все блоки в дальнейшем будут вставляться в отдельные div. Теперь в браузере в режиме правки создаем копию стилей для данного компонента и копируем их в наш шаблон.
Правим код компонента на основе кода прототипа с сайта Layoutit
Вконце 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:
Это все распространенные блоки в grid сетке bootstrap. Все эти блоки ограниченны div сlass=»container» по ширине. Также нам необходимы grid блоки с установленными в них стилями и другими элементами:
Благодаря этому у нас появляются блоки необходимые для верстки страниц в редакторе. Кроме того нам необходимы функциональные блоки:
Цитата
Табы
Алерт (выделенный блок определенного цвета
Спойлер
Эти блоки мы также переносим с сайта LayoutIt в наши спойлеры. В итоге у нас есть все для верстки страницы. Как работать с снипетами редактору и копирайтеру.
Вот я на видео показываю, как с этим может работать копирайтер или редактор вашего сайта. Это позволит при должном опыте делать 4-6 лендингов в день!
В итоге у нас есть адаптивный шаблон Bootstrap для сайта на 1С-Битрикс и набор сниппетов для работы копирайтера и редактора с таким сайтом. Ссылки на скачивание шаблона сайта с Bootstrap 3 для 1С-Битрикс и скачивание отдельно сниппетов для 1С-Битрикс.
В этом посте я не ставил цель создать идеальный шаблон. Я хотел лишь показать, как можно работать со сниппетами и облегчить работу редакторов сайта. Если у вас появились вопросы, то с радостью отвечу на них в комментариях.
Андрей Рябин, в зависимости от того, через какой модуль 1С-Битрикс Управление сайтом мы ее делаем!
Если это инфоблоки, то да верстка хранится в БД. Но при работе с элементом инфоблока мы не используем grid элементы Bootstrap верстки. Цитаты и прочее можно, а вот grid излишне, так как появятся лишние отступы и на мобильном устройстве будет не красиво выглядеть!
Если используем модуль управление структурой, то верстка хранится в файле.
Здравствуйте! Скажу честно не совсем "догоняю" один момент. Мы файлы footer.php, header.php, description.php, styles.css, template_styles.css кладём куда? В созданную папку нового шаблона bootstamp и просто в тот путь который указан у Вас (в корень папки /template)?
Спасибо за статью. Пробую свой шаблон подгонять под ваш, пока не особо получается) В частности, на телефоне почему то страница уходит далеко вправо, где просто белое пространство. На компьютере это место также видно через скрол вправо, но на ПК его можно отключить, применив overflow по оси Х с значением hidden, вот только на телефоне это свойство не работает. Ну что же, буду ковыряться, что нибудь да получиться.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».