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

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

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

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

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

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

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

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

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

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

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

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

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

  • 12
  • 6-6
  • 8-4
  • 4-4-4
  • 3-3-3-3 (вписываем в пустое поле)
  1. Title
  2. Paragraph
  3. Address
  4. Blockquote
  5. Unordered List
  6. Ordered List
  7. Description
  8. Table
  9. Form
  10. Horizontal Form
  11. Button
  12. Anchor Button
  13. Image
  1. Breadcrumb
  2. Pagination
  3. Jumbotron
  4. Text
  5. Thumbnails
  6. Media Object
  1. Navbar
  2. Tabs
  3. Alerts
  4. Collapse
  5. Carousel

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1.6 Заголовок H1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

📎📎📎📎📎📎📎📎📎📎