c't 5/2016
S. 174
Praxis
CSS-Frameworks
Aufmacherbild

Fertig-CSS

Webprojekte mit Bootstrap oder Foundation

Bei der Gestaltung von Web-Oberflächen fallen immer wieder die gleichen Aufgaben an. CSS-Frameworks wie Bootstrap und Foundation nehmen dem Entwickler dabei viel Arbeit ab.

Eigentlich könnte eine HTML-Seite auch ohne Stylesheets auskommen, aber leider sehen die Voreinstellungen der Browser nicht nach gesundem Minimalismus aus, sondern nach einer kaputten Seite. Und so fängt jedes neue Webprojekt mit den immer wieder gleichen langweiligen CSS-Grundlagen an: Nimm eine serifenlose Schrift, zieh die Zeilen nicht über die ganze Breite eines 23-Zoll-Monitors, unterstreich Links nur beim Überfahren, setze vernünftige Abstände und Schriftgrößen …

Es ist naheliegend, für solche Zwecke eine Fertiglösung zu nehmen. Diese kann je nach gestalterischem Ehrgeiz mit minimalen Anpassungen bereits als finales Stylesheet dienen oder eine solide Grundlage für komplett eigene Entwürfe bilden. Denn CSS-Frameworks nehmen dem Entwickler nicht nur lästig-triviale Alltagsaufgaben ab, sondern schaffen auch die Grundlagen für Komplexeres wie Layout-Grids oder responsives Design.

Das von Twitter 2011 erfundene Bootstrap ist auf diesem Gebiet ganz klar der Champion – zumindest in der Schwergewichtsklasse. Es hat früher beliebte CSS-Frameworks wie YAML, Blueprint oder 960 Grid System vom Platz an der Sonne verdrängt. Wichtigster Herausforderer ist das ungefähr gleich alte Foundation; es entstand als Projektvorlage in der Webdesign-Agentur Zurb im Silicon Valley. Außer diesen beiden setzen Webentwickler heute vor allem kompakte Lösungen ein – Beispiele dafür sind HTML5 Boilerplate und Skeleton.