Bootstrap 5: Die wichtigsten Neuerungen

Bootstrap gehört zu den beliebtesten Frameworks für die Frontend-Entwicklung von Websites. Das Tool stellt Vorlagen für CSS und HTML bereit, mit denen man relativ unkompliziert modernes Webdesign umsetzen kann. Layout, Schriftarten, Buttons und verschiedenste Navigationselemente lassen sich schnell und einfach gestalten und platzieren.

Ursprünglich für Twitter entwickelt, steht das Framework nun schon seit einiger Zeit als Open-Source-Projekt für alle kostenlos bereit. Nun ist mit Bootstrap 5 die neuste Version erschienen – zumindest als Alpha.

Seit dem 16. Juni 2020 ist Bootstrap 5 bereits in einer Alpha-Version verfügbar, die noch als experimentell gilt. Ein großer Teil der geplanten Änderungen sind in ihr bereits umgesetzt, die Entwicklung ist aber noch nicht abgeschlossen. Gleichzeitig erscheinen auch weiterhin Patches für Version 4 des beliebten Frameworks. Einen Release-Zeitplan hat das Team nicht veröffentlicht. So kann man derzeit noch nicht sagen, wann eine erste Beta- und schließlich die finale Version erscheinen wird. Beim Vorgänger lagen aber zwischen dem Alpha-Release und der endgültigen Fassung ungefähr 2,5 Jahre.

Das Bootstrap-Team hat mehrere hundert Änderungen für die neue Version angekündigt. Viele davon sind kleinere Entwicklungen im Hintergrund. Es gibt aber auch ein paar Neuigkeiten, die für Nutzer des Open-Source-Frameworks äußerst bedeutsam sind.

Eigentlich schon lange abgemeldet, klammern sich wenige Nutzer immer noch an den Microsoft-Browser Internet Explorer. Die Anzahl der Benutzer ist aber inzwischen so klein geworden, dass Bootstrap 5 keinerlei Unterstützung mehr für diesen Browser bietet. Da der Internet Explorer inzwischen veraltet ist und von Microsoft – zugunsten von Edge – nicht mehr weiterentwickelt wird, musste man in der Vergangenheit sehr viel – eigentlich unnötigen – Code hinzufügen.

Mit dem Wegfall der Unterstützung für den Internet Explorer, werden Projekte in Bootstrap kleiner. Grund dafür: Der veraltete Microsoft-Browser kann nicht mit neuen JavaScript-Methoden umgehen und brauchte deshalb immer zusätzlichen Aufwand. Dieser schlug sich sowohl in der Dateigröße als auch im Zeitaufwand für das Webdesign nieder.

Um sich die Arbeit mit JavaScript zu vereinfachen, nutzen viele Webdesigner und Entwickler die freie Bibliothek jQuery. Auch in Bootstrap war diese jahrelang enthalten. Nun hat man sich aber entschieden, die Unterstützung mit der neuen Version zu beenden. Man geht davon aus, dass Nutzer von Bootstrap 5 nicht mehr auf die Bibliothek angewiesen sind. Auch ohne jQuery lassen sich mit dem Framework schnell und einfach die gleichen Effekte wie bisher generieren: Dafür verwendet man entweder weiterentwickelten JavaScript-Code oder man schwenkt auf HTML und CSS um.

Der Verzicht sorgt dafür, dass Projekte, die mit Bootstrap umgesetzt werden, nun deutlich schlanker sind. Die Dateigrößen und damit auch die Ladezeiten sollen geringer ausfallen, was wiederum zu einer verbesserten User Experience führt.

Da der Internet Explorer nun nicht mehr unterstützt wird, kann sich Bootstrap 5 noch mehr auf moderne Webdesgin-Techniken fokussieren. Dazu gehören auch CSS Custom Properties: Diese Technik war bereits seit längerem in Sass und Less bekannt, hat nun aber auch in das klassische CSS Einzug gefunden. Die Properties (oft auch als Variablen bezeichnet) machen das Gestalten mit CSS sehr viel einfacher. Außerdem lassen sich damit moderne Layout-Varianten realisieren.

Bereits in Version 4 des Frontend-Frameworks konnte man seine Layouts mithilfe von CSS Grids erstellen. Dies bleibt auch in Bootstrap 5 so, es gibt aber Erweiterungen. Mit xxl hat das Team eine zusätzliche Größenordnung eingeführt. Außerdem hat man weitere Klassen für Vertical Spacing geschaffen.

Bisher war Bootstrap eng verbunden mit dem Static Site Generator Jekyll. Das Tool hat allerdings den Nachteil, dass zur Nutzung beim Designer Ruby installiert sein muss. Deshalb hat sich das Entwickler-Team entschieden, zu Hugo zu wechseln. Dieses Werkzeug ist in der modernen Sprache Go verfasst und benötigt keine weitere Software im Hintergrund. Außerdem verspricht Hugo, um einiges schneller zu sein als seine Konkurrenz.

Um die Flexibilität zu steigern und die Weiterentwicklung von Bootstrap noch weiter voranzutreiben, gibt es in Bootstrap 5 einen neuen Weg, eigene Libraries und Toolkits einzubinden. Hatte man zuvor nur die Möglichkeit, per Klasse externe Bibliotheken und Werkzeuge in ein Projekt einzugliedern, wurde nun eine eigene Schnittstelle mit Sass entwickelt. Darüber lassen sich sowohl eigene Utilities einbinden als auch die von Bootstrap gelieferten entfernen, sollte man sie nicht für das eigene Projekt gebrauchen.

Das inzwischen enorm angewachsene Bootstrap-Projekt muss auch vernünftig dokumentiert werden. Nur so können sich neue Nutzer – aber auch erfahrene Bootstrap-Designer – umfassend in das Framework einarbeiten. Deshalb hat das Team die Dokumentation aufgeräumt. Neu hinzugekommen ist der Customize-Bereich, indem erklärt wird, wie man Bootstrap eigenständig erweitern kann. Auch eine neue Farbpalette ist hinzugekommen, die noch mehr Möglichkeiten zur Gestaltung direkt innerhalb der Codebase bietet.

Zudem ist auch der Form-Bereich überarbeitet worden. Man findet Informationen zum Erstellen von Formularen nun um einiges schneller. Gerade in diesem Kontext hat sich auch in der neuen Version einiges getan: Mit Bootstrap 5 sind die Möglichkeiten bei der Gestaltung von Kontrollelementen (Buttons, Kästchen, Radioschalter …) weitaus flexibler.

Nicht alle geplanten Änderungen sind bereits in der ersten Alpha-Version erhalten. Die Entwickler haben aber bereits ein paar entscheidende Entwicklungen angekündigt, die in den nächsten Releases eingebaut werden sollen:

• Right-to-left (RTL): Sprachen, die von rechts nach links gelesen werden, sollen zukünftig besser unterstützt werden.
• offcanvas-Menü: Mit offcanvas sollen noch mehr Möglichkeiten zur Gestaltung von Menüs zur Verfügung stehen.
• SVG in HTML: Derzeit werden SVG-Dateien über CSS eingebunden, doch man möchte stattdessen den HTML-Code dafür verwenden.