Frontend-Framework Bootstrap – Neue Funktionen der Version 4

Matthias Petri 29. Januar 2016

Wir setzen bei uns im Webdesign für Kundenprojekte bei Frontend-Arbeiten sehr gern das Framework Bootstrap ein. Die 4er Version steht in den Startlöchern. Für uns ein guter Anlass, über die Neuerungen zu Bootstrap 4 zu berichten und mit einem separaten Video-Training die Funktionsweise für modernes Webdesign mit Bootstrap zu beleuchten.

Das 2011 veröffentlichte und sehr erfolgreiche CSS-Framework der Twitter-Entwickler geht in die vierte Runde! Bereits am 19. August 2015, genau vier Jahre nach Release von Bootstrap 1, wurde die lang ersehnte, vierte Version des Frameworks angekündigt. Was diese genau verspricht, auf welche Details in Zukunft zu achten ist und warum eure Webseiten mit Bootstrap 4 im Internet Explorer 8 nicht mehr unterstützt werden, erklärt dieser Artikel.

Auch wenn Bootstrap gerade einmal fünf Jahre jung ist, hat es schon einiges erlebt. Ursprünglich als internes Framework und als Analyse- und Verwaltungswerkzeug für Twitter entwickelt, entstand aus Bootstrap über die Jahre eins der größten und bekanntesten Open-Source-Frameworks der Welt. Nun steht Version 4 in den Startlöchern und bringt viel Neues mit sich …

Aus px wird em beziehungsweise rem

Eine der wohl größten und wichtigsten Änderungen in Bootstrap 4, dem immer beliebter werdenden Frontend-Framework, ist die Umstellung der relativen Maßeinheit von Pixel (px) auf em bzw. rem (root em). Der seit CSS2 bestehende Standard em verbessert und vereinfacht die Anpassung der Website an die verschiedenen Bildschirmauflösungen (responsives Webdesign).

Erst seit CSS3 gibt es die Maßeinheit root em, welche die Wartung bei tiefen Document-Object-Modellen (DOM) erleichtert. Das Element rem bezieht sich auf die demoder demzugewiesene Schriftgröße. Mittlerweile wird die noch relativ neue Maßeinheit von allen Browsern unterstützt, was die Anpassung der Website an ein auflösungsunabhängiges Design vereinfacht.

Erweitertes und noch einfacheres Grid-System

In Bootstrap 3 gab es bisher lediglich vier Breakpoints (auch Viewports genannt). Das sind Punkte, an denen sich die gesetzten Bootstrap-Container verändern und an denen sich die Seite der jeweiligen Auflösung anpasst. Problem bisher war, dass es keine Möglichkeit für Viewports mit einer Breite kleiner als 768 px gab.

bootstrap3-grid

Die neuen, vordefinierten Größen beginnen bei einer Breite von kleiner als 544 px und enden wie gewohnt bei größer als 1200 px. Dies ermöglicht eine feinere Abstimmung der Umbrüche im Grid und erleichtert die responsive Anpassung der Website enorm. Individuelle Breakpoints können natürlich weiterhin gesetzt werden, allerdings müssen diverse Voreinstellungen von Bootstrap bei Bedarf angepasst bzw. erweitert werden.

bootstrap4-grid

Weniger ist nicht immer mehr – aus Less wird jetzt Sass

Bereits im April 2015 verkündete Mark Otto, Chefentwickler hinter Bootstrap, in einem Tweet, dass Version 4 in SCSS entwickelt wird.

twitterpost

Natürlich ist dies längst in die Tat umgesetzt worden und als Alpha-Version bereits online verfügbar. Bootstrap schmeißt den CSS-Präprozessor Less aus der neuen Version 4 raus. Stattdessen kommt die bereits weiter verbreitete Stylesheet-Sprache Sass zum Einsatz. Das soll den teils langwierigen und aufwändigen Prozess des „CSS-Schreibens“ erleichtern.

Die im Basispaket mitgelieferten SCSS-Dateien sorgen außerdem für eine größere Übersicht und machen Bootstrap 4 zu einem kompakteren und in sich abgerundeten Gesamtpaket. Moderne Code-Editoren wie z. B. Dreamweaver CC oder PhpStorm können Sass- bzw. SCSS-Dateien problemlos verarbeiten.

Grid-System jetzt mit Flexbox-Support

Die noch sehr moderne Flexbox-Variante bietet eine einfache Möglichkeit, Webseiten responsiv und gleichzeitig flexibel aufzubauen. Dabei wird ganz gezielt auf CSS-Angaben wie float, clear oder position verzichtet und lediglich mit den Flexbox-Funktionen gearbeitet.

Der Flexbox-Support ist im neuen Bootstrap-Grid-System bereits eingebaut. Die Funktion muss nur noch über einen speziellen Befehl integriert und in einer SCSS-Datei aktiviert werden. Somit kann das Bootstrap-System mit all seinen Vorteilen auch problemlos mit Flexbox betrieben werden.

Cards als neue Komponente für Wells, Thumbnails und Panels

Die seit Bootstrap 3 sehr ähnlichen Komponenten – Wells, Thumbnails und Panels – werden in der neuen Version durch Cards ersetzt. Bootstrap legt dabei viel Wert auf Übersichtlichkeit und versucht, die Anzahl der Komponenten durch diesen Schritt zu reduzieren und auf das Wesentliche zu beschränken.

cards

Cards bringt als neues Element somit auch neue Klassen und Definitionen mit, welche sich im Grunde genommen aber an der Basis der drei oben genannten Komponenten orientieren.

Keine Glyphicons in Bootstrap 4

Neben den benannten Punkten verschwinden auch die gerne benutzten Glyphicons. In der dritten Version von Bootstrap noch kostenlos im Basispaket dabei, muss man sich nun von den beliebten Font-Icon-Paketen verabschieden. Es sei denn, man erwirbt diese kostenpflichtig.

fontawesome.jpg

Es gibt aber allerhand Alternativen für dieses Problem. Die wohl bekannteste Variante dürfte FontAwesome (http://fontawesome.io/) sein, mit der nahezu identische Icons benutzt werden können. Zudem bietet FontAwesome den Vorteil, deutlich größer zu sein als die abgespeckte Version der Glyphicons. So hatten die Glyphicons nur 250 Charaktere, wohingegen FontAwesome mit über 600 Schriftcharakteren auftrumpfen kann.

Internet Explorer 8 muss draußen bleiben

Eine der erfreulichsten Nachrichten ist wohl, dass der Internet Explorer 8 nicht mehr auf der Liste der unterstützen Browser steht. Der Support ist seitens Microsoft schon seit einer ganzen Weile eingestellt. Nun zieht auch Bootstrap nach und schmeißt ihn aus der Liste. Einer der Hauptgründe für diese Entscheidung dürfte wohl der Umstieg von px auf em bzw. rem sein, die der Internet Explorer 8 nur sehr bedingt unterstützt.

Ein weiterer Grund sind die neu geschriebenen Komponenten, welche teilweise auf CSS3-Effekte setzen, die im Internet Explorer 8 nicht funktionieren.

Reboot ersetzt normalize.css und weitere Optimierungen

Die normalize.css, welche vorrangig für die HTML-Resets eingesetzt wurde, wird nun mit dem sogenannten Reboot-Modul ausgetauscht. Dabei ersetzt das Modul die CSS nicht einfach, sondern erweitert diese in vielen Bereichen und wird außerdem in einer einzigen Sass-Datei ausgeliefert.

Zudem wurden auch Optimierungen an den Komponenten und Beispielen in der Bootstrap-Guideline vorgenommen. Neben den optischen und oberflächlichen Verbesserungen wurden alle JavaScripts wie z. B. Caroussel oder Collapse (Accordion) komplett neu aufgesetzt und hinsichtlich Performance und Benutzerfreundlichkeit optimiert.

Bereits final – offizielle Bootstrap-Themes

Bootstrap bietet nun auch schon vor dem offiziellen Start der Version 4 Premium-Themes an. Diese beinhalten viele Komponenten und diverse Beispiele, Plug-ins sowie eine eigens dafür geschriebene Dokumentation. Alle Themes werden für den Preis von 99 $ (etwa 90 €) angeboten.

themes

Neben einem Dashboard gibt es auch zwei alternative Themes, wobei sich das eine Beispiel eher als Unternehmens- oder Marketingseite und das zweite eher als Grundlage für Apps anbietet. Alle drei Vorlagen wurden von den Entwicklern selbst geschrieben und sehr sorgfältig aufgebaut. Außerdem dürfen die Themes nach Erwerb für diverse eigene Projekte verwendet werden.

Bootstrap 4 wartet also mit vielen Neuerungen auf. Viele zum Vorteil, einige im Alltäglichen gebraucht, andere vielleicht auch von Nachteil. Im Großen und Ganzen kann sich die bisherige Alpha-Version echt sehen lassen. Wir sind gespannt, was bis zum finalen Release-Termin, der im Übrigen noch nicht bekannt gegeben wurde, noch so alles passiert.

Empfehlung des Video-Training: Bootstrap für modernes Webdesign

Wer mehr wissen will zu Bootstrap, sollte sich unser fisch erschienenes Video-Training anschauen. In 2,5 Stunden erfährst du, wie du Bootstrap für modernes Webdesign einsetzt – inkl. der Neuerungen der Version 4.

Bootstrap-Video-Training

Quellen und Weiterführendes:
https://de.wikipedia.org/wiki/Bootstrap_%28Framework%29
http://v4-alpha.getbootstrap.com/layout/grid/
http://v4-alpha.getbootstrap.com/components/card/
http://getbootstrap.com/css/#grid
http://getbootstrap.com/components/#thumbnails
http://themes.getbootstrap.com/
http://fontawesome.io/

Zum Seitenanfang