ZURB Foundation: Das CSS-Framework für responsive Frontends

Seit 1998 unterstützt die amerikanische Designagentur ZURB Unternehmen dabei, hochqualitative Websites und Webservices zu gestalten. 2008 fasste man die intern entwickelten Style-Elemente für die Webprojekte 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 Erstellung von Prototypen vereinfachen und die Entwicklungszeit verkürzen sollte. Dazu pickte man sich das Beste aus den bestehenden Code-Snippets, Patterns und Templates heraus und vereinte es im Foundation-Framework, das 2011 als Open-Source-Projekt veröffentlicht wurde und seitdem zur kostenlosen Nutzung zur Verfügung steht.

Foundation ist ein responsives Frontend-Framework, das sich aus funktionsstarken HTML- und CSS-Komponenten zur UI-Gestaltung, diversen Code-Snippets und Templates sowie optionalen JavaScript-Erweiterungen zusammensetzt. Das modular aufgebaute Webframework zur Gestaltung geräteübergreifender Projekte wird unter der freien MIT-Lizenz vertrieben und kann sowohl auf der offiziellen Homepage als auch auf GitHub heruntergeladen werden. Seit Foundation 4.0 gilt der „Mobile First“-Ansatz, dem man seitdem mit verschiedenen, neuen Modulen zur Performance-Optimierung und einer Verschlankung der Dateigröße aller Framework-Dateien Rechnung trägt. Zusätzlich zur Standardversion von Foundation hat ZURB auch Varianten zur Entwicklung von geräteübergreifenden E-Mail-Newslettern (Foundation for Emails) und One-Pagern (Foundation for Apps) herausgebracht.

Das Foundation-Framework zeichnet sich durch ein hohes Maß an Flexibilität aus, das in erster Linie aus dem modularen Aufbau resultiert. Sie können bereits vor dem Download entscheiden, welche Komponenten Sie benötigen und welche nicht – so stellen Sie ganz einfach Ihre ganz individuelle Variante der Webcode-Sammlung zusammen, ohne dass Sie Module, die Sie nicht benötigen, herunterladen müssen. Stellen Sie im Nachhinein fest, dass Sie eine abgewählte Komponente doch benötigen, fügen Sie diese dem Framework einfach nachträglich hinzu. Ebenso gut können Sie auch Module entfernen, für die Sie keinen Gebrauch mehr haben. So bleibt jederzeit gewährleistet, dass Ihnen genau die Funktionen zur Verfügung stehen, die Sie zur Realisierung Ihres Webprojektes brauchen.

Für Foundation 6.0 haben Sie beispielsweise eine Auswahl von über 40 Komponenten aus folgenden sieben Bereichen:

• Grid: Die entscheidende Komponente für responsives Webdesign ist das standardmäßig 1200 Pixel breite, flexible Grid-Layout. Sie können dieses Modul zwar auch abwählen, allerdings ist das System die Grundlage für ein geräte- und auflösungsübergreifendes Design Ihres Webprojektes. Seit Version 6.0 haben Sie darüber hinaus auch die Möglichkeit, das Modul „Flex Grid“ zu wählen, das eine noch flexiblere Element-Positionierung auf Basis des Flexbox-Modells von CSS ermöglicht (beispielsweise eine horizontale und vertikale Ausrichtung der Objekte).

• General: Zu den generellen Modulen (zu denen offiziell auch das Grid gelistet wird) zählen zum einen die Float- und Visibility-Klassen, mit deren Hilfe Sie Verhaltensregeln für die Positionierung und Sichtbarkeit einzelner Elemente definieren können. Andererseits finden Sie in diesem Bereich auch eine Formular-Komponente sowie das Typographie-Modul mit grundlegenden Schrift- und Text-Formatierungen.

• Controls: Hier sind alle wichtigen interaktiven Elemente Ihres Webprojektes enthalten. Dabei handelt es sich beispielsweise um Buttons, die den Nutzer nach einem Klick weiterleiten oder ausgewählte Elemente schließen. Ferner existieren Module, mithilfe derer Sie Slider und Schaltflächen mit An-/Ausschalter einbinden.

• Navigation: Für die Frontend-Gestaltung dürfen natürlich auch Navigationselemente nicht fehlen und so haben Sie auch für Ihr ZURB-Foundation-Projekt eine große Auswahl an Modulen, mit denen Sie Menüleisten und Menüs gestalten (Akkordeon, Drilldown, Dropdown), Navigationspfade (Breadcrumbs) hinzufügen oder Seiten paginieren – also mit Seitenzahlen versehen – können.

• Containers: Container stellen eine erstklassige Möglichkeit dar, um mehrere Elemente wie zum Beispiel Text, Bilder oder Videos in einem gemeinsamen Bereich einzuschließ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 Foundation-Frameworks, die Sie zur Einbindung multimedialer Elemente benötigen. Die Komponente „Flex Video“ unterstützt Sie zum Beispiel bei der Einbettung von Videos und stellt sicher, dass der Inhalt an die verschiedenen Displaygrößen und Auflösungen angepasst wird. Zudem gibt es unter anderem auch Komponenten für Vorschaubilder und Tooltips.

• Plug-ins: Schließlich können Sie einige nützliche Erweiterungen für ZURB-Foundation auswählen, die Ihnen das Arbeiten mit dem Webframework erleichtern. Mit der Bibliothek „Motion UI“ laden Sie zum Beispiel eine nützliche Bibliothek (nur für die Sass-Variante) herunter, die das Erstellen von flexiblen UI-Übergängen und -Animationen zum Kinderspiel macht.

Ferner können Sie vor dem Download auch einige Standardeinstellungen für das Framework definieren. Dazu zählen Optionen zur Veränderung von Spaltenanzahl oder -abstand und zur maximalen Breite des Grid-Systems, verschiedene Farbeinstellungen und die Festlegung der Textlaufrichtung (links nach rechts oder rechts nach links). Wenn Sie das Framework zunächst einmal testen wollen, ohne sich über die einzelnen Module zu informieren, können Sie es auch als Komplettversion („Complete“) oder in einer abgespeckten Basisvariante („Essential“) herunterladen.

Wenn Sie mit den Möglichkeiten von CSS zufrieden sind und Stile einfach in der heruntergeladenen CSS-Datei überschreiben, treffen Sie in jedem Fall eine gute Wahl. Allerdings wartet das Foundation-Framework noch mit einer Besonderheit auf: Die Grundlagen des CSS-Codes sind nämlich in der Stylesheet-Sprache Sass (Syntactically Awesome Stylesheets) geschrieben, die ein sogenannter Präprozessor für CSS ist. Sass ermöglicht es, in .scss-Stylesheets zu arbeiten, die anschließend in die bekannten .css-Dokumente kompiliert (umgewandelt) werden können, die sich vom Browser lesen und interpretieren lassen.

Wenn Sie auf die Sass-Variante des ZURB-Frameworks zurückgreifen, ergeben sich für Sie unter anderem folgende Vorteile:

• vereinfachte Syntax (Sass oder SCSS), die das Schreiben von Stylesheets erleichtert

• Möglichkeit, Vorlagen zu definieren (Mixins), um wiederkehrende Muster zentral auszulagern und an beliebiger Stelle einbinden zu können

• einfache Kombination mehrerer Stylesheets zur Minimierung der HTTP-Requests

• Nutzung von Variablen und Funktionen, um Farben, Abstände, Schriften etc. zentral austauschen zu können

• Code lässt sich dank Nesting unkompliziert hierarchisch strukturieren, was ein sauberes Arbeiten mit wesentlich weniger Codezeilen ermöglicht

Der Sass-Compiler ist ursprünglich in Ruby geschrieben. Wenn Sie diese Programmiersprache nicht ohnehin benutzen, müssen Sie sie aber für Sass nicht installieren, denn mit LibSass steht eine in C geschriebene Alternative zur Verfügung. LibSass läuft unter allen gängigen Betriebssystemen und lässt sich einfach in einen Node.js-Workflow einbauen – etwa, um Änderungen am Sass-Code automatisch in CSS zu übersetzen.

Mit dem Update von Version 5 auf Foundation 6.0 hat ZURB die Dateigröße des kompletten Frameworks noch einmal deutlich minimiert: Mit 60 KB CSS und 84 KB JavaScript genießt Foundation den Ruf, eine überaus schlanke Entwicklungsplattform zu sein. Durch die bereits angesprochene Modularität und die Freiheiten bei der Auswahl können Sie die Größe sogar noch zusätzlich minimieren. In Kombination mit dem flexiblen Grid und den diversen ARIA-Attributen (zum Beispiel zur Umsetzung leistungsstarker Tastaturnavigation), die ZURB implementiert hat, sind die grundsätzlichen Optionen für ein plattform- und geräteübergreifendes Webprojekt also absolut gegeben. Letztgenannte Attribute sind bestens dokumentiert und überall dort verfügbar, wo sie die Zugänglichkeit Ihrer Website sinnvoll optimieren können.

Wenn Sie mit der Sass-Version des Frameworks arbeiten, vergrößern Sie zudem Ihre Optionen bei der Gestaltung der eingesetzten Design- und Layout-Elemente. Die Nutzung dieser speziellen Stylesheets ist für Neulinge keineswegs einfach und erfordert ein gewisses Maß an Einarbeitung, was auch allgemein für die Plattform gilt. Auch die Einbindung externer Komponenten bzw. die Integration der Foundation-Module oder -Projekte in ein anderes Framework oder in ein Content-Management-System ist in der Regel sehr umständlich. Kleinere Schwächen, die ZURB Foundation gegenüber vergleichbaren CSS-Frameworks wie Twitter Bootstrap aufweist, sind die geringe Auswahl an Templates sowie die fehlende Unterstützung älterer Versionen des Internet Explorers.

ZURB Foundation begleitet Sie als Entwickler vom ersten Prototyp bis hin zur funktionsbereiten Website und zeichnet sich dabei vor allem durch seine Effizienz aus. Benötigen Sie bestimmte Komponenten nicht, wählen Sie diese einfach ab, ohne die Funktionalität anderer Elemente zu beeinflussen. Im Ergebnis glänzt das CSS-Framework durch einen besonders schlanken Code, der das von ZURB gewählte Leitmotiv „Mobile first“ unterstreicht. Gemeinsam mit dem äußerst flexiblen Grid-System, das Sie optional mit Sass anpassen können, eignet sich das Framework daher perfekt, um responsive Frontends zu entwickeln, die sich durch eine schnelle Ladezeit und Barrierefreiheit auszeichnen und für verschiedene Bildschirmgrößen geeignet sind.

Sie können das ZURB-Framework zwar auch zur Realisierung komplexerer, individueller Webprojekte nutzen, allerdings ist dies mit einem erheblichen Mehraufwand verbunden und setzt ein gutes Verständnis der vorgefertigten Code-Snippets voraus.