Bootstrap: CSS- und HTML5-basiertes WebApp-Toolkit von Twitter

Bootstrap setzt auf bewährte Technologien und erfindet das Rad nicht neu

Mit einer sehr umfangreichen Github-Page zu Bootstrap meldet sich Twitter auf dem Markt der CSS-Frameworks und weiß dabei durchaus zu beeindrucken. Twitter bezeichnet seinen Werkzeugkasten als Toolkit für den Entwicklungs-Kickstart und in der Tat kümmern sich die Twitter-Developer um alle wesentlichen Aspekte beim Bau moderner Web Apps und Websites. Dabei unterstützt es die gängigen Browser und verspricht sogar Unterstützung für den IE ab Version 7.

Bootstraps Herzstück: Less und 960.gs

Die zugrundeliegenden Technologien, quasi die Basis von Bootstrap dürften allen Webentwicklern bereits bekannt sein. So kann Bootstrap Anwendungslogik im CSS unterbringen, wozu es den CSS Preprocessor Less einbindet, den man als das Herzstück von Bootstrap bezeichnen kann.

Für das Layout, das hier klassisch als Grid umgesetzt wird, verwendet Bootstrap eine auf 940 Pixel Standardbreite reduzierte Variante des populären 960.gs. Der besondere Charme des 960.gs bleibt in Bootstrap voll erhalten. Dieser besteht nämlich in der simplen Syntax für die Definition von Spaltenlayouts, die ich nahezu als natürlich sprachlich bezeichnen würde. Maximal 16 Spalten können mit Bootstrap definiert werden. Beliebige Vermischungen sind möglich, auch ein fließendes Layout lässt sich erstellen.

Typografie

Bootstrap kümmert sich um die Typografie der wesentlichen HTML-Elemente, bearbeitet jedoch keine komplexeren typografischen Aspekte, wie etwa das Setzen einer Baseline. Die Typografie dürfte aber für die allermeisten Anwendungsfälle hinreichend sein. Immerhin wurde Bootstrap im Wesentlichen für das Design des Twitterdienstes selber entwickelt und nicht für grafisch aufwändigere Sites, bei denen mit größerem Anspruch an Fragen der Typografie heran gegangen werden müsste.

Tabellen

Relativ ungewöhnlich für handelsübliche CSS-Frameworks kleineren Umfangs ist die Unterstützung von Tabellen. Hier bringt Bootstrap verschiedene einfache Designmöglichkeiten mit, die mit eingebauter jQuery-Unterstützung noch erweitert werden können. Besonders interessant finde ich die Option, Tabellenzeilen mit unter Angabe der Klasse „zebra-striped“ farblich wechselnd anzulegen. Gerade dieser Task hat mich in der Vergangenheit schon mal ein bisschen Arbeit gekostet.

Formulare

Formularelemente stellt Bootstrap in mobiltauglicher Optik vor. So lassen sich Formulare mit Schaltfläche versehen, die deutlich an von Mobilplattformen bekannte Buttons erinnern. Bootstrap ist so, wenn auch eingeschränkt, für das mobile Webdesign zu gebrauchen.

Navigation / Pagination

Hinsichtlich der Navigation legt sich Bootstrap fest. Diese ist als Topbar, also als obere horizontale Navigationsleiste fest konzipiert. Möglich ist die Verwendung von Dropdown-Listen. Das Styling der Topbar ist flexibel und kann etwa so aussehen wie die neue Google+-Topbar, lässt sich aber auch in Karteireiterform oder mit den bekannten Rounded Buttons anlegen. Eine schicke Paginierung am Fuß der Seite sorgt für Übersichtlichkeit auf Seiten mit viel Content. Twitters eigener Service lässt grüßen!

Fehlermeldungen

Erwähnenswert ist der Umgang Bootstraps mit Fehlern und Meldungen. In einer an Verkehrsampeln angelehnten, sehr sprechenden farblichen Kodierung unterrichtet Bootstrap über Fehler unterschiedlichen Schweregrads.

Popovers, Lightboxes und Tooltips

Ebenfalls aus dem Bereich mobilen Webdesigns entlehnt sind verschiedene Möglichkeiten, Interaktionen und Meldungen über Popovers zu realisieren. Interaktive Elemente kann der Designer über Lightboxes einbringen. Tooltips und Popover-Boxes bringen Zusatzinfos unter, ohne das übrige Design zu stören.

Hier noch einmal alle verwendeten Screenshots im Überblick

Bildergalerie

Alle 10 Bilder ►

Was haltet ihr von Bootstrap? Werdet ihr dem Werkzeugkasten eine Chance geben oder seid ihr bereits mehr als ausgestattet mit anderen Werkzeugen?

Weiterführende Links zu aktuellen HTML5-, Twitter- und CSS-News auf t3n.de:

• HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News
• 3D Web: Standards, Plugins und Frameworks auf einen Blick - t3n News
• HTML5: Überschriften und Einleitungen von Artikeln gruppieren - t3n News
• Mypermissions: Freigaben für Facebook, Twitter & Co. in 2 Minuten verwalten - t3n News
• CSS3: Individuelle Tooltips ohne JavaScript - t3n News