27. Oct 2015

Felix Salcher

4 Min.

Bootstrap 4 alpha

Bootstrap v4 steht vor der Tür! Naja, fast. Am 19. August, genau vier Jahre nach Veröffentlichung von Bootstrap v1 kündigten die Macher des beliebten CSS Frameworks mit Version 4 einen kompletten Reboot an.

Als großer Bootstrap Fan warf ich sofort einen Blick auf die neue Version und habe für euch die wichtigsten Änderungen zusammengefasst. Wichtig ist zu sagen, dass sich Bootstrap v4 aktuell noch in einem frühen Status befindet und sich die in diesem Blogpost erwähnten Fakten jederzeit ändern können.

Wichtige Änderungen

Die größte Änderung, die mit Bootstrap v4 auf die Welt der Webentwicklung und -gestaltung zukommt, ist die Umstellung von Pixel auf em und rem. Dies bietet eine höhere Flexibilität, bringt allerdings auch den Fall des Internet Explorer 8 Supports mit sich. Projekte, bei denen dieser Support vorausgesetzt wird, müssen also leider auf die neue Version verzichten.

Weiters ist Version 4 die erste Bootstrap Version, die komplett in SASS geschrieben wurde, während die dritte Generation noch in Less umgesetzt war. Aktuell ist laut Bootstrap Team kein Less Port für V4 geplant. Interessant ist auch, dass @mdo (der Entwickler hinter Bootstrap) auf Twitter sein Interesse für PostCSS geäußert hat und es für wahrscheinlich hält, dass Version 5 in PostCSS geschrieben werden wird wird:

Auch am Gridsystem haben die Entwickler gefeilt. So wurde ein zusätzlicher Grid-Breakpoint für sehr kleine Geräte (z. B. Smartphones) eingeführt, der mehr Kontrolle - gerade bei „mobile first“ Ansätzen - liefern soll.

Die Komponenten Panel, Thumbnail und Well wurden durch die Card ersetzt. Die Card ist eine Komponente, die vor allem durch Googles Material Design Guideline an Popularität gewonnen hat und als multifunktionaler und flexibler Container fungiert.

Alle in Bootstrap enthaltenen Javascript Komponenten (Scrollspy, Collapse, …) wurden in ES6 von Grund auf neu geschrieben. Das Affix Plugin ist in Bootstrap v4 nicht mehr enthalten. Stattdessen wird auf einen Polyfill für position: sticky verwiesen, ein neuer CSS3 Spec.

Auch die Bootstrap Dokumentation wird mit der 4. Generation verbessert. Künftig bekommen alle Komponenten ihre eigene Seite, statt auf einer großen Seite dargestellt zu werden. Dies soll die Bedienbarkeit und das Testen einzelner Komponenten erleichtern.

Optionaler Flexbox Modus

Bootstrap v4 kommt mit optionalem Flexbox Support! In den Sass Source Files kann dieser aktiviert werden. Dies führt dazu, dass die meisten der Bootstrap Komponenten dann auf Flexbox setzen. Vor allem das Grid-System profitiert stark, wenn dieses Feature genutzt wird. Dank Flexbox kann nämlich auf floats und clearfixes verzichtet werden. Jedoch müssen Nutzer des Flexbox-Modus sich dann auch von Internet Explorer 9 verabschieden.

Fazit

Bootstrap macht mit Version 4 viel Boden gut. Der Wechsel zu rem und em war eine wichtige Weiterentwicklung, um wirklich „responsive“ zu werden. Ein Schritt, den andere Frameworks wie Foundation schon in früheren Versionen genommen haben. Der Wechsel von LESS zu SASS zeigt die stetig steigende Popularität von SASS.

Die Neuauflage wirkt wie ein Frühjahrsputz für Bootstrap. Unnötige oder nicht mehr zeitgemäße Komponenten werden durch moderne, flexible Alternativen ersetzt. Wer nicht auf Internet Explorer 8 Support angewiesen ist, sollte auf jeden Fall auf Version 4 umsteigen, sobald der erste Release veröffentlicht wird.