Bootstrap 5: Die wich­tigs­ten Neue­run­gen

Bootstrap gehört zu den be­lieb­tes­ten Frame­works für die Frontend-Ent­wick­lung von Websites. Das Tool stellt Vorlagen für CSS und HTML bereit, mit denen man relativ un­kom­pli­ziert modernes Webdesign umsetzen kann. Layout, Schrift­ar­ten, Buttons und ver­schie­dens­te Na­vi­ga­ti­ons­ele­men­te lassen sich schnell und einfach gestalten und plat­zie­ren.

Ur­sprüng­lich für Twitter ent­wi­ckelt, 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 er­schie­nen – zumindest als Alpha.

Seit dem 16. Juni 2020 ist Bootstrap 5 bereits in einer Alpha-Version verfügbar, die noch als ex­pe­ri­men­tell gilt. Ein großer Teil der geplanten Än­de­run­gen sind in ihr bereits umgesetzt, die Ent­wick­lung ist aber noch nicht ab­ge­schlos­sen. Gleich­zei­tig er­schei­nen auch weiterhin Patches für Version 4 des beliebten Frame­works. Einen Release-Zeitplan hat das Team nicht ver­öf­fent­licht. So kann man derzeit noch nicht sagen, wann eine erste Beta- und schließ­lich die finale Version er­schei­nen wird. Beim Vorgänger lagen aber zwischen dem Alpha-Release und der end­gül­ti­gen Fassung ungefähr 2,5 Jahre.

Das Bootstrap-Team hat mehrere hundert Än­de­run­gen für die neue Version an­ge­kün­digt. Viele davon sind kleinere Ent­wick­lun­gen im Hin­ter­grund. Es gibt aber auch ein paar Neu­ig­kei­ten, die für Nutzer des Open-Source-Frame­works äußerst bedeutsam sind.

Ei­gent­lich schon lange ab­ge­mel­det, klammern sich wenige Nutzer immer noch an den Microsoft-Browser Internet Explorer. Die Anzahl der Benutzer ist aber in­zwi­schen so klein geworden, dass Bootstrap 5 keinerlei Un­ter­stüt­zung mehr für diesen Browser bietet. Da der Internet Explorer in­zwi­schen veraltet ist und von Microsoft – zugunsten von Edge – nicht mehr wei­ter­ent­wi­ckelt wird, musste man in der Ver­gan­gen­heit sehr viel – ei­gent­lich unnötigen – Code hin­zu­fü­gen.

Mit dem Wegfall der Un­ter­stüt­zung für den Internet Explorer, werden Projekte in Bootstrap kleiner. Grund dafür: Der veraltete Microsoft-Browser kann nicht mit neuen Ja­va­Script-Methoden umgehen und brauchte deshalb immer zu­sätz­li­chen Aufwand. Dieser schlug sich sowohl in der Da­tei­grö­ße als auch im Zeit­auf­wand für das Webdesign nieder.

Um sich die Arbeit mit Ja­va­Script zu ver­ein­fa­chen, nutzen viele Web­de­si­gner und Ent­wick­ler die freie Bi­blio­thek jQuery. Auch in Bootstrap war diese jahrelang enthalten. Nun hat man sich aber ent­schie­den, die Un­ter­stüt­zung mit der neuen Version zu beenden. Man geht davon aus, dass Nutzer von Bootstrap 5 nicht mehr auf die Bi­blio­thek an­ge­wie­sen sind. Auch ohne jQuery lassen sich mit dem Framework schnell und einfach die gleichen Effekte wie bisher ge­ne­rie­ren: Dafür verwendet man entweder wei­ter­ent­wi­ckel­ten Ja­va­Script-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 Da­tei­grö­ßen und damit auch die La­de­zei­ten sollen geringer ausfallen, was wiederum zu einer ver­bes­ser­ten User Ex­pe­ri­ence führt.

Da der Internet Explorer nun nicht mehr un­ter­stützt wird, kann sich Bootstrap 5 noch mehr auf moderne Webdesgin-Techniken fo­kus­sie­ren. Dazu gehören auch CSS Custom Pro­per­ties: Diese Technik war bereits seit längerem in Sass und Less bekannt, hat nun aber auch in das klas­si­sche CSS Einzug gefunden. Die Pro­per­ties (oft auch als Variablen be­zeich­net) machen das Gestalten mit CSS sehr viel einfacher. Außerdem lassen sich damit moderne Layout-Varianten rea­li­sie­ren.

Bereits in Version 4 des Frontend-Frame­works konnte man seine Layouts mithilfe von CSS Grids erstellen. Dies bleibt auch in Bootstrap 5 so, es gibt aber Er­wei­te­run­gen. Mit xxl hat das Team eine zu­sätz­li­che Grö­ßen­ord­nung ein­ge­führt. Außerdem hat man weitere Klassen für Vertical Spacing ge­schaf­fen.

Bisher war Bootstrap eng verbunden mit dem Static Site Generator Jekyll. Das Tool hat al­ler­dings den Nachteil, dass zur Nutzung beim Designer Ruby in­stal­liert sein muss. Deshalb hat sich das Ent­wick­ler-Team ent­schie­den, zu Hugo zu wechseln. Dieses Werkzeug ist in der modernen Sprache Go verfasst und benötigt keine weitere Software im Hin­ter­grund. Außerdem ver­spricht Hugo, um einiges schneller zu sein als seine Kon­kur­renz.

Um die Fle­xi­bi­li­tät zu steigern und die Wei­ter­ent­wick­lung von Bootstrap noch weiter vor­an­zu­trei­ben, gibt es in Bootstrap 5 einen neuen Weg, eigene Libraries und Toolkits ein­zu­bin­den. Hatte man zuvor nur die Mög­lich­keit, per Klasse externe Bi­blio­the­ken und Werkzeuge in ein Projekt ein­zu­glie­dern, wurde nun eine eigene Schnitt­stel­le mit Sass ent­wi­ckelt. Darüber lassen sich sowohl eigene Utilities einbinden als auch die von Bootstrap ge­lie­fer­ten entfernen, sollte man sie nicht für das eigene Projekt ge­brau­chen.

Das in­zwi­schen enorm an­ge­wach­se­ne Bootstrap-Projekt muss auch ver­nünf­tig do­ku­men­tiert werden. Nur so können sich neue Nutzer – aber auch erfahrene Bootstrap-Designer – umfassend in das Framework ein­ar­bei­ten. Deshalb hat das Team die Do­ku­men­ta­ti­on auf­ge­räumt. Neu hin­zu­ge­kom­men ist der Customize-Bereich, indem erklärt wird, wie man Bootstrap ei­gen­stän­dig erweitern kann. Auch eine neue Farb­pa­let­te ist hin­zu­ge­kom­men, die noch mehr Mög­lich­kei­ten zur Ge­stal­tung direkt innerhalb der Codebase bietet.

Zudem ist auch der Form-Bereich über­ar­bei­tet worden. Man findet In­for­ma­tio­nen zum Erstellen von For­mu­la­ren nun um einiges schneller. Gerade in diesem Kontext hat sich auch in der neuen Version einiges getan: Mit Bootstrap 5 sind die Mög­lich­kei­ten bei der Ge­stal­tung von Kon­troll­ele­men­ten (Buttons, Kästchen, Ra­dio­schal­ter …) weitaus flexibler.

Nicht alle geplanten Än­de­run­gen sind bereits in der ersten Alpha-Version erhalten. Die Ent­wick­ler haben aber bereits ein paar ent­schei­den­de Ent­wick­lun­gen an­ge­kün­digt, 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 un­ter­stützt werden.
• offcanvas-Menü: Mit offcanvas sollen noch mehr Mög­lich­kei­ten zur Ge­stal­tung von Menüs zur Verfügung stehen.
• SVG in HTML: Derzeit werden SVG-Dateien über CSS ein­ge­bun­den, doch man möchte statt­des­sen den HTML-Code dafür verwenden.