Es reicht nicht aus, dass die Architektur unserer Webseite gut gestaltet ist – auch das Erscheinungsbild ist wichtig! Drupal kommt uns zur Hilfe, wenn es darum geht, Websites schnell zu erstellen. Können wir mit ähnlicher Hilfe rechnen, wenn es darum geht, ein modernes Erscheinungsbild zu schaffen? Wir erzählen Ihnen ein wenig über die umfangreiche Bibliothek namens Bootstrap, die eine Vielzahl vorgefertigter Komponenten bietet.
Bootstrap
Das Jahr war 2011, als eine Gruppe von Twitter-Programmierern unter der Leitung von Mark Otto und Jacob Thornton der Welt ein außergewöhnliches Werkzeug vorstellte, das in Zukunft den Prozess der Erstellung von grafischen Benutzeroberflächen revolutionieren sollte – nicht nur für Websites, sondern auch für Anwendungen. Sie nannten es Bootstrap und beschlossen, es unter einer der liberalsten Open-Source-Lizenzen – MIT – zu veröffentlichen. Derzeit ist die neueste Version von Bootstrap 5.1.
Quelle: Bootstrap
Bootstrap ist eine Bibliothek von Cascading Style Sheets (CSS), die vorgefertigte HTML- und JavaScript-Lösungen verwendet. Es bietet vordefinierte Stile für die häufig verwendeten Elemente auf Webseiten, wie Text, Überschriften, Buttons, Navigationen, Tabellen, Links und mehr. Es sorgt auch dafür, dass die Elemente in der mobilen Version gut aussehen. Alles basiert auf einer Gitterstruktur, die aus bis zu 12 Spalten besteht. Das, was Bootstrap so beliebt macht – neben dem offensichtlichen Vorteil von Hunderten vordefinierter Klassen, sodass wir uns keine Gedanken über Abstände und das Zusammensetzen unserer Divs machen müssen – ist seine Dokumentation. Es ist unmöglich, dass man sich darin verliert. In Bezug auf die Themen behandelt sie Stylingunterstützung und ihre Varianten für alle Elemente.
Drupal und Bootstrap - beste Freunde
Die Drupal-Community ging nicht gleichgültig an einem solchen weit verbreiteten Werkzeug vorbei und schuf zwei Themes, die die Integration der Bootstrap-Bibliothek mit Drupal ermöglichen.
Bootstrap-Theme
Das grundlegende Theme, das uns die Nutzung der Bootstrap-Power in Drupal ermöglicht, kann von der Drupal.org-Seite heruntergeladen werden. Es ist jedoch erwähnenswert, dass es derzeit die Bibliotheksversion 3 unterstützt, aber mit allen Drupal-Versionen ab 7 kompatibel ist.
Die Installation des Themes kann über die Befehlszeile in Composer erfolgen:
require 'drupal/bootstrap:^3.23'
oder über das Admin-Panel unter dem Pfad /admin/theme/install.
Der nächste Schritt besteht darin, das Theme im Abschnitt Erscheinungsbild des Admin-Panels zu aktivieren oder den Drush-Befehl zu verwenden.
theme:enable bootstrap
(wenn wir nur das Theme aktivieren wollen)
config-set system.theme default bootstrap
(wenn wir das Theme aktivieren und als Standard festlegen wollen)
Dieses vorkonfigurierte Theme verfügt über viele Optionen für die globale Konfiguration einzelner Komponenten, die unsere Seite ausmachen – sowohl statische (Formulare, Tabellen, Container) als auch dynamische (Modale Fenster und Pop-ups). Man muss nur tiefer in die Einstellungen unter /admin/appearance/settings/bootstrap eintauchen. Wir können bereits einen signifikanten Unterschied im Aussehen unserer Seite feststellen.
Unten finden Sie den Vergleich meiner Test-Homepage. Wenn Sie das Bartik-Theme verwenden, werden Sie den Eindruck haben, dass plötzlich die Seitenkomponenten durcheinander geraten sind und das Ganze "kaputt" aussieht, aber machen Sie sich keine Sorgen. In den meisten Fällen müssen Sie nur das Styling der vorhandenen Elemente leicht anpassen. Gehen Sie zu Structure -> Block layout und ordnen Sie die richtigen Bereiche den Blöcken zu. Hier zeige ich das Aussehen des Bartik-Themes, nachdem es entsprechend angepasst wurde.
Barrio-Theme
Der Prozess der Installation und Aktivierung des Barrio-Themes ist der gleiche wie zuvor. Der Hauptunterschied zwischen Barrio und Bootstrap ist die Version der Bibliothek, die sie verwenden. Für Barrio ist es Bootstrap 4 oder sogar 5 (für diejenigen, die die Version 5.0.2 von Bootstrap testen möchten). Der Befehl zum Herunterladen von Barrio über Composer sieht folgendermaßen aus:
require drupal/bootstrap_barrio
Was wir in beiden Fällen erhalten, sind weitere vorgefertigte Vorlagen, die noch entsprechend konfiguriert und nach unseren Bedürfnissen gestaltet werden müssen, anstatt einer vollwertigen, gestalteten Lösung. Sie sollten als Basisthemes behandelt werden, von denen wir in unserem Sub-Theme erben. Dies ist auch in Bezug auf zukünftige Updates wichtig.
Erstellung eines eigenen Themes
Das Erstellen eines eigenen Themes, das auf der Bootstrap-Bibliothek Version 3, 4 oder 5 basiert, kann auf zwei Arten durchgeführt werden:
- durch die Verwendung des Starterkits, das für beide Themes verfügbar ist – unter themes/Bootstrap/starterkits und themes/bootstrap_barrio/subtheme (die schnellste und einfachste Option).
- durch die Verwendung des Starterkits, das mit beiden Themes verfügbar ist, jedoch ohne Verwendung des CDN (Content Delivery Network) (fortgeschrittene Option, erfordert einen CSS-Präprozessor, z.B. SASS, um Stile zu kompilieren, und die Bootstrap-Bibliothek muss lokal heruntergeladen werden).
Die erste Option erfordert nur, dass wir ein fertiges Set von Dateien in einen neuen Ordner im Themes-Pfad kopieren und die Dateien von THEMENAME oder bootstrap_barrio_subtheme in den Maschinennamen unseres Themes umbenennen. Sie sollten auch die Dateien .theme, info.yml, schema.yml, color/color.inc und js/global.js überprüfen und ähnliche Änderungen auch dort vornehmen. Dank CDN muss die Bootstrap-Bibliothek nicht lokal heruntergeladen werden.
Von nun an können wir mit der Arbeit am Erscheinungsbild unserer Seite beginnen, die Typografie oder das Farbschema definieren. In den Theme-Einstellungen finden Sie viele Optionen, um die ursprüngliche Konfiguration zu ändern, ohne die CSS- oder SASS-Dateien ändern zu müssen. In den meisten Fällen stellt sich jedoch heraus, dass dies nicht ausreicht, und es ist notwendig, Dateien zu überschreiben und Vorlagen im .twig-Format zu erstellen.
Droopler – ein hochwertiges Bootstrap-Template
Als kostenlose Drupal-Distribution wurde Droopler mit dem Gedanken an eine schnelle und umfassende Website-Erstellung entwickelt. Es enthält daher ein Set von vorgefertigten Komponenten und Funktionalitäten, die die meisten Seiten verwenden, und – dank seiner modularen Struktur – hat es einen hoch konfigurierbaren SCSS-Präprozessor. Um den Rest unserer Aktivitäten durchzuführen, können Sie Droopler installieren, wie auf der verlinkten Seite beschrieben.
Bootstrap ist ein integraler Bestandteil von Droopler. Das Droopler-Theme verwendet Barrio – unterscheidet sich jedoch von Barrio, indem es ein fertiges Theme mit Stilen und nicht nur ein Template bereitstellt. Im scss-Ordner finden wir fertig stilisierte Dateien für alle Komponenten (hauptsächlich die verfügbaren Absatztypen, Formulare, etc.) und Elemente der Seitenstruktur (Header, Footer, etc.).
Droopler-Subtheme – wie verwendet man es?
Das Droopler-Theme verfügt auch über ein Starterkit zur Erstellung eines eigenen Sub-Themes namens STARTERKIT_CSS und STARTERKIT_SCSS, in dem wir die vordefinierten Variablen leicht modifizieren können. Schauen wir uns an, wie es aussieht, wenn Sie SCSS verwenden möchten:
Die style.css-Datei kombiniert den gesamten SCSS-Code vom Haupt-droopler_theme und unserem Theme (Dateien im Ordner scss/config). Print.scss kombiniert auch den gesamten SCSS-Code für den Druck beider Themes. Im libraries Unterordner können wir unsere zusätzlichen SCSS-Dateien ablegen, die wir dann über @import in der style.scss Datei hinzufügen müssen. Beim Hinzufügen ist es empfehlenswert, die Unterteilung in components und layout beizubehalten – wie im Basistheme.
Sie können Änderungen an den Einstellungen der Bootstrap-Bibliothek selbst oder des droopler_bootstrap Basisthemes in den Konfigurationsdateien vornehmen:
- _base_theme_overrides.scss
- _bootstrap_overrides.scss.
Im Fall beider Dateien steht uns ein schneller Leitfaden zur Verfügung, der die verfügbaren Möglichkeiten der Variablenmodifikation in Form eines umfangreichen Kommentars abdeckt. Wir müssen nur die ausgewählte Variable auskommentieren und mit unserem Wert ersetzen. Die vollständige Liste der in Bootstrap verwendeten Variablen, die wir überschreiben können, befindet sich in der _variables.scss-Datei der Bibliothek. Da sie automatisch heruntergeladen wird, indem das Repository in der package.json-Datei des droopler_theme-Themes definiert wird, befindet sie sich im node_modules/bootstrap Ordner.
Angenommen, wir möchten die Farbe der Untermenü-Grenze ändern, die unter der Variablen $dropdown-border-color in Bootstrap erscheint. Im base_theme_overrides -Datei definieren wir eine neue Farbe, zum Beispiel $color-example-1. Dann kommentieren wir in der bootstrap_overrides -Datei die Zeile 34 aus, in der der Wert für die Rahmenfarbe definiert ist. Wir ersetzen ihn dort mit unserer neu erstellten Variablen.
Sie müssen den Compiler ausführen, damit die Änderungen sichtbar werden. Im Fall von Droopler haben die Entwickler auch dafür gesorgt. Es gibt eine fertige gulpfile.js Datei im Theme-Paket. Wir müssen nur den Befehl gulp watch im Theme-Verzeichnis (sowohl droopler_theme als auch droopler_subtheme) ausführen, damit alle Änderungen, die wir an scss, js oder anderen Quelldateien vornehmen, automatisch eingeschlossen und kompiliert werden. Der Effekt? Finden wir es heraus!
Unsere Grenze ist jetzt pink. Wir können dies für alle Variablen tun.
Zusammenfassung
Bootstrap ist ein leistungsstarkes Werkzeug, das Grafikdesigner und Entwickler verbindet. Einerseits ermöglicht es Designern, sich mit der Website-Architektur und der spezialisierten Terminologie (z.B. eine 2 Spalten breite Seitenleiste anstelle eines schmalen Fensters, das an den Rand der Seite geklebt ist) vertraut zu machen, andererseits spart es den Entwicklern Zeit, die nur die richtige Klasse verwenden müssen, um einen regulären Link in einen Button zu verwandeln.
Die Integration von Drupal mit Bootstrap mag relativ kompliziert erscheinen, aber bedenken Sie, dass die verfügbaren Bootstrap- und Barrio-Themes nur Vorlagen sind, und am Ende müssen wir immer noch die entsprechenden Klassen für alle Arten von Links zuweisen, die wir verwenden. In Droopler ist dieser Teil bereits erledigt – wir müssen nur noch das Block-Layout ändern oder die bestehenden Twig-Vorlagen modifizieren. Wir können in wenigen Augenblicken ein neues Farbschema erstellen und implementieren, indem wir eine einzige Datei bearbeiten – der Effekt ist garantiert.
