Themes basierend auf Bootstrap in Drupal

Bootstrap

Bootstrap

Wie sie sicher schon bemerkt haben, steckt hinter dem NovaTrend Blog das Content Management System Drupal. Das Theme basiert auf dem HTML, CSS und JavaScript Framework Bootstrap. Die Struktur einer solchen Site lässt sich erstaunlich einfach erstellen und bietet grosse Flexibilität beim Design.

In diesem Artikel möchte ich Ihnen zeigen, wie Sie eine Drupal Website mit Bootstrap aufsetzen können.

Bezüglich der Software Versionen ist eigentlich nie die richtige Zeit einen Artikel darüber zu schreiben, steht doch immer schon die neue Version vor der Tür.
Die Veröffentlichung von Drupal 8 findet seit gefühlten 2 Jahren statt und Bootstrap brachte gerade eine Version 4 Alpha heraus.

Hier im Blog benutzen wir Drupal 7.x und Bootstrap 3.x und vermutlich ist diese Kombination recht gebräuchlich.
Bei drupal.org werden mehr als 70.000 aktive Websites angegeben, die Bootstrap einsetzen (Quelle).

Drupal - Bootstrap - Installationen - 2012 - 2015
Drupal – Bootstrap – Installationen – 2012 – 2015

Aber der Reihe nach.
Zunächst stellt sich die Frage, warum ich das benutzen soll.

Die Nutzung eines Content Management Systems ist ab einer gewissen Komplexität Ihrer Website zwingend. Ob es nun unbedingt Drupal sein muss, sei dahingestellt. Drupal eignet sich für diesen Artikel, weil wir unser Blog damit betreiben. Sie können Bootstrap ebenfalls in Joomla, Typo3, WordPress und vermutlich den meisten anderen CMS nutzen, teilweise ist es bereits enthalten.

Was ist Bootstrap?

Bootstrap ist ein freies und sehr häufig verwendetes CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente, sowie zusätzliche, optionale JavaScript-Erweiterungen.

Bootstrap - Komponenten (Auswahl)
Bootstrap – Komponenten (Auswahl)

Sie können mit Hilfe dieser Elemente eine Website entwickeln und später dann bei Bedarf ein CMS „darunterlegen“.

Wenn ich das so schreibe, dann höre ich den Webdesigner protestieren und sehe den Programmierer zusammenzucken. In der harten Realität läuft es aber ziemlich oft genau so ab. Der grosse Vorteil bei dieser Vorgehensweise ist die Flexibilität und die unglaubliche Verbreitung von Bootstrap. Sie müssen sich nicht sofort festlegen, mit welchen Tools die Site letztlich realisiert wird. Es wird „einfach“ möglich Prototypen der Website in unterschiedlichen CMS zu realisieren und Workflows zu optimieren.

Es gibt Dateien mit Konfigurationsanweisungen für Bootstrap, die das komplette Design der Website beschreiben und einfach austausch- und veränderbar sind. Bekanntestes Beispiel dafür ist der Service bootstrap.com. Jedes der angebotenen Themes lässt sich „per Mausklick“ integrieren. Hier der Screenshot eines Beispielthemes im Flatdesign:

Bootswatch - Flatly
Bootswatch – Flatly

Installation

Installieren Sie sich das aktuelle Drupal 7 (Installation der 5 meistverbreiteten Content Management Systeme). Um mit Bootstrap arbeiten zu können, benötigen eine aktuellere jQuery Version als der Standard in Drupal 7. Glücklicherweise gibt es dafür natürlich ein Modul 🙂

Installieren und aktivieren Sie die Module bootstrap und jquery_update

Sie können die Installation per Konsole mit Drush erledigen

drush dl bootstrap jquery_update
drush en bootstrap jquery_update

oder über den Browser in /admin/modules/install

Drupal - Modul installieren
Drupal – Modul installieren

Konfiguration

Das jQuery Modul kann zunächst ohne Konfiguration genutzt werden, bei Bedarf können Sie in /admin/config/development/jquery_update unterschiedliche jQuery Versionen und ein CDN konfigurieren.

Das Bootstrap Theme kommt mit einem Starterkit für ein eigenes Subtheme, Sie können es am Anfang aber auch „einfach so“ nutzen und mit einem Bootswatch Design kombinieren. Nehmen wir das Bootstrap Flatly Beispiel.

Zunächst müssen Sie das neu installierte Bootstrap Theme aktivieren und als Standard festlegen (/admin/appearance).

Drupal - Theme aktivieren
Drupal – Theme aktivieren

Ihre Website hat dann das responsive Bootstrap Design.
Wenn Sie die Grösse des Browserfensters verkleinern, sehen Sie, was ich meine.

Drupal - Startseite
Drupal – Startseite

Um nun das Boostrap Flatly Design zu erhalten, müssen Sie in den Theme-Einstellungen Flatly auswählen (/admin/appearance/settings/bootstrap). Sie können sich alle Boostrap Themes hier in einer Vorschau ansehen.

Bootstrap - Flatly wählen
Bootstrap – Flatly wählen

Wenn Sie im Tab Components die Navigationsleiste (NAVBAR) nun noch auf „Static Top“ setzen …

Bootstrap - Navigation
Bootstrap – Navigation

sieht Ihre Drupalsite so aus:

Drupal - Bootstrap - Flatly
Drupal – Bootstrap – Flatly

Flatdesign … ganz einfach!
Wenn die Farben für Ihr Projekt passen, ist Ihre Arbeit hier beendet.

Ein eigenes Sub-Theme

Wenn Sie einen Kunden haben, soll die Site natürlich in den Farben, Schriften und Einstellungen der Corporate Identity sein. Um das zu realisieren, müssen Sie sich ein Sub-Theme erstellen. Das ist nicht schwer und wird hier (Bootstrap sub-theming „how to“) detailliert beschrieben. Grundsätzlich erstellen Sie sich einen eigenen Theme-Ordner, kopieren die Bootstrap Quelldateien dort hinein und ändern die theme.info Datei ab. Ausserdem benötigen Sie einen LESS Compiler. Ich nutze dafür die node.js Umgebung unter Mac OS und kann dort einfach einen LESS Compiler installieren (npm install -g less).
Hier ist eine detailierte Beschreibung (How to Use Bootswatch Themes in Drupal 7).

Je nachdem, ob Sie unter Windows, Linux oder Mac OS arbeiten sind die Schritte ein wenig anders, daher möchte ich es beim Link auf die Erklärungen belassen.

Wenn Sie sich Ihre Entwicklungsumgebung eingerichtet haben, müssen Sie für einfache Anpassungen nur die Datei variable.less bearbeiten und danach mit lessc kompilieren. In der variable.less stehen alle Parameter eines Bootswatch Themes und Sie können diese Datei downloaden (http://bootswatch.com/flatly/).

Bootstrap - Flatly - variable.less
Bootstrap – Flatly – variable.less

Nach kurzer Zeit sieht Ihr Drupal dann so aus:

Drupal - NovaTrend Design
Drupal – NovaTrend Design

In diesem Fall musste noch eine Drupal Template Datei überschrieben werden, aber die wesentlichen Änderungen waren tatsächlich nur in der Datei variable.less vorzunehmen!

Fazit

Mit dem Bootsstrap Framework können Sie Standardsites in sehr kurzer Zeit erstellen. Für individualisierte Sites benötigen Sie etwas mehr Aufwand und Know-How, sind allerdings extrem flexibel im Design. In Kombination mit den Template-Systemen der CMS können Sie wirklich jeden Bootstrap basierten Entwurf „in endlicher“ Zeit realisieren 🙂

Links


tl;dr: Die Nutzung des Bootstrap Framework wird immer beliebter – hier ein Beispiel in Kombination mit Drupal.

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Kommentar verfassen