Bootstrap mit Contao nutzen - Teil 2

Alle drei haben Vor- und Nachteile: Paket 1 ist minifiziert und sofort einsatzbereit, aber Anpassungen sind daran eigentlich nur möglich wenn man CSS-Stile überschreibt. Für kleine Projekte mag das gehen, umfangreiche Anpassungen möchte man damit aber nicht machen. Die anderen Varianten haben für Anfänger den Haken, dass sie jeweils einen Compiler-Setup benötigen. Wer noch nie mit LESS oder SASS gearbeitet hat ist damit möglicherweise überfordert. Wem die entsprechenden Tools vertraut sind, dem bieten sie ein mächtiges Werkzeug, mit dem variablengesteuert CSS erstellt werden kann.

Wenn man sich um all das nicht kümmern möchte, dann steht auch die Funktion der Ladens über ein CDN zur Verfügung: Man bindet Bootstrap ganz einfach über drei Zeilen ins eigene HTML-Dokument ein:

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Das geht schnell, aber ich finde das nicht nachhaltig. CDNs haben für mich den Nachteil, den Code nicht mehr unter Kontrolle zu haben. Eine Störung im CDN liegt ebenfalls nicht in meinem Einflussbereich, und schliesslich wirft die Verteilung über MaxCDN auch datenschutzrechtliche Fragen auf.

Für alle, die sich nicht damit beschäftigen möchten, aus dem Sourcecode selbst zu kompilieren, ist jedoch der Bootstrap-Customizer die erste Wahl. Das ist auch für Anfängerinnen und Anfänger recht übersichtlich: Zuerst wählt man CSS- und JS-Kompoenten aus, danach gibt es die Möglichkeit, einzelne Komponenten anzupassen. Man beginnt mit den Farben, bestimmt dann die typografischen Details und kann dann für jede Einzelkomponente exakt festlegen, wie sie unter Berücksichtung der ersten Grundeinstellungen aussehen soll.

Ergebnis ist dann eine Downloadmöglichkeit für das fertige Bootstrap-CSS-Theme - und zwar inklusive JavaScript und Fonts. An dieser Stelle gibt es dann noch einen Bonus: Der Online-Compiler erstellt eine Konfigurationsdatei, die config.json und legt gleichzeitig dafür ein Github-Gist an, das man am Besten direkt forken kann.

Diese Datei beinhaltet alle Einstellungen, die man für das Projekt vorgenommen hat - Farben, Grideinstellungen, Komponenten. Und auf Basis dieser Datei kann man auch jederzeit den Build-Prozess erneut anstossen, beispielsweise, nachdem man Veränderungen darin vorgenommen hat. Eine neue Farbe? Kein Problem, genausowenig wie vielleicht andere Grideinstellungen.

Superbonus ist jedoch die Möglichkeit, den Output des Online-Compilers in LESS zu importieren - falls man es sich anders überlegt und doch lieber mit einem lokalen Werkzeug arbeiten möchte.

Ich muss auch dazu sagen: Im Grunde genommen ist LESS (oder SASS) das Werkzeug der Wahl, um nachhaltig mit jedem CSS zu arbeiten. Gerade beim umfangreicheren, kundenbezogenen Arbeiten möchte man sich nicht auf ein Onlinetool verlassen sondern möglicherweise eigene Build-, Versionierungs- und Deploymentprozesse nutzen. Umfangreiches, responsives CSS darf gerne mal ein paar tausend Zeilen Code enthalten, und solch umfangreiche Daten bekommt man mit keinem 'Notepad-Style'-Editor mehr sinnvoll gebändigt.

Aber das soll an dieser Stelle nicht Thema sein. Schnell noch die Vorschau auf den nächsten Teil: Dann beschäftigen wir uns damit, wie Bootstrap im Zusammenhang mit dem CMS Contao nutzbar ist.