Bootstrap + Drupal 7: быстрый экскурс для начинающих

Релиз Bootstrap (в прошлом известный как Twitter Bootstrap) для Drupal 7 появился уже пару лет как. Однако, изучать его я взялся лишь на этой неделе. "Вход" в этот фреймворк оказался для меня совсем не простым и я набил много шишек. Информации по bootstrap много, однако общая картина вырисовывается не сразу. Поэтому, я решил объединить все в короткой обзорной статье.

Что такое Bootstrap? Коротко - это конструктор для построения интерфейса сайта, то есть с точки зрения его внешнего вида. Это набор контролов пользовательского интерфейса: кнопки, заголовки, поля ввода, всплывающие подсказки, ... (их оочень много и.. они красивые!).

Разработчики Bootstrap проделали огромную работу. Они не только определили внешний вид и поведение каждого из контролов, но и оттестировали все это огромное количество кода в разных браузерах (в том числе и мобильных!).

За что любят Bootstrap совеременные программисты? 

1. Bootstrap приспособлен в первую очередь для мобильных устройств (mobile first подход) и шикарно адаптируется под маленькие экраны (responsive-дизайн). Да, современные веб-программисты понимают, что уже более 40% пользователей посещают сайты с мобильных устройств: телефонов, планшетов. Надо думать и о них.
2. Высокая скорость разработки и стабильный результат.
3. Хорошая подробная документация по каждой фишке, отдельно по css-классам, по компонентам, по javascript. 
4. Кроме того, код Bootstrap предельно простой и предсказуемый (Ха! Сказал бы мне это кто-нибудь пару дней назад, получил бы едкий коментарий в ответ). 

За что любят Bootstrap владельцы современных сайтов? 

1. Bootstrap делает дизайн приятным, понятным, предсказуемым, а HTML/CSS/JS код компактным.
2. Даже на мобильном интернете страница сайта, сделанного на Bootstrap грузится ощутимо быстрее! Конечно, если всё это в умелых руках, скажем так, и на втором-третьем сделанном сайте ;).

Bootstrap не зависит от того, на какой CMS работает/делается сайт. Важно его правильно подключить. Я специализируюсь на Drupal, поэтому расскажу как сделать свою тему оформления на базе Bootstrap для Drupal 7.

Drupal + Bootstrap

Далее, весь процесс описан на примере Bootstrap 3.

Для работы Bootstrap требует более свежую библиотеку jQuery, нежели Drupal, поэтому ставьте модуль jQuery_update, включайте версию 1.9 или выше. 

Чтобы Bootstrap заработал правильно, со стороны Drupal требуется, чтобы движок генерировал адаптированный HTML с классами, которые описаны в стилях Bootstrap.

Устанавливаем тему оформления bootstrap

Для такого переопределения классов и структуры HTML давайте установим друпальную тему оформления bootstrap версии 7.x-3.0. Структура файлов темы оформления показана на картинке.

Создаем свою тему на базе установленной

Если вы планируете менять темплейты, рекомендую сразу создать свою тему оформления на базе установленной. Если это сделать в основной теме, все изменения будут перезаписаны (потеряны!) при ближайшем обновлении сайта. Есть вдумчивое описалово. Но если коротко и по-русски, то для этого нужно:

• скопировать директорию bootstrap_subtheme на уровень выше (в директорию с темами оформления сайта);
• переименовать во что-то своё, например, mytheme ;
• переименовать файл bootstrap_subtheme.info.starterkit в mytheme.info ;
• опционально, можно отредактировать файл mytheme.info и изменить имя для темы оформления.

​Создание подтемы закончено.

Включаем и настраиваем созданную тему оформления

Теперь заходим на сайт в раздел с темами (http://sitename.ru/admin/appearance), включаем и делаем темой по умолчанию нашу только что созданную тему mytheme.

Начинается самое интересное. По умолчанию, сам bootstrap грузится из стороннего источника - CDN (content delivery network). То есть, на вашем сервере скриптов Бутстрапа еще нет. Грузится полная версия, которая включает в себя все имеющиеся компоненты. Грузится быстро (ибо CDN), но далеко не оптимально. Теперь самое время рассказать, в каких видах бывает bootstrap:

1. CDN-версия. Команда MaxCDN любезно предложила использовать свои ресурсы для шаринга скриптами. Эта версия используется по-умолчанию.
2. Ваша настраиваемая версия всё-в-одном-файле.
   1. сжатая (bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js);
   2. несжатая (всё то же, что выше, но без min).
3. Исходники - ваша настраиваемая версия всё-в-отдельных-файлах (это касается js-файлов, для получения css-стилей, потребуется компиляция из less). В этом случае, чтобы использовать конкретный функционал, нужно отредактировать mytheme.info и раскомментировать тот скрипт(ы), что нужен(ы).

Когда использование CDN оптимально? Если сайт большой и, скорее всего, использует практически все контролы, используйте CDN-версию.

Для маленьких сайтов, которые используют от силы несколько контролов, не стоит грузить js-код и css-стили от других контролов. Можно их убрать и тем самым сократить загружаемые браузером файлы (читай, ускорить загрузку страницы на мобильных устройствах).

Минимизация (сжатие) даёт ощутимое уменьшение размеров файлов. Но в период разработки сайта лучше пользоваться несжатой версией - удобнее отлавливать ошибки и редактировать файлы (если это необходимо).

Для особо продвинутых, стоит использовать исходники. Это позволит менять их. По окончанию разработки, помните о том, что файлы нужно минимизировать.

Подключение Бутстрап к теме оформления

Самая свежая версия Bootstrap находится в git. В директории dist находятся минимизированные и обычные файлы типа всё-в-одном-файле. Класть такие файлы стоит в mytheme/bootstrap.

Как верно заметили в комментариях ниже, нужно скопировать файл bootstrap.min.css из папки bootstrap/dist/css/ в директорию css/bootstrap.min.css темы и подключить его в *.info файле строчкой
stylesheets[all][] = css/bootstrap.min.css 
и «сбросить» кэш друпала.

В директориях js, less находятся исходники javascript-сценариев и стилей соответственно. Для компиляции стилей, как я уже писал, понадобится less-компилятор. А js-файлы можно подключать отдельно.

Минимизация файлов, исключение лишних css и js

После того, как разработка сайта завершена и вы знаете, какие компоненты используются, самое время минимизировать файлы сценариев и стилей. Сперва стоит исключить неиспользуемые для отображения сайта стили и сценарии. Это здорово сократит объем CSS и JS кода. Сделать это можно следующими способами:

• сама тема оформления Бутстрап позволяет указывать в файле *.info исключаемые файлы в виде exclude[css][] = 'modules/book/book.css';
• можно использовать hook_js_alter, hook_css_alter - универсальный способ.

Сжать и упаковать их можно сторонними средствами или на стороне Drupal. Для последнего случая отличным решением является Advanced CSS/JS Aggregation. Данный модуль содержит огромное количество настроек и позволит существенно уменишить размер скриптов.

Что дальше?

Дальше можно использовать Бутстрап на полную катушку: добавлять компоненты и настраивать их внешний вид. Все компоненты очень хорошо описаны на страницах самого проекта (пользуйтесь верхним горизонтальным меню). Конечно, есть русская версия данной документации, но мне она показалась слишком сырой и я не стал её использовать.

Как подключить контрол Бутстрап

Контрол представляет из себя кусок HTML. CSS, необходимый для оформления и, возможно, код сценария javascript опциональны. Чтобы получить на вашем сайте контрол, ищете в документации соответствующий HTML код и делаете так, чтобы Друпал выводил его. Не забудьте подключить js/css, если это требуется.

Полезные ссылки

Бутстрап развивается стремительно, есть много документации про версию 2. Призываю быть осторожным, она значительно отличается от текущей версии.

https://www.drupal.org/project/bootstrap - модуль для Друпал;
https://www.drupal.org/node/1976938 - документация по модулю;
http://getbootstrap.com/css/ - описание базового подхода и классов Бутстрап;
http://getbootstrap.com/components/ - перечисление многочисленных компонентов Бутстрап;
http://getbootstrap.com/javascript/ - всё, что касается интерактивных вещей на странице;
http://getbootstrap.com/customize/ - страница для генерирования своего оптимизированного пакета файлов для подключения к сайту.

Конечно, есть еще масса вещей, про которые хочется рассказать, но, хотелось бы, чтобы статья получилась компактной и легкоусвояемой для первого прочтения :).

Приятного бутстрап-друпалинга!