zurück zum Artikel

Typographie, Grid-System und mehr: Bootstrap von Twitter

Robert Lippert

Eine Webseite wie die Großen. Mit Bootstrap fasst Twitter seine Design-Erfahrung in einem Basis-Template für moderne Web-Apps zusammen.

Mit aktuell über 350 Milliarden übermittelten Tweets [1] am Tag hat sich Twitter zu einem nicht unpopulären Nachrichtendienst entwickelt. Dabei hat man im Laufe der letzten Jahre nicht nur Erfahrung mit der Echtzeitanalyse seiner Daten [2] sammeln können, sondern auch beim Web Design viel dazugelernt. Seine in Sachen Frontend-Entwicklung gesammelte Erfahrung hat das Unternehmen jetzt zusammengetragen und in Form von Bootstrap [3] veröffentlicht.

Screenshot: Mit Bootstrap realisiertes Popover

Auch Popover sind in Twitters Bootstrap vorgesehen.

Bootstrap ist ein spezielles Toolkit, dass im Wesentlichen ein HTML- und CSS-Template (letzteres mit einer Prise LESS [4] aufgewertet) bereitstellt, in das Twitter seine Erfahrungen hat einfließen lassen. Webentwickler, die Bootstrap in ihr Frontend einbinden, sollen so auf praxiserprobte Frontend-Entwurfsmuster zurückgreifen können und unter anderem ohne größeren Aufwand ein Grid-System einbinden, das bei Twitter erprobte Styling für typographische Elemente übernehmen, Formulare und Buttons verwenden oder ihre Seiten mit Modal-Boxen, Tooltips und Popovers ergänzen.

Technisch ist das recht einfach zu bewerkstelligen, das Stylesheet lässt sich mit <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.0.0.min.css"> im HTML-Code der Webseite einbinden, gegebenenfalls muss noch LESS verlinkt werden.

Die aktuellen Dateien stellt Twitter unter der Apache-Lizenz 2.0 auf GitHub [5] zur Verfügung. Zusammen mit Bootstrap liefert Twitter auch die verwendeten LESS-Dateien aus, die entsprechend kompilierten und minifizierten CSS-Files, eine Dokumentation zum Styleguide und ein Beispiel-Seitentemplate. Getestet wurde das Toolkit unter aktuellen Versionen von Safari, Google Chrome und Firefox, künftig sollen auch ausgewählte Versionen Microsofts Internet Explorer voll unterstützt werden. (rl [6])


URL dieses Artikels:
https://www.heise.de/-1327603

Links in diesem Artikel:
[1] https://www.heise.de/news/Twitter-uebermittelt-350-Milliarden-Nachrichten-taeglich-1280515.html
[2] https://www.heise.de/news/Twitter-uebernimmt-BackType-1274261.html
[3] http://twitter.github.com/bootstrap/#
[4] http://lesscss.org/
[5] https://github.com/twitter/bootstrap
[6] mailto:rl@ix.de