9.2. Создание темы на основе Bootstrap. Настраиваем PhpStorm, LESS Compiler для работы с нашей темой.

Bootstrap

В прошлых уроках мы уже разбирали как создавать тему на основе другой темы Stable. В этом уроке мы разберем как создавать тему на основе Bootstrap -  популярного фреймворка для быстрого создания оформления страниц.

Я думаю у вас уже есть установленный Drupal 8. Давайте перейдем к установке Bootstrap:

https://www.drupal.org/project/bootstrap

В отличие от 7го друпала в 8ом, мы кладем все темы сайта в папку /themes в корне сайта:

drupal 8 bootstrap

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

/themes/bootstrap/starterkits/less

drupal 8 bootstrap

Копируем папку less в папку /themes, рядом с родительской темой bootstrap и переименовываем ее в название нашей темы, у меня это будет drupalbook. Также переименовываем файлы THEMENAME.libraries.yml, THEMENAME.starterkit.yml, THEMENAME.theme так чтобы вместо THEMENAME было имя нашей темы, например drupalbook.libraries.yml. Только THEMENAME.starterkit.yml переименовываем в название темы.yml: drupalbook.info.yml.

drupal 8 bootstrap

Теперь зайдем в файл drupalbook.info.yml и в разделе libraries также переименуем THEMENAME:

libraries:
  - 'drupalbook/global-styling'
  - 'drupalbook/bootstrap-scripts'

Имя темы тоже бы желательно  переименовать:

 

name: 'Bootstrap Drupalbook Sub-Theme (LESS)'

Переименовать также придется файлы настроек темы:

/config/install/drupalbook.settings.yml
/config/schema/drupalbook.schema.yml

 drupal 8 bootstrap

Теперь осталось скопировать код самого bootstrap фреймворка:

http://getbootstrap.com/getting-started/#download

Нас интересует именно Source code версия bootstrap состоящия из еще не скомпилированных LESS файлов:

Drupal 8 bootstrap

Создаем в нашей подтеме папку bootstrap и копируем туда файлы bootstrap'а.

drupal 8 bootstrap

Мы копируем именно Source code, не Bootstrap версию с компилированными CSS файлами. Это нужно для того чтобы мы могли переопределить переменные bootstrap'а у нас в друпал теме в отдельных файлах:

/less/overrides.less
/less/variable-overrides.less 

drupal 8 bootstrap

Также мы можем использовать SASS версию bootstrap'а, но тогда нам нужен будет SASS Compiler, мы же используем LESS CSS Compiler, потому что он встроен в PhpStorm.

Теперь мы можем зайти на страницу Оформление и включить наше тему

/admin/appearance

Drupal 8 bootstrap

Сразу у нас не будет нужных нам стилей бутстрапа, их нужно еще скомпилировать. Для этого мы будет использовать плагин PhpStorm'а Less Compiler. Давайте зайдем в настройки PhpStorm File -> Settings.

PhpStorm Less compiler

 

  • Ищем в настройках Plugins
  • Переходим на страницу Plugins
  • Ищем по плагинам слово LESS
  • Находим плагин LESS CSS Compiler
  • Устанавливаем его через Install JetBrains plugin...
  • Если не получается найти плагин, то скачиваем его с официальной страницы:

 И ставим плагин через Install plugin from disk...

 Теперь когда у нас установлен плагин, нужно его настроить. Заходим в настройки PhpStorm и ищем в настройках слово LESS:

Drupal 8 bootstrap

Нажимаем плюс, чтобы добавить LESS profile. Называем наш профайл как-нибудь, например Bootstrap, для каждого проекта PhpStorm профайл нужно создавать свой.

drupal 8 bootstrap

В настройках профиля указываем:

LESS source directory - C:\OpenServer\domains\drupal8\themes\drupalbook\less
Это путь до папки less нашей темы, не папки less самого bootstrap'a, а именно нашей темы, потому что мы подгружаем файлы bootstrap'a из нашего файла style.less.

Include files by path - C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less
Подключаем только файл style.less, это точка входа в компиляцию наших всех less файлов, по сути мы компилируем только один файл style.less, остальные в него включаются и компилируются автоматически.

CSS output directory - C:\OpenServer\domains\drupal8\themes\drupalbook\css
Так как мы подключаем только один файл style.less, то скомпилирован будет только один style.css файл. Что довольно удобно, нам не придется возиться с подключением кучей файлов, но с другой стороны мы компилируем всегда весь бутстрап целиком, даже когда нам нужно изменить всего одну строчку CSS в нашей теме.

Compile automatically on save - Удобная фича, компилирует заново CSS, когда мы нажимаем Ctrl + S или сохраняем файлы. Рекомендую оставить включенной.

Теперь можно нажать Ctrl + S и это запустит компиляцию LESS файлов. Также можно вызвать компиляцию вручную, кликнув на файл style.less и выбрать Compile to CSS:

phpstorm less css compiler

Обычно компиляция занимает 5-10 секунд:

compile style.less to CSS

Если у вас все удачно скомпилировалось, то вы должны увидеть ваши новые стили:

drupal 8 bootstrap

Не забудьте отключить агрегацию javascript и CSS в админке друпала:

/admin/config/development/performance

DRupal 8 bootstrap

По умолчанию они включены.

Все теперь вы можете приступать к верстке, к тому же у вас уже будет изначально встроенное hamburger мобильное меню и responsive верстка.

drupal 8 bootstrap

Для этого нужно разместить блок меню в регионе Navigation (Collapsible).

DRupal 8 bootstrap

В следующих уроках мы сверстаем PSD макет для нашей темы на Bootstrap.

Комментарии

Добавить комментарий

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

Здравствуйте. Подскажите

Здравствуйте. Подскажите пожалуйста, могу ли я установить данным способом Bootstrap, создать подтему на его основе, скомпилить файлы less в css и тупо дальше работать в css? То есть вообще не работать в less не менять исходников. Я просто less не знаю. Спасибо.

Добрый день. К сожалению не

Добрый день. К сожалению не смог понять, как например добавлять карусель bootstrap на сайт. Не подскажете? Хотя бы простыми мазками. Есть тема бутстрап, даже создал подтему. В основной теме в темплейтах есть различные блоки и т.д. надо ли их копировать в саб-тему? И как вообще добавлять элементы бутстрап на сайт. Ибо есть верстка на нем, голый html, но хочется перевести все на друпал. Но видимо не судьба, т.к. я не понимаю основного принципа его работы. Буду благодарен за помощь. Спасибо Вам за полезный канал.

Я новичок. Слово Бутстрап

Я новичок. Слово Бутстрап услышал раньше. Позавчера посмотрел в Википедии. Что оно значит. Вчера неполный день. Сегодня 12 часов (с неб. перерывом). На локалхосте (линукса). Бутстрап - это здорово. И как раз к 8 друпалу !!!
Карусель можно подключить. В папке Бутстрапа всего три папки. (небольшие).

Тороплюсь поделиться своей

Тороплюсь поделиться своей тихой радостью. К сожалению пользоваться windows, то есть и phpstorm не могу. Денег нет, и добавлю к крылатой фразе, и не будет. Приходится пользоваться линуксом. Вот сегодня первая удача. С уважением.https://vk.com/photo173451065_456239024

Не могу молчать. Спасибо за

Не могу молчать. Спасибо за Ваши публикации. Они помогли мне темизировать сайт. Вот таким образом. Конечно, это начала, необходима очень большая работа, может ещё не менее полгода, для совершенствования, хотя бы на минимальный уровень. Впрочем даю здесь ссылку, А Вы можете её убрать сразу, или потом. Мне накрутка не важна. С уважением. http://egmontgroup.ru/node/13 Не получается ( как прикрепить ? ) themes.tar.gz Заменяю папку themes на сайте на архивную. И всё. Но у меня линукс, как это будет в Виндовс самому любопытно. ( скорей всего тоже так же ). Конечно backend никакой, путь к хорошему backend ( у ) долгий для меня. Я пока переключаюсь на Twig. Спасибо автору Ивану Абраменко за прекрасные уроки. С уважением.

От новичка. Если кому

От новичка. Если кому интересно. Бутстрап пришлось удалить. Он даёт дополнительные проблемы при некоторых вопросах. Но у меня учебный сайт для меня. Снова Бартик. Надо учить, будет время, twig. Для 8 друпала без него не пойдет дело, я так думаю. А так, бутстрапов можно наставить, но это не то. с уважением.