Twitter Bootstrap: Web-Apps per Toolkit

Neue Geräteklassen und ständig modernere Browser zwingen dazu, selbst längst etablierte (Markup-)Sprachen wie HTML oder CSS zu überarbeiten. Einst angetreten, um Texte und Bilder zu strukturieren und in einem verteilten System zu verlinken, haben sich HMTL, CSS und auch JavaScript heute neu aufgestellt. Mittlerweile ist das Triumvirat angetreten, Informationen nicht nur darzustellen, sondern auch gestalterisch wie funktional zum Leben zu erwecken. Komplette Web-Applikationen werden mittlerweile für den Browser geschrieben und dynamisch an ein Backend angeschlossen.

Dabei wird immer weniger Code manuell geschrieben; gerade im JavaScript-Umfeld springen dafür immer mehr Bibliotheken in die Bresche – allen voran die wohl bekannteste: jQuery. Für Spezialaufgaben gesellen sich außerdem noch Plugins und Snippets dazu – viele davon auf Open-Source-Basis.

Auf Twitter aufbauen

Twitter ist ohne Frage in besonderem Maß auf Browser-Technologien angewiesen. Für den Dienst ist neben einem skalierbaren Backend insbesondere eine klare und schnelle Frontend-Gestaltung wichtig, um Twitter effizient betreiben zu können. Um diesen Anforderungen gerecht werden zu können, entwickelte das Unternehmen frische Ansätze – und damit das Konzept Bootstrap [1].

Das Framework ist mittlerweile in Version 2.0 in Twitters Developer-Kanal veröffentlicht worden; über diesen Weg wurden zuvor bereits andere Open-Source-Projekte verbreitet [2]. Denn wie einige andere Firmen (etwa Google oder Yahoo) veröffentlicht auch Twitter Teile seiner Software zur freien Verfügung – ein Trend, der für die Innovationskultur der digitalen Wirtschaft steht.

Der Hype um Bootstrap zeigt sich dabei nicht nur an dem entstandenen Medienecho, sondern auch an der Intensität, mit der an Bootstrap gearbeitet wird. Allein in der Zeit der Erstellung dieses Artikels wurden die Bibliotheken variiert und diverse neue Features von den Hauptentwicklern Mark Otto und Jacob Thornton hinzugefügt.

Less is more

Im Kern ist Bootstrap pures CSS. Es funktioniert wie eine Toolbox, aus der man sich bedienen kann, da alle wesentlichen Elemente schon definiert sind. Um den Umgang mit an sich unübersichtlichem und redundantem CSS-Code zu vereinfachen, setzt Bootstrap auf einen der bekannten CSS-Dialekte.

Solche Dialekte vereinfachen den Code und wandeln ihn mittels Präprozessoren in valides CSS um. Die wohl bekanntesten dieser Dialekte sind SASS [3] und LESS [4]. Sie erlauben beispielsweise Vererbungen und einfache Wiederholungen von Textblöcken – sogenannte „Mixins“. Auch Konstrukte einer echten Programmiersprache wie Verzweigungen und Schleifen lassen sich mit den CSS-Dialekten realisieren [5].

Der große Unterschied zwischen SASS und LESS ist die Art, wie die Präprozessoren eingesetzt werden. Bei beiden können diese als eigenständige Applikationen auf der Entwicklungsmaschine laufen oder vom Server zur Laufzeit ausgeführt werden. Im Fall von LESS kann der Präprozessor allerdings auch als JavaScript-Bibliothek in die Seite selbst importiert werden, womit – ähnlich wie bei CSS selbst – keine übersetzende Applikation mehr nötig ist.

Für Twitter Grund genug, in Bootstrap auf LESS zu setzen. Doch egal, für welchen Dialekt man sich entscheidet, Voraussetzung ist in jedem Fall ein tiefgreifendes CSS-Verständnis. Und genau hier setzt Bootstrap an, indem es auf Basis von LESS eine Art „Best Practice“ liefert, CSS zu gestalten.

Responsive Webdesign

Seit Version 2.0 Responsive Webdesign unterstützt, hat für viele Entwickler die Attraktivität von Bootstrap deutlich zugenommen [6]. Dieser Begriff beschreibt ein Gestaltungskonzept, das darauf abzielt, Webseiten auf jedem Endgerät und für die entsprechende Auflösung optimiert darzustellen. Im günstigsten Fall erspart man sich damit die Erstellung verschiedener Varianten und damit mehrfache Templates und Pflege.

Technisch gesehen geht es dabei im Wesentlichen um den Einsatz sogenannter Media Queries – in CSS hinterlegte Weichen, um unterschiedliche Design-Ausprägungen bei verschiedenen Viewport-Größen zu ermöglichen. Seiten, die „responsive“ gebaut wurden, erkennt man auf einem Desktop-Computer meist daran, dass sich beim Verändern der Browsergröße Elemente neu skalieren und/oder sich anders anordnen, um bei jeder Fenstergröße ein stimmiges Bild abzugeben.

Weiterlesen auf Seite 2 »