ZURB Foun­da­ti­on: Das CSS-Framework für re­spon­si­ve Frontends

Seit 1998 un­ter­stützt die ame­ri­ka­ni­sche De­sign­agen­tur ZURB Un­ter­neh­men dabei, hoch­qua­li­ta­ti­ve Websites und Web­ser­vices zu gestalten. 2008 fasste man die intern ent­wi­ckel­ten Style-Elemente für die Web­pro­jek­te der Kunden im ZURB Style Guide zusammen. Zwei Jahre später entschied sich ZURB dazu, ein Framework auf der Basis des Guides zu kreieren, das die Er­stel­lung von Pro­to­ty­pen ver­ein­fa­chen und die Ent­wick­lungs­zeit verkürzen sollte. Dazu pickte man sich das Beste aus den be­stehen­den Code-Snippets, Patterns und Templates heraus und vereinte es im Foun­da­ti­on-Framework, das 2011 als Open-Source-Projekt ver­öf­fent­licht wurde und seitdem zur kos­ten­lo­sen Nutzung zur Verfügung steht.

Foun­da­ti­on ist ein re­spon­si­ves Frontend-Framework, das sich aus funk­ti­ons­star­ken HTML- und CSS-Kom­po­nen­ten zur UI-Ge­stal­tung, diversen Code-Snippets und Templates sowie op­tio­na­len Ja­va­Script-Er­wei­te­run­gen zu­sam­men­setzt. Das modular auf­ge­bau­te Web­frame­work zur Ge­stal­tung ge­rä­te­über­grei­fen­der Projekte wird unter der freien MIT-Lizenz ver­trie­ben und kann sowohl auf der of­fi­zi­el­len Homepage als auch auf GitHub her­un­ter­ge­la­den werden. Seit Foun­da­ti­on 4.0 gilt der „Mobile First“-Ansatz, dem man seitdem mit ver­schie­de­nen, neuen Modulen zur Per­for­mance-Op­ti­mie­rung und einer Ver­schlan­kung der Da­tei­grö­ße aller Framework-Dateien Rechnung trägt. Zu­sätz­lich zur Stan­dard­ver­si­on von Foun­da­ti­on hat ZURB auch Varianten zur Ent­wick­lung von ge­rä­te­über­grei­fen­den E-Mail-News­let­tern (Foun­da­ti­on for Emails) und One-Pagern (Foun­da­ti­on for Apps) her­aus­ge­bracht.

Das Foun­da­ti­on-Framework zeichnet sich durch ein hohes Maß an Fle­xi­bi­li­tät aus, das in erster Linie aus dem modularen Aufbau re­sul­tiert. Sie können bereits vor dem Download ent­schei­den, welche Kom­po­nen­ten Sie benötigen und welche nicht – so stellen Sie ganz einfach Ihre ganz in­di­vi­du­el­le Variante der Webcode-Sammlung zusammen, ohne dass Sie Module, die Sie nicht benötigen, her­un­ter­la­den müssen. Stellen Sie im Nach­hin­ein fest, dass Sie eine ab­ge­wähl­te Kom­po­nen­te doch benötigen, fügen Sie diese dem Framework einfach nach­träg­lich hinzu. Ebenso gut können Sie auch Module entfernen, für die Sie keinen Gebrauch mehr haben. So bleibt jederzeit ge­währ­leis­tet, dass Ihnen genau die Funk­tio­nen zur Verfügung stehen, die Sie zur Rea­li­sie­rung Ihres Web­pro­jek­tes brauchen.

Für Foun­da­ti­on 6.0 haben Sie bei­spiels­wei­se eine Auswahl von über 40 Kom­po­nen­ten aus folgenden sieben Bereichen:

• Grid: Die ent­schei­den­de Kom­po­nen­te für re­spon­si­ves Webdesign ist das stan­dard­mä­ßig 1200 Pixel breite, flexible Grid-Layout. Sie können dieses Modul zwar auch abwählen, al­ler­dings ist das System die Grundlage für ein geräte- und auf­lö­sungs­über­grei­fen­des Design Ihres Web­pro­jek­tes. Seit Version 6.0 haben Sie darüber hinaus auch die Mög­lich­keit, das Modul „Flex Grid“ zu wählen, das eine noch fle­xi­ble­re Element-Po­si­tio­nie­rung auf Basis des Flexbox-Modells von CSS er­mög­licht (bei­spiels­wei­se eine ho­ri­zon­ta­le und vertikale Aus­rich­tung der Objekte).

• General: Zu den ge­ne­rel­len Modulen (zu denen offiziell auch das Grid gelistet wird) zählen zum einen die Float- und Vi­si­bi­li­ty-Klassen, mit deren Hilfe Sie Ver­hal­tens­re­geln für die Po­si­tio­nie­rung und Sicht­bar­keit einzelner Elemente de­fi­nie­ren können. An­de­rer­seits finden Sie in diesem Bereich auch eine Formular-Kom­po­nen­te sowie das Ty­po­gra­phie-Modul mit grund­le­gen­den Schrift- und Text-For­ma­tie­run­gen.

• Controls: Hier sind alle wichtigen in­ter­ak­ti­ven Elemente Ihres Web­pro­jek­tes enthalten. Dabei handelt es sich bei­spiels­wei­se um Buttons, die den Nutzer nach einem Klick wei­ter­lei­ten oder aus­ge­wähl­te Elemente schließen. Ferner exis­tie­ren Module, mithilfe derer Sie Slider und Schalt­flä­chen mit An-/Aus­schal­ter einbinden.

• Na­vi­ga­ti­on: Für die Frontend-Ge­stal­tung dürfen natürlich auch Na­vi­ga­ti­ons­ele­men­te nicht fehlen und so haben Sie auch für Ihr ZURB-Foun­da­ti­on-Projekt eine große Auswahl an Modulen, mit denen Sie Me­nü­leis­ten und Menüs gestalten (Akkordeon, Drilldown, Dropdown), Na­vi­ga­ti­ons­pfa­de (Bread­crumbs) hin­zu­fü­gen oder Seiten pa­gi­nie­ren – also mit Sei­ten­zah­len versehen – können.

• Con­tai­ners: Container stellen eine erst­klas­si­ge Mög­lich­keit dar, um mehrere Elemente wie zum Beispiel Text, Bilder oder Videos in einem ge­mein­sa­men Bereich ein­zu­schlie­ßen. Hier finden sich Stile für typische Inhalts-Widgets wie Akkordeon, Tabs, Dropdown-Bereiche oder modale Dialoge.

• Media: Unter der Rubrik „Media“ finden Sie Module des Foun­da­ti­on-Frame­works, die Sie zur Ein­bin­dung mul­ti­me­dia­ler Elemente benötigen. Die Kom­po­nen­te „Flex Video“ un­ter­stützt Sie zum Beispiel bei der Ein­bet­tung von Videos und stellt sicher, dass der Inhalt an die ver­schie­de­nen Dis­play­grö­ßen und Auf­lö­sun­gen angepasst wird. Zudem gibt es unter anderem auch Kom­po­nen­ten für Vor­schau­bil­der und Tooltips.

• Plug-ins: Schließ­lich können Sie einige nützliche Er­wei­te­run­gen für ZURB-Foun­da­ti­on auswählen, die Ihnen das Arbeiten mit dem Web­frame­work er­leich­tern. Mit der Bi­blio­thek „Motion UI“ laden Sie zum Beispiel eine nützliche Bi­blio­thek (nur für die Sass-Variante) herunter, die das Erstellen von flexiblen UI-Über­gän­gen und -Ani­ma­tio­nen zum Kin­der­spiel macht.

Ferner können Sie vor dem Download auch einige Stan­dard­ein­stel­lun­gen für das Framework de­fi­nie­ren. Dazu zählen Optionen zur Ver­än­de­rung von Spal­ten­an­zahl oder -abstand und zur maximalen Breite des Grid-Systems, ver­schie­de­ne Farb­ein­stel­lun­gen und die Fest­le­gung der Text­lauf­rich­tung (links nach rechts oder rechts nach links). Wenn Sie das Framework zunächst einmal testen wollen, ohne sich über die einzelnen Module zu in­for­mie­ren, können Sie es auch als Kom­plett­ver­si­on („Complete“) oder in einer ab­ge­speck­ten Ba­sis­va­ri­an­te („Essential“) her­un­ter­la­den.

Wenn Sie mit den Mög­lich­kei­ten von CSS zufrieden sind und Stile einfach in der her­un­ter­ge­la­de­nen CSS-Datei über­schrei­ben, treffen Sie in jedem Fall eine gute Wahl. Al­ler­dings wartet das Foun­da­ti­on-Framework noch mit einer Be­son­der­heit auf: Die Grund­la­gen des CSS-Codes sind nämlich in der Style­sheet-Sprache Sass (Syn­tac­ti­cal­ly Awesome Style­sheets) ge­schrie­ben, die ein so­ge­nann­ter Prä­pro­zes­sor für CSS ist. Sass er­mög­licht es, in .scss-Style­sheets zu arbeiten, die an­schlie­ßend in die bekannten .css-Dokumente kom­pi­liert (um­ge­wan­delt) werden können, die sich vom Browser lesen und in­ter­pre­tie­ren lassen.

Wenn Sie auf die Sass-Variante des ZURB-Frame­works zu­rück­grei­fen, ergeben sich für Sie unter anderem folgende Vorteile:

• ver­ein­fach­te Syntax (Sass oder SCSS), die das Schreiben von Style­sheets er­leich­tert

• Mög­lich­keit, Vorlagen zu de­fi­nie­ren (Mixins), um wie­der­keh­ren­de Muster zentral aus­zu­la­gern und an be­lie­bi­ger Stelle einbinden zu können

• einfache Kom­bi­na­ti­on mehrerer Style­sheets zur Mi­ni­mie­rung der HTTP-Requests

• Nutzung von Variablen und Funk­tio­nen, um Farben, Abstände, Schriften etc. zentral aus­tau­schen zu können

• Code lässt sich dank Nesting un­kom­pli­ziert hier­ar­chisch struk­tu­rie­ren, was ein sauberes Arbeiten mit we­sent­lich weniger Code­zei­len er­mög­licht

Der Sass-Compiler ist ur­sprüng­lich in Ruby ge­schrie­ben. Wenn Sie diese Pro­gram­mier­spra­che nicht ohnehin benutzen, müssen Sie sie aber für Sass nicht in­stal­lie­ren, denn mit LibSass steht eine in C ge­schrie­be­ne Al­ter­na­ti­ve zur Verfügung. LibSass läuft unter allen gängigen Be­triebs­sys­te­men und lässt sich einfach in einen Node.js-Workflow einbauen – etwa, um Än­de­run­gen am Sass-Code au­to­ma­tisch in CSS zu über­set­zen.

Mit dem Update von Version 5 auf Foun­da­ti­on 6.0 hat ZURB die Da­tei­grö­ße des kom­plet­ten Frame­works noch einmal deutlich minimiert: Mit 60 KB CSS und 84 KB Ja­va­Script genießt Foun­da­ti­on den Ruf, eine überaus schlanke Ent­wick­lungs­platt­form zu sein. Durch die bereits an­ge­spro­che­ne Mo­du­la­ri­tät und die Frei­hei­ten bei der Auswahl können Sie die Größe sogar noch zu­sätz­lich mi­ni­mie­ren. In Kom­bi­na­ti­on mit dem flexiblen Grid und den diversen ARIA-At­tri­bu­ten (zum Beispiel zur Umsetzung leis­tungs­star­ker Tas­ta­tur­na­vi­ga­ti­on), die ZURB im­ple­men­tiert hat, sind die grund­sätz­li­chen Optionen für ein plattform- und ge­rä­te­über­grei­fen­des Web­pro­jekt also absolut gegeben. Letzt­ge­nann­te Attribute sind bestens do­ku­men­tiert und überall dort verfügbar, wo sie die Zu­gäng­lich­keit Ihrer Website sinnvoll op­ti­mie­ren können.

Wenn Sie mit der Sass-Version des Frame­works arbeiten, ver­grö­ßern Sie zudem Ihre Optionen bei der Ge­stal­tung der ein­ge­setz­ten Design- und Layout-Elemente. Die Nutzung dieser spe­zi­el­len Style­sheets ist für Neulinge kei­nes­wegs einfach und erfordert ein gewisses Maß an Ein­ar­bei­tung, was auch allgemein für die Plattform gilt. Auch die Ein­bin­dung externer Kom­po­nen­ten bzw. die In­te­gra­ti­on der Foun­da­ti­on-Module oder -Projekte in ein anderes Framework oder in ein Content-Ma­nage­ment-System ist in der Regel sehr um­ständ­lich. Kleinere Schwächen, die ZURB Foun­da­ti­on gegenüber ver­gleich­ba­ren CSS-Frame­works wie Twitter Bootstrap aufweist, sind die geringe Auswahl an Templates sowie die fehlende Un­ter­stüt­zung älterer Versionen des Internet Explorers.

ZURB Foun­da­ti­on begleitet Sie als Ent­wick­ler vom ersten Prototyp bis hin zur funk­ti­ons­be­rei­ten Website und zeichnet sich dabei vor allem durch seine Effizienz aus. Benötigen Sie bestimmte Kom­po­nen­ten nicht, wählen Sie diese einfach ab, ohne die Funk­tio­na­li­tät anderer Elemente zu be­ein­flus­sen. Im Ergebnis glänzt das CSS-Framework durch einen besonders schlanken Code, der das von ZURB gewählte Leitmotiv „Mobile first“ un­ter­streicht. Gemeinsam mit dem äußerst flexiblen Grid-System, das Sie optional mit Sass anpassen können, eignet sich das Framework daher perfekt, um re­spon­si­ve Frontends zu ent­wi­ckeln, die sich durch eine schnelle Ladezeit und Bar­rie­re­frei­heit aus­zeich­nen und für ver­schie­de­ne Bild­schirm­grö­ßen geeignet sind.

Sie können das ZURB-Framework zwar auch zur Rea­li­sie­rung kom­ple­xe­rer, in­di­vi­du­el­ler Web­pro­jek­te nutzen, al­ler­dings ist dies mit einem er­heb­li­chen Mehr­auf­wand verbunden und setzt ein gutes Ver­ständ­nis der vor­ge­fer­tig­ten Code-Snippets voraus.