Bootstrap v5 – Was gibt’s Neues?

Am 13.05.21 kam endlich wieder eine neue stabile Bootstrap Version (v5.0.1) und wir wollen euch aus diesem Anlass gerne aufzeigen was außer dem neuen Logo und der aufgehübschten Dokumentation seit Version 5 auf euch wartet. Bootstrap ist ein Frontend-CSS-Framework und stellt ein modernes Werkzeug für das Webdesign dar. Es arbeitet auf Basis von HTML und CSS und bietet zusätzlich die Möglichkeit JavaScript-Erweiterungen einzubinden.

Neuer Website-Generator

Der noch in Bootstrap v4 enthaltene auf Ruby basierende Jekyll gehört zwar zu den beliebtesten seiner Art, jedoch kehrt man ihm nun zugunsten des in Go basierenden Hugo den Rücken. Die Programmiersprache Go bietet in diesem Falle den Vorteil, dass bei der Nutzung von Jekyll immer eine Installation von Ruby beim Anwender vorhanden sein muss und Go keine Einrichtung erfordert. Durch den Wechsel soll ebenfalls ein Performance Zuwachs erzielt werden. Hugo selbst betitelt sich als „The world’s fastest framework for building websites”.

Kleine und schnelle Projekte

Die Projekte werden kleiner und performanter! Was größtenteils daran liegt, dass der Support wie zum Beispiel für den Internet Explorer eingestellt wurde. Denn dieser kann nicht mit den neusten JavaScript-Methoden umgehen und brauchte dafür immer einige Hilfen. Außerdem wird die JQuery Bibliothek nicht mehr als Dependency enthalten sein. Sie ist ganz einfach obsolet geworden, da das Framework die gleiche Arbeit verrichten kann, ohne die Bibliothek zu beinhalten. Das wird für erfahrene Bootstrap-Nutzern trotzdem eine Umgewöhnung sein.

Überarbeitete Dokumentation

Die Dokumentation wurde um einen Customize-Bereich erweitert, aus dem hervor geht, wie Bootstrap oder einzelne Elemente individualisiert bzw. erweitert werden. Zusätzlich wurde der Bereich für Formulare überarbeitet. Formulare lassen sich jetzt noch einfacher erstellen und die einzelnen Komponenten dafür, wie Buttons oder Checkboxen, lassen sich noch präziser modellieren. Das Farbsystem wurde ebenfalls verbessert und bietet deutlich mehr Farben direkt in der Codebase.

Sass und die Utilities

Sass und Less sind den meisten wohl bekannte Stylesheet-Sprachen. In diesen kommen Properties bzw. Variablen zum Einsatz, die das Gestalten mit jenen Sprachen für den Anwender um ein Vielfaches vereinfachen. Diese CSS Custom Properties erhalten nun auch kompletten Einzug in Bootstrap v5, nachdem die v4 schon mit einigen Root-Variablen (für Farben und Fonts) ausgestattet war. Genauer gesagt wird nun Dart Sass fokussiert (vorher LibSass).

Eine neue Utility-API ist nun dafür zuständig den Entwicklern ihre individuellen Utilities in Bootstrap bereitzustellen. So können eigene Utilities hinzugefügt werden, aber auch die von Haus aus enthaltenen entfernt werden. Die Syntax beruht auf Sass.

Neue Komponenten:

Offcanvas:

Ist eine neue Seitenleistenkomponente, die am Rand eines Ansichtsfenster angezeigt werden kann und Schaltflächen enthalten, sowie bestimmte Elemente triggern kann.

Akkordeon:

Die vorherige .card Akkordeon-Komponente wurde durch eine völlig neue .accordion-Komponente ersetzt. Diese soll dabei helfen viele Fehler, die bisher mit der Komponente aufgetreten sind, zu verhindern und die Nutzung zu vereinfachen.

Responsive Font Sizes by default:

Aufgrund der vielen verschiedenen Ausgabegeräte und Plattformen zur Wiedergabe der Webseiten heutzutage, aktiviert Bootstrap 5 standardmäßig die Responsive Font Sizes (RFS). Mit der RFS-Engine wird aber nicht nur die Typografie der Webseite an die Auflösung des Ausgabegerätes angepasst, sondern nahezu alle in CSS beschrieben Eigenschaften.