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.