Bastian Bechtle 29. Oktober 2013

Bootstrap 3: Warp-Geschwindigkeit für CSS-Selektoren und andere Neuerungen

Das bekannte Frontend-Framework Bootstrap, entwickelt im Hause Twitter, ist vor Kurzem in der Version 3.0.0. veröffentlicht worden. Kenner schätzen Bootstrap in der Version 3.0 aufgrund des strikten Mobile-First-Ansatzes und des damit verbundenen „Easy Goings“ bei der Entwicklung für das schier endlose Heer von mobilen Endgeräten, von denen jedes für sich eigene Darstellungsmacken mitbringt.

bootstrap

Die neue Bootstrap-Variante wurde innerhalb von 9 Monaten gestaltet, entwickelt und fertig gestellt. Das minifizierte CSS wurde um mehr als 20% von 127kb auf 97kb reduziert. Die neue Bootstrap-Version kommt außerdem mit einem optimierten Box-Modell sowie einem neuen, spezifischen dreiteiligen Grid-System, welches die entsprechenden Breakpoints für Smartphones, Tablets, Desktops und breite Desktops gleich mitbringt. Bootstrap antizipiert und behebt durch diese 3 Standardklassen, die Breakpoints für „small“ (Smartphones etc.), „medium“ (Tablets, Phablets etc.) und „large“ (Desktops, Extra-large Desktops) setzen, sowie das 12er-Grid das lästige Erstellen von separaten Stylesheets oder zusätzlichen Media Queries.

Die Neuerungen sind dabei so beträchtlich, dass der Sprung der Versionierung – von 2.3.2. auf 3.0.0. – ebenfalls größer ausgefallen ist.

Lässiges Schreiben von Stylesheets mit LESS

Zu den weiteren wichtigen Neuerungen gehört die Integration des CSSFrameworks LESS: Mit LESS wird CSS um Variablen, Mixins, Operationen und Funktionen erweitert; so lässt sich beispielsweise ein hexadezimaler Farbwert wiederverwenden, in dem er in eine Varable wie z.B. @color geschrieben wird – was widerrum wiederholtes Nachschauen des Hex-Wertes sowie weitere kleinere Lästigkeiten erspart und ganz nebenbei noch die Geschwindigkeit erhöht, mit der die gesamte Softwareapplikation kompiliert wird.

Darüber hinaus bietet Bootstrap 3.0 neues Design und ein neues Theme. Die Javascript-Plugins wurden ebenfalls umgeschrieben.

Glyphicon-Fonts auf der Basis einer Schriftfamilie

Ein weiteres, äußerst interessantes Feature sind die Glyphicon Fonts. Sie wurden wieder ins Projekt geholt und die Bilder durch eine Schriftfamilie ausgetauscht, mit insgesamt 40 neuen Glyphen – das erspart viele Lästigkeiten bei der Implementation von Icons, die ganz nebenbei – durch die Verwendung als Schriftfamilie – nahezu beliebig skalierbar sind.

glyphicons

Es wurden einige Komponenten hinzugefügt, beispielsweise die Panels und gruppierten Listen, andere entfernt, wie das Akkordeon – es wurde durch zusammenklappbare Panels ersetzt; auch Untermenüs und einige andere Komponenten wurden entfernt. Viele Klassennamen wurden umgeschrieben und aktualisiert.

Vor der Dokumentation haben die Bootstrap-Entwickler ebenfalls nicht Halt gemacht und diese um einige wichtige Aspekte erweitert. Dazu zählen vertiefende Abhandlungen und nützliche Informationen rund um die Themen Bootstrap-Komponenten, die Browserunterstützung, Lizenzfragen, Barrierefreiheit sowie weitere Aspekte.

Bootstrap 3 macht Schluss mit alten Zöpfen

Die beste Nachricht der Bootstrap-Entwickler ist jedoch zweifellos, dass die Unterstützung für Internet Explorer 7 aufgegeben worden ist. Die Bootstrap-Entwickler folgten ganz den rauhen Gesetzen des Marktes. Da für IE 7 zweifellos eine Oldtimer-Zulassung benötigt wird, muss er nicht mehr zwangsläufig unterstützt werden, mag sich das Entwicklerteam gedacht haben. Firefox 3.6 wird ebenfalls nicht mehr unterstützt; die Unterstützung von IE 8 ist gewährleistet, allerdings muss zur Unterstützung das Javascript-Framework Respond.js eingebunden werden, damit die Media Queries korrekt funktionieren.

Die Navbars und Panels benötigen nun die .navbardefault und .panel-default-Klasse für die jeweilige Standardvariante. Die berühmten Bootstrap-Jumbotrons gehen nun über die volle Breite des Viewports und beinhalten einen weiteren Container.

Ein vollständiger Baukasten für die Entwicklung von Responsive und Mobile Websites

Bootstrap 3 verfolgt den „Responsive“ und „Mobile First“-Ansatz konsequent. Die für die mobile Entwicklung notwendigen Komponenten sind bereits vollständig eingebaut und bedürfen keiner weiteren Stylesheets. So erklärt sich der Erfolg von Bootstrap durch die Fokussierung auf das Notwendige: Minimaler Aufwand bei gleichzeitig bestmöglicher Performance, Reduzierung auf Klassen, die die Breakpoints für automatisch regeln, schlankes CSS durch den Einsatz von Mixins und Variablen via LESS – alles zusammen der ideale Ansatz für ein performantes Frontend-Framework, welches sich auf ideale Art und Weise mit mächtigen Backend-Frameworks und Applikationen verweben lässt.

Natürlich gibt es für die populärsten Content Management Systeme, wie zum Beispiel WordPress und Drupal, bereits Bootstrap-Themes, die ein Layout anhand des Bootstrap-Grids ermöglichen. Der Einsatz von Bootstrap ist leicht verständlich und sehr intuitiv; Beginner in der Web-und Mobileentwicklung werden ebenfalls gut und schnell mit dem Framework zurechtkommen.

Die schnelle Verbreitung und Übernahme von Bootstrap in der Entwicklercommunity bestätigt, dass sich mit Bootstrap sehr gut performante und skalierbare Webapplikationen bauen lassen. Entwickler von Webapplikationen, die mit Ihren Applikationen auch „nach vorn hin“, also auf mobilen Endgeräten eine „bella figura“ machen wollen, sollten dieses Framework in ihren Werkzeugkasten aufnehmen.

(dpe)

Bastian Bechtle

Bastian Bechtle ist passionierter Webentwickler und als Freiberufler für eine Reihe von Unternehmen im Bereich Frontent-Webentwicklung tätig. Mit seiner Firma "Die Web Agenten UG" setzt er von responsiven Websites bis zu mobilen Apps alles um, was einer gewissen Expertise bedarf.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. > Zu den weiteren wichtigen Neuerungen gehört die Integration des CSSFrameworks LESS

    Das ist aber nicht neu, auch das CSS für Bootstrap 2.x wurde mit LESS generiert. Neu ist lediglich der Online-Configurator, auf den hier aber gar nicht eingegangen wird.

    > Glyphicon-Fonts auf der Basis einer Schriftfamilie

    Es stimmt natürlich, das Icons auf Basis von Fonts gravierende Vorteile haben, aber auch das galt schon für Bootstrap 2.x für das es etliche alternative Iconsets mit Icon-Fonts gab, z.B. Font-Awesome.

    Neu ist, das nun endlich auch Bootstrap von Haus aus auf ein Font-Iconset. Leider wurde dabei aber auch gleich das nachträgliche Austauschen des Fontsets wesentlich erschwert, da nun nicht mehr allgemeine Klassennamen wie z.B. „icon-search“ verwendet werden, sondern Fontset-speziefische Namen wie z.B. „glyphicon-search“. Das bringt zwar den Vorteil, das man jetzt leichter mehrere Iconsets parallel einsetzen kann, will man aber das komplette Iconset austauschen, ist man gezwungen den HTML-Code anzupassen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.