7.2.1. Erstellung von Themes auf Basis von Bootstrap. Wir richten PhpStorm und den LESS Compiler ein, um mit unserem Theme zu arbeiten.

27/05/2025, by Ivan

bootstrap

In früheren Lektionen haben wir bereits gesehen, wie man ein Theme basierend auf einem anderen Stable-Theme erstellt. In diesem Tutorial zeigen wir, wie man ein Theme basierend auf Bootstrap erstellt, einem beliebten Framework zur schnellen Erstellung von Seitenlayouts.

Ich nehme an, Drupal ist bereits installiert. Gehen wir zur Installation von Bootstrap über:

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

Im Gegensatz zu Drupal 7 werden in Drupal 8 alle Themes der Seite im Ordner /themes im Root-Verzeichnis der Seite abgelegt:

Bootstrap

Um ein eigenes Theme basierend auf Bootstrap zu erstellen, müssen Sie ein Subtheme anlegen. Der Ordner für das Subtheme muss direkt vom Parent-Theme übernommen werden:

/themes/bootstrap/starterkits/less

less

Kopieren Sie den Ordner less in den /themes-Ordner neben das übergeordnete Bootstrap-Theme und benennen Sie ihn in den Namen unseres Themes um, bei mir heißt es drupalbook. Wir benennen auch die Dateien THEMENAME.libraries.yml, THEMENAME.starterkit.yml, THEMENAME.theme so um, dass statt THEMENAME der Name unseres Themes steht, zum Beispiel drupalbook.libraries.yml. Nur THEMENAME.starterkit.yml wird in themename.yml umbenannt: drupalbook.info.yml.

drupalbook

Gehen wir nun in die drupalbook.info.yml Datei und benennen im Abschnitt libraries auch THEMENAME um:

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

Auch der Name des Themes sollte geändert werden:

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

Ebenso benennen Sie die Theme-Einstellungsdateien um:

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

config

Nun müssen wir noch den Bootstrap-Code des Frameworks kopieren:

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

Wir interessieren uns für die Source-Code-Version von Bootstrap, die aus LESS-Dateien besteht, die noch nicht kompiliert sind:

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

source

Erstellen Sie im Subtheme-Ordner einen bootstrap-Ordner und kopieren Sie die Bootstrap-Dateien dort hinein.

bootstrap

Wir kopieren genau den Source-Code, nicht die Bootstrap-Version mit kompilierten CSS-Dateien. Das ist notwendig, damit wir die Bootstrap-Variablen in unserem Drupal-Theme in separaten Dateien überschreiben können:

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

ovverides

Wir können auch die SASS-Version von Bootstrap verwenden, benötigen dann aber einen SASS-Compiler. Wir nutzen den LESS CSS Compiler, weil dieser in PhpStorm integriert ist.

Nun können wir zur Erscheinungsbild-Seite gehen und unser Theme aktivieren

/admin/appearance

Wir werden zu Beginn noch nicht die benötigten Bootstrap-Stile sehen, da diese noch kompiliert werden müssen. Dafür verwenden wir das PhpStorm Plugin Less Compiler. Öffnen Sie die Einstellungen von PhpStorm unter Datei -> Einstellungen.

php storm

Wir suchen in den Plugin-Einstellungen
Gehen zur Seite Plugins
Suchen nach Plugins mit dem Wort LESS
Finden das Plugin LESS CSS Compiler
Installieren es über Install JetBrains plugin …

Wenn Sie das Plugin nicht finden, laden Sie es von der offiziellen Seite herunter:

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

Und installieren das Plugin über Install plugin from disk ...

Nachdem wir das Plugin installiert haben, müssen wir es konfigurieren. Wir suchen in den Einstellungen von PhpStorm nach LESS:

less profiles

Klicken Sie auf Plus, um ein LESS-Profil hinzuzufügen. Wir nennen unser Profil z.B. Bootstrap, für jedes PhpStorm-Projekt müssen Sie ein eigenes Profil erstellen.

less profiles

Im Profil geben Sie an:

LESS-Quellverzeichnis - C:\OpenServer\domains\drupal8\themes\drupalbook\less

Dies ist der Pfad zum LESS-Ordner unseres Themes, nicht zum LESS-Ordner von Bootstrap selbst, da wir die Bootstrap-Dateien aus unserer style.less Datei laden.

Einbindungsdatei per Pfad - C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less

Wir binden nur die style.less Datei ein, dies ist der Einstiegspunkt zur Kompilierung aller LESS-Dateien, tatsächlich kompilieren wir nur eine style.less Datei, der Rest wird darin eingebunden und automatisch kompiliert.

CSS-Ausgabeordner - C:\OpenServer\domains\drupal8\themes\drupalbook\css

Da wir nur eine style.less Datei einbinden, wird auch nur eine style.css Datei kompiliert. Das ist recht bequem, wir müssen uns nicht um viele Dateien kümmern, allerdings wird bei jeder Änderung die gesamte Bootstrap kompiliert, auch wenn wir nur eine Zeile CSS im Theme ändern.

Automatische Kompilierung bei Speicherung - praktische Funktion, kompiliert CSS automatisch, wenn wir Ctrl + S drücken oder Dateien speichern. Ich empfehle, sie aktiviert zu lassen.

Jetzt können Sie Ctrl + S drücken und die LESS-Dateien werden kompiliert. Sie können die Kompilierung auch manuell starten, indem Sie die style.less Datei auswählen und „Compile to CSS“ wählen:

compile