7.2.1. Thema’s maken op basis van Bootstrap. PhpStorm en LESS Compiler instellen om met ons thema te werken.

In eerdere lessen hebben we al bekeken hoe je een thema kunt maken op basis van een ander thema, zoals Stable. In deze les laten we zien hoe je een thema maakt op basis van Bootstrap, een populair framework voor het snel bouwen van paginalay-outs.

Ik ga ervan uit dat je Drupal al hebt geïnstalleerd. Laten we doorgaan met de installatie van Bootstrap:

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

In tegenstelling tot Drupal 7 plaatsen we in Drupal 8 alle thema’s van de site in de map /themes in de hoofdmap van de site:

Om je eigen thema op basis van Bootstrap te maken, moet je een subthema aanmaken. De map voor het subthema moet worden gekopieerd uit de hoofdmappen van het parent-thema:

/themes/bootstrap/starterkits/less

Kopieer de map less naar de map /themes, naast het hoofdthema bootstrap, en hernoem deze naar de naam van je eigen thema. In mijn geval noem ik het drupalbook. Hernoem ook de bestanden THEMENAME.libraries.yml, THEMENAME.starterkit.yml en THEMENAME.theme zodat ze de naam van jouw thema bevatten, bijvoorbeeld drupalbook.libraries.yml. Alleen THEMENAME.starterkit.yml moet je hernoemen naar drupalbook.info.yml.

Open nu het bestand drupalbook.info.yml en wijzig in de sectie libraries de naam THEMENAME naar de naam van jouw thema:

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

Het is ook aan te raden om de naam van het thema zelf aan te passen:

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

Hernoem ook de configuratiebestanden van de thema-instellingen:

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

Nu moeten we de Bootstrap-code van het framework kopiëren:

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

We hebben de Source code-versie van Bootstrap nodig, die bestaat uit nog niet-gecompileerde LESS-bestanden:

https://getbootstrap.com/docs/4.3/getting-started/download/

Maak een map bootstrap aan in je subthema en kopieer daar de Bootstrap-bestanden naartoe.

Kopieer dus precies de source code en niet de versie van Bootstrap met gecompileerde CSS-bestanden. Dit is nodig zodat we Bootstrap-variabelen in onze Drupal-thema’s kunnen overschrijven in aparte bestanden:

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

We kunnen ook de SASS-versie van Bootstrap gebruiken, maar dan hebben we de SASS Compiler nodig. In dit voorbeeld gebruiken we de LESS CSS Compiler, omdat deze al in PhpStorm is ingebouwd.

Nu kunnen we naar de pagina Appearance gaan en ons thema inschakelen:

/admin/appearance

In eerste instantie zullen de Bootstrap-stijlen nog niet zichtbaar zijn, want ze moeten nog worden gecompileerd. Hiervoor gebruiken we de PhpStorm-plugin LESS Compiler. Ga in PhpStorm naar File → Settings.

• Zoek in de instellingen naar “Plugins”.
• Ga naar de Plugins-pagina.
• Zoek naar plugins met het trefwoord “LESS”.
• Vind de plugin LESS CSS Compiler.
• Installeer deze via “Install JetBrains plugin …”.

Als je de plugin niet kunt vinden, kun je deze downloaden via de officiële pagina:

https://plugins.jetbrains.com/plugin/7059-less-css-compiler

En installeer hem vervolgens via “Install plugin from disk …”.

Nu de plugin is geïnstalleerd, moeten we hem configureren. Zoek in de PhpStorm-instellingen naar “LESS”:

Klik op het plusteken om een nieuw LESS-profiel toe te voegen. Geef het profiel een naam, bijvoorbeeld “Bootstrap”. Voor elk PhpStorm-project moet een apart profiel worden gemaakt.

In de profielinstellingen geef je het volgende op:

LESS source directory: C:\OpenServer\domains\drupal8\themes\drupalbook\less
Dit is het pad naar de less-map van ons thema, niet die van Bootstrap zelf. Bootstrap wordt immers ingeladen via ons eigen style.less-bestand.

Include files by path: C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less
We koppelen alleen style.less — dit is het hoofdbestand voor de compilatie van alle LESS-bestanden. In feite compileren we maar één bestand, en alle andere worden daar automatisch in opgenomen.

CSS output directory: C:\OpenServer\domains\drupal8\themes\drupalbook\css
Omdat we slechts één LESS-bestand compileren, krijgen we één style.css-bestand, wat handig is. We hoeven geen tientallen bestanden afzonderlijk te compileren, al betekent dit wel dat de hele Bootstrap telkens opnieuw wordt gecompileerd, zelfs bij kleine aanpassingen.

Compile automatically on save: een handige functie die automatisch compileert wanneer je een bestand opslaat met Ctrl + S. Laat deze zeker ingeschakeld.

Nu kun je Ctrl + S indrukken en dit zal het compileren van LESS starten. Je kunt ook handmatig compileren door met de rechtermuisknop op style.less te klikken en “Compile to CSS” te kiezen:

De compilatie duurt meestal 5–10 seconden:

Als alles correct is gecompileerd, zie je je nieuwe stijlen op de site:

Vergeet niet om JavaScript- en CSS-aggregatie uit te schakelen in de Drupal-beheeromgeving:
/admin/config/development/performance

Standaard zijn deze functies ingeschakeld.

Nu kun je beginnen met het opbouwen van de pagina. Bovendien heb je al een ingebouwd hamburger-menu voor mobiele apparaten en een responsieve lay-out.

Om dit te doen, plaats het menublok in de regio Navigation (Collapsible).

In de volgende lessen zullen we een PSD-layout maken voor ons thema op basis van Bootstrap.