Das beliebte Frontend Framework Bootstrap ist vor ein paar Wochen mit der Version 5 in eine neue Generation gegangen. Aktuell ist die Version Bootstrap 5.1 die aktuelle Generation des JavaScript und CSS Framework, mit der man hervorragend responsive Webseiten gestalten kann.
Was zuerst wie ein kleines Upgrade eines bereits intensiv im Einsatz befindlichen Systems erscheint, erweist sich bei intensiver Arbeit mit Bootstrap als eine deutliche Bereicherung! Denn zusätzlich zu den bestehenden Techniken und Features von Bootstrap gibt es nun weitere Komponenten, die einem Frontend Entwickler die Arbeit enorm erleichtern. Nach den ersten TYPO3 Kundenprojekten mit Bootstrap 5.1 hier ein paar Gründe für meine Begeisterung:
- Das Grid Layout mit seinen nunmehr 6 Größenklassen erlaubt ein besseres Feintuning zur Auswahl eines passenden Designs für responsive Frontends
- Das gezielte Ansprechen von Flex Klassen mit der Möglichkeit, diese auf einen Breakpoint oder mehrere Klassen zu beschränken, erlaubt es Designs für unterschiedliche Endgeräte umzusetzen, ohne per Media Query im CSS Klimmzüge machen zu müssen
- Mit den Justify und Alignment Klassen kann man, auch nach den Klassen des Grid gestaffelt, unterschiedliche Ausrichtungen für Elemente im Frontend realisieren, ohne viel Code im CSS machen zu müssen
- Mit dem Gutter braucht man nicht mehr bei mehreren Spalten nebeneinander oder Zeilen untereinander per CSS und first child / last child Abfrage nachzusehen, wie sich ein Element bei einem bestimmten Viewport verhält, man gibt dies über die Gitterstruktur ein und die Elemente verhalten sich wie vom Entwickler gewünscht.
- Die Navigation über eine Navbar ist erheblich weniger aufwändig, über eigene Klassen von Bootstrap einfacher zu steuern und erfordert weniger CSS Aufwand für ein angepasstes Layout
Die Umsetzung von Flex und Grid Layout in Bootstrap 5 bietet vielfältige Möglichkeiten, sparsamen CSS-Code zu schreiben, weil sich viele Elemente nun schon per HTML-Quelltext sauber aufbauen lassen. In den letzten Tagen habe ich ein Kundenprojekt von Bootstrap 3.3.2 auf Bootstrap 5.1 gehoben. Bei der alten Version gab es jede Menge Aufwand, um mehrere Spalten nebeneinander in einer passenden Höhe anzuordnen. All dies kann man nun bequem über Grid und Gutter erreichen. Dazu vermeidet man weiße Flächen, weil der Text zu kurz ist, oder Buttons über dem Bild, weil die Spalte sich nicht automatisch anpasst... All dies Beispiele für Anwendungen eines Grid Layout.
Der Umstieg von Bootstrap 3 auf 4 brachte mehrere Verbesserungen mit sich. Bootstrap 5 ist ein weiterer deutlicher Schritt nach vorne.