Vor kurzem wurde die erste und noch im Alpha-Stadium befindliche Version 4 des CSS-Frameworks Bootstrap veröffentlicht. Trotz der recht frühen Version habe ich mir diese Version schon einmal angesehen bzw. meine Website geschke.net kurzerhand damit realisiert. Zwar wird laut den Entwicklern die Version 3 weiterhin gepflegt und unterstützt, allerdings schadet es meines Erachtens auch nicht, sich frühzeitig mit der neuen Version und somit Migration zu beschäftigen. Insofern habe ich einfach damit begonnen und den Umstieg am kleinen, aber lebenden Beispiel gewagt.
Die gute Nachricht lautet, dass der Aufwand gar nicht so hoch war. Zumindest ließ sich die meiste Arbeit an einem Samstagabend während der Sendung “Schlag den Raab” realisieren. Sicherlich, diese läuft auch schon einmal gerne fünf Stunden, aber das Ergebnis konnte sich danach auch sehen lassen. Und davon abgesehen waren manche der Spielchen ja auch sehenswert…
Zunächst war am Grid keine Anpassung nötig. Das grundlegende Layout war insofern nach der Umstellung noch vorhanden. Ein Wort vorweg – obwohl es momentan nur das Sourcecode-Package zum Download gibt, sind darin im dist-Verzeichnis alle benötigten Dateien bereits enthalten. Insofern muss man zunächst nicht das komplette Build-System, bestehend aus npm, grunt, Sass-Compiler etc. installieren. Zumindest trifft dies zu, falls man das Farbschema bzw. Theme nicht ändern möchte. Insofern habe ich zunächst auf das Build-System verzichtet und erst die strukturellen Anpassungen vorgenommen. Danach erfolgte die Einrichtung des Build-Systems, was eine Anpassung der Farben erlaubte – vielleicht wird das Ergebnis demnächst aber wieder etwas weniger bunt. Für das Build-System existiert auf den Bootstrap-Seiten eine ausführliche Anleitung, wenn man sich daran hält, kann eigentlich nichts schief gehen. Letztlich habe ich die Farben in der Datei scss/_variables.scss geändert und einmal grunt laufen lassen. Dabei wurden zwar etliche Warnings ausgegeben, aber die zentrale Theme-Datei dist/css/bootstrap.css dennoch erfolgreich erstellt.
Das Grid und somit der zentrale Inhalts-Bereich funktionierten, die Navigation war hingegen – sagen wir mal – nicht sichtbar. Hier hat es einige Änderungen gegeben, weshalb die Struktur angepasst werden musste. Die größte Änderung ist, dass die jeweiligen Verweise nun eine Klasse “nav-link” beinhalten müssen. Ohne diese wurde schlicht und einfach kein Link angezeigt. Insgesamt ist die Navigation bzw. navbar einfacher, aber auch flexibler geworden.
Die nächste, größere Anpassung war in den Formularelementen vonnöten. Da ich eine gewisse Standard-Ansicht von Formularen bevorzuge, die mittels Anpassung von Formular-Templates in Symfony herstellbar ist, musste hier das entsprechende Template geändert werden. Seit kurzem bietet Symfony auch bereits vorgefertigte Templates für Bootstrap 3 an. Da ich zur Zeit der Erstellung der Site noch nicht darauf zurück greifen konnte, war die Anpassung nun sogar einfacher, da ich bereits ein für Bootstrap 3 passendes Form Theme parat hatte und dort nur die Änderungen für Bootstrap 4 integrieren musste.
Schon ein wenig schmerzhafter war die Erkenntnis, dass die netten Icons bzw. die Glyphicons-Fonts nicht mehr in Bootstrap 4 enthalten sind. Anstatt Icons waren nur recht leere Platzhalter zu sehen. Dies lässt sich auch in den Hinweisen zur Migration nachlesen, aber wer schaut schon vorher in derartige Dokumente? Dies ließ sich jedoch ebenfalls leicht lösen, so stellt Font Awesome eine hervorragende Alternative zur Verfügung, die zudem noch einige Icons mehr bietet, so dass ich die Icons zu den Social Sites im Bereich “Vernetzt” nun sogar adäquat abbilden konnte. Und die Einbindung ist letztlich nahezu identisch zu den Glyphicons in Bootstrap 3, nur dass die Icons einen anderen Namen tragen, was andere Klassen bedarf.
Zuletzt war das Farbschema an der Reihe. Dabei werde ich wohl noch ein wenig experimentieren… Immerhin hat der Build-Lauf bis auf ein paar Warnings funktioniert, die vermutlich dem recht frühen Stadium zuzurechnen sind. Insgesamt war die Anpassung doch relativ problemlos bzw. die Hürden konnten leicht bewältigt werden. Einschränkend muss gesagt werden, dass die Site auch nicht allzu viele Features verwendet – von den unter “Components” gelisteten ca. 20 Komponenten sind gerade einmal 6 in Benutzung. Insofern würde der Anpassungsaufwand beim Einsatz weiterer Features auch entsprechend höher sein.
Die Dokumentation hat – trotz der alpha-Fassung – einen sehr guten Eindruck hinterlassen. Alle Komponenten werden beschrieben, die Beispiele aus der Dokumentation sind sehr ausführlich und können nahezu direkt übernommen werden. Einzig die Site-Examples sind noch nicht vollständig auf Bootstrap 4 umgestellt.
Insgesamt würde ich bei neuen Projekten nicht zögern, direkt Bootstrap 4 zu verwenden. Bei bestehenden Projekten, die auf Bootstrap 3 basieren, muss der Aufwand und somit die Kosten, dem Nutzen gegenüber abgewogen werden. Oder vielleicht demnächst ein Raab-Nachfolger noch längere Sendungen produzieren…
