Vorheriger Artikel Nächster Artikel

Twitter Bootstrap: Web-Apps per Toolkit

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

Digital-Dienstleister stehen vor zahlreichen Herausforderungen: auf der Höhe der Zeit bleiben, Hypes berücksichtigen, Know-how aufbauen und es entsprechend wiederverwenden. Im Bereich der Frameworks macht derzeit besonders eines von sich reden: 2.0. Das Open-Source-Framework aus der Entwicklungsabteilung des Microblogging-Dienstes Twitter behauptet, modern, schnell und vor allem wiederverwendbar zu sein. Hält es diese Versprechen?

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].

dms 1647e5fb1cf823c9d6d229916dd14e57
Twitters Bootstrap-2.0-Startseite ist ebenfalls mit Bootstrap gebaut. Man kann sich die Beispiele anschauen und durch Skalierung des Browsers einschätzen, wie sich die Komponenten im Responsive Design verhalten.

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.

1 3
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
7 Antworten
  1. von Nader am 14.11.2012 (17:04 Uhr)

    Bootstrap ist ganz cool sofern man sich auf die Standard-Maße konzentrieren kann, bzw. das Framework etwas mehr customized.
    Was auch gut funktioniert und schon mal besser ist als non-responsive ist vorhandenen Code mit ca. 50-100 Zeilen Media Queries Code zu erweitern, der Elemente entsprechend anders anordnet.

    Antworten Teilen
  2. von Marten am 14.11.2012 (17:58 Uhr)

    Als Alternative fällt mir da noch ZURB Foundation ein... http://foundation.zurb.com/

    Antworten Teilen
  3. von André Köbel am 14.11.2012 (18:23 Uhr)

    Schöner Artikel, #12 ist aber falsch verlinkt. ;)

    Antworten Teilen
  4. von cephei am 15.11.2012 (05:08 Uhr)

    Ich verwende Bootstrap im Zusammenhang mit TYPO3:
    Bootstrap und Fluidtemplate und TypoScript gemeinsam in einer Extension als Library für alle Projekte. Das macht das System extrem Flexibel.

    1. Fluidtemplate: Alles aus der Fluid Library ins Template File importieren, was man braucht.
    - header, content, teaser, footer
    Die vorbereiteten FluidTemplates sind bereits auf die Bootstrap Klassen ausgelegt und können nur noch ausgewählt werden.

    2. TypoScript Library: Alle TS aus der Library holen, die benötigt werden und in einem File includen, welches dann im TYPO3 Backend importiert wird.
    Im TypoScript werden alle Bootstrap JavaScripts aus der Bootstrap Library importiert.

    3. CSS Styles für das jeweilige Projekt anpassen und Content in TYPO3 hinzufügen.

    So hat man ganz leicht eine responsive Templating Extension in TYPO3, welche immer wieder verwendet und erweitert werden kann.

    Antworten Teilen
  5. von Lars Budde am 15.11.2012 (08:50 Uhr)

    @Andrè Vielen Dank für die Info, Link Nr. 8 habe ich gerade (im Text) angepasst. Zum Zeitpunkt der Heftveröffentlichung waren die Seiten offenbar noch unter einer anderen URL erreichbar.

    Antworten Teilen
  6. von W4rl0ck am 15.11.2012 (09:45 Uhr)

    Die Info's in dem Artikel sind ein teilweise ein bischen veraltet. Die beiden Bootstrap Entwickler haben Twitter vor einiger Zeit verlassen.

    Hier ein Link zu dem Blogpost: http://blog.getbootstrap.com/2012/09/29/onward/

    Das verlinkte Blog (https://dev.twitter.com/blog/bootstrap-twitter) wird wohl schon länger nicht mehr verwendet.. der aktuelle Link ist: http://blog.getbootstrap.com/

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Apps
Bootstrap/386: Umfangreiches Bootstrap-Theme im Retro-Look
Bootstrap/386: Umfangreiches Bootstrap-Theme im Retro-Look

Retro-Fetischisten und IT-Liebhaber könnten mit dem neuen „Bootstrap/386“-Theme voll auf ihre Kosten kommen. Damit sehen Webseiten aus wie klassische User-Interfaces in den 80er- und 90er-Jahren. » weiterlesen

Bootstrap: Mit diesen 10 Tools und Erweiterungen holst du mehr aus Twitters Framework raus
Bootstrap: Mit diesen 10 Tools und Erweiterungen holst du mehr aus Twitters Framework raus

Bootstrap 3 von Twitter bietet eine ausgezeichnete Grundlage für die Webentwicklung. Wir stellen euch zehn Tools und Erweiterungen vor, mit denen ihr noch mehr aus der aktuellen Version rausholt. » weiterlesen

Bootstrap 3.1 ist da: Wir zeigen euch die Neuerungen
Bootstrap 3.1 ist da: Wir zeigen euch die Neuerungen

Bootstrap 3.1 steht ab sofort zum Download bereit. Zu den neuen Features gehört unter anderem ein offizieller Sass-Port. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen