Frameworks

Foundation: Eine ausführliche Einführung in das Top-Framework

11. Oktober 2012
von

Zurb, Entwickler des Frameworks, sagen über Foundation (sinngemäß übersetzt), dass es das fortschrittlichste Responsive Frontend Framework der Welt ist. Die Fokussierung ist damit klar. Während der Ansatz von Bootstrap eher für das Backend von Applikationen verwendet wird, ist Foundation sehr gut für die Entwicklung eines nutzerfreundlichen Frontends konzipiert. Ein weiterer Fokus liegt darauf, dass eine mit dem Foundation-Framework entworfene Website auf jedem Geräte-Typ nutzbar sein sollte, vom Smartphone, über Tablets, Monitore, Fernseher hin zu anderen HiDPI-Displays. Wir stellen Ihnen Foundation ausführlicher vor und sagen, was es damit tatsächlich auf sich hat…

Foundation: Die Zielsetzung

Mittlerweile muss beim Entwurf eines Designs für eine Webseite nicht mehr nur an Auflösungen zwischen 480×320 und 1900×1200 Pixeln gedacht, sondern darüber hinaus noch viel höhere Auflösungen vorgedacht werden. Es wird also von Webdesignern erwartet, dass Webseiten, die wir heute entwickeln, auch noch in 12 Monaten anspruchsvoll wirken. Und dass das zur Herausforderung werden kann, wissen wir alle längst seit dem Erscheinen von Geräten wie dem Macbook Pro Retina.

Foundation tritt mit keinem geringeren Anspruch an, als diese Probleme zu lösen. Ob das Framework dafür tatsächlich das richtige Tool ist, möchte ich in diesem Artikel beantworten.

Foundations Basis: Das Grid

Wie die größte Zahl aller Frameworks, nutzt auch Foundation das Prinzip der Grids. Wer bereits mit Bootstrap oder 960.gs gearbeitet hat, findet sich hier relativ schnell zurecht. Ein Grid-Element wird in Foundation an die Auflösung des jeweiligen Gerätes angepasst. Diese werden hier als columns bezeichnet und können einem DIV als Klasse zugewiesen werden. Columns müssen immer von einem DIV mit der Klasse row umschlossen sein. Dieses bestimmt die maximale Breite der Summe aller Grid-Elemente innerhalb des Divs mit der Klasse row. Eine Seite oder ein row-Div bestehen aus bis zu 12 columns.

Möchte man also eine Website aufbauen, die links einen Inhaltsbereich hat und rechts eine Sidebar, die halb so groß wie der Inhaltsbereich ist, kann man folgendes Konstrukt erstellen:

<div class="row">
    <div class="eight columns">
        <p>Hier befindet sich der Inhaltsbereich</p>
    </div>
    <div class="four columns">
        <p>Hier ist die Sidebar</p>
    </div>
</div>

Natürlich kann man diese Elemente auch verschachteln. Dabei muss aber beachtet werden, das immer erst ein Div mit der Klasse row aufgebaut werden muss, damit Foundation erkennt, dass die columns in einer neuen Ebene aufgebaut werden sollen. Dadurch erkennt man auch den Sinn des row-Elements. In einem Beispiel wollen wir im Inhaltsbereich ein neues Grid für einen Artikel und einem dazu passenden Bild aufbauen:

<div class="row">
    <div class="eight columns">
        <div class="row">
            <div class="three columns"
                ><img src="article.png" alt="Artikelbild">
            </div>
            <div class="nine columns"><p>Artikelinhalt</p></div>
        </div>
    </div>
    <div class="four columns">
        <p>Hier ist die Sidebar</p>
    </div>
</div>

Es sollten, aber es müssen nicht immer alle 12 Grid-Elemente innerhalb einer Reihe (row) genutzt werden. Man kann zum Beispiel auch nur ein Element mit der Größe einer Spalte (column)anlegen und dieses dann zentriert oder ganz rechts am Reihen-Element ausrichten. Zum Zentrieren eines Spalten-Elements ist nur die Erweiterung centered nötig. Um ein Element ganz rechts zu positionieren, sollte man Offsets nutzen. Wenn man ein 4 Spalten großes Element anlegen möchte, kann man durch die Erweiterung der Klasse offset-by-eight das Element ganz rechts innerhalb einer Reihe positionieren.

Beachten sollte man auch, wenn man nicht alle 12 Elemente des Grids ausfüllt, das letzte Element mit der Klasse end zu erweitern.

<div class="row">
    <div class="four columns centered">Zentriert</div>
    <div class="four columns">Links</div>
    <div class="four columns end">Mitte mit Abschluss</div>
</div>

Foundations mobiles Grid

Foundation passt zwar automatisch die Größe von Elementen an die Größe der Umgebung an. Allerdings ist es manchmal gewollt, dass Elemente sich auf mobilen Geräten anders verhalten sollen. Dafür gibt es in Foundation eine optionale Möglichkeit das Verhalten einzelner Elemente auf Geräten mit kleinen Bildschirmen durch ein sogenanntes Mobile Grid anzupassen.

Dieses Mobile Grid hat eine maximale Größe von 4 Spalten und kann der jetzigen Klasse einfach hinzugefügt werden.

<div class="row display">
    <div class="four mobile-two columns">Anderes Verhalten mobile Geräte</div>
    <div class="eight mobile-two columns">Anderes Verhalten mobile Geräte</div>
</div>

In diesem Beispiel würden die beiden Elemente auf sehr kleinen Bildschirmen untereinander dargestellt werden. Mit der expliziten Mobil-Anweisung erscheinen diese nun auf kleinen Geräten nebeneinander.

Foundation und Typographie, Buttons, Formulare

Bei den üblichen Dingen wie Überschriften, Links, Aufzählungen gibt es auf den ersten Blick nicht viel spektakuläres. Das braucht es allerdings bei der Typographie auch nicht. Es reicht, wenn diese sauber und angenehm wirkt. Dafür haben sich die Foundation-Entwickler durch das modular scale Konzept von Tim Brown inspirieren lassen, das unter Anderem den Goldenen Schnitt beinhaltet. Dadurch wirkt die gesamte typographische Gestaltung ruhig und sehr leicht zu lesen, was auch für die angenehme Umsetzung von Blockquotes und Subheader gilt.

Bei den Buttons fällt sofort auf, dass sie tatsächlich wie Buttons wirken. Das ist wichtig, denn aus der Erfahrung wissen Web-Nutzer, dass Elemente, die zur Interaktion konzipiert worden sind, in der Regel auch tatsächlich eine Interaktionsmöglichkeit widerspiegeln. Daher sollten Buttons auch wie Buttons wirken. Ich nutze diese Umsetzung sehr gerne, um einen ruhigen und übersichtlichen Stil auf einer Website aufbauen zu können. Denn dadurch erhält jedes Element einen Zweck, der für den unbedarften Nutzer auf den ersten Blick erkennbar ist.

Es existiert auch die Möglichkeit, Button-Gruppen anzulegen, um eine Zusammengehörigkeit der jeweiligen Button-Elemente zu demonstrieren.

Formulare sind ähnlich wie bei anderen Frameworks aufgebaut und haben dadurch auch ein ähnliches Look and Feel. Man kann hier aber .inline-Elemente nebeneinander platzieren, zum Beispiel ein Feld für die Hausnummer, neben einem Feld für Straße. Vor oder nach einem Input-Feld können prefix-, bzw. postfix-Zeichen oder Actions eingebunden werden (zum Beispiel für eine Währung oder einen Suchbutton).

Optional können vom Stil her angepasste Checkboxen und Radio-Buttons aktiviert und Select-Felder können als angepasste Dropdown-Boxen dargestellt werden.

Foundation und die Navigation

Die Navigation bzw. deren Handling für den User ist eins der Dinge, die mich noch nicht ganz überzeugen. Nutzen kann man es aber auf jeden Fall. Aufgebaut wird die Navigation im HTML5-Element nav zum Beispiel mit der Klasse top-bar und die Navigationselemente selbst als Liste. Listen können dabei entweder links oder rechts in der Navigation angeordnet sein.

<nav class="top-bar fixed">
    <section>
        <ul class="left">
            <li><a href="#">Link</a></li>
        </ul>
 
        <ul class="right">
            <li><a href="#">Link</a></li>
        </ul>
    </section>
</nav>

Standardmäßig verläuft die Navigation über die gesamte Breite des Browsers. Mit der Klasse contain-to-grid kann man dafür sorgen, dass sich die Navigation einem umschließenden Div mit der Klasse row anpasst. Gibt man der Navigation zusätzlich die Klasse fixed, wird diese, wie erwartet an der jeweiligen Position fixiert. Zum Beispiel bei den Klassen top-bar fixed fixiert sich die Navigationsbar am oberen Rand des Browserfensters.

Zusätzliche Features

Foundation bietet weitere Möglichkeiten wie einen integrierten Slider (Orbit), der sich der Umgebung anpasst, also zum Beispiel gut auf mobilen Geräten funktioniert. Wobei hier natürlich nicht vergessen werden darf, die jeweilige Bildgröße anzupassen. Mit Hilfe des Sliders kann entweder reiner Content oder auch Bildmaterial angezeigt werden. Die Integration klappt dabei ziemlich problemlos.

Des Weiteren kann man auch Modals einbinden, also schwebende Fenster, die sich über den Inhalt legen und sozusagen als Alert-Box-Ersatz fungieren. Natürlich kann man damit auch ganz andere Dinge anstellen. Auch Tabs sind bei Foundation dabei. Die sind zwar wenig spektakulär, aber auf mobilen Geräten gut zu bedienen, was bei Tabs einen echten Pluspunkt darstellt.

Darüber hinaus gibt es noch weitere Elemente wie Labels, Tooltips oder ein Accordion-Widget. Wichtig ist auch die Möglichkeit, über eine CSS-Klasse Elemente auf der Website für bestimmte Geräte auszublenden, oder auch nur für bestimmte Geräte anzuzeigen. Ein Element mit der Klasse hide-for-large ist auf großen Geräten nicht sichtbar, hingegen werden durch die Klasse show-for-small Elemente nur auf kleinen Bildschirmen sichtbar. Man kann sein Design auch darauf anpassen, ob sich das Gerät im Landscape- oder Porträt-Modus befindet oder ob es einen Touchscreen hat.

Unterschiede zu anderen Frameworks

Der größte Unterschied zu anderen Frameworks liegt in der expliziten Empfehlung, es für Frontend-Lösungen zu nutzen und besonders dort, wo ein responsives Design gefragt ist.

Skeleton hat dabei den gleichen Ansatz, bietet aber nicht denselben Funktionsumfang. Skeleton hat aber den Vorteil, dass es leichter anzupassen ist, respektive sogar angepasst werden muss. Bei Foundation besteht durch die Tatsache, dass es bereits ein fertiges Design mit den wichtigsten Features gibt, derselbe Effekt, der durch den Bootstrap-Einsatz entstehen kann. Nämlich, dass am Ende viele Seiten dasselbe grundlegende Design haben und so die Entwicklung lahmen kann.

Im Vergleich zu 960.gs, welches ein reines Grid-Framework ohne Elemente ist, hat Foundation Vorteile im Bereich Rapid Prototyping einer Webseite, weil es bereits von Haus aus responsives Design bietet. Dafür gibt es bei 960.gs zwar Lösungen, diese sind aber optional und müssten extra eingebunden werden, wie zum Beispiel Adapt.js [http://adapt.960.gs]. Allerdings ist 960.gs immer noch eine gute Alternative, vor allem, wenn man nach wie vor konzeptionelle Entwürfe zuerst in einer grafischen Umgebung wie Photoshop oder Fireworks entwerfen will.

Bootstrap wiederum ist vor allem für User-Interfaces im Backend-Bereich gedacht. Es ist nicht so verspielt und hat sich komplett auf die Usability fixiert. Auch Bootstrap hat den Fokus nicht auf responsives Design gesetzt, bietet aber eine einfache Möglichkeit, dies einzusetzen. Durch die vielen Möglichkeiten der Gestaltung eines Grid in Bootstrap, kann dies im Endeffekt etwas länger dauern, ist aber insgesamt variabler.

Fakt ist, dass Foundation und Bootstrap sich sehr ähneln. Es gibt Punkte, wie die Navigation oder die Möglichkeit, die Kontrolle über sein Design zu behalten. Dagegen bietet Foundation ein Design, mit dem sich schnell ein User-Interface entwerfen lässt, das einen vollen Funktionsumfang bietet und dabei gleichzeitig auf allen Geräten professionell wirkt und intuitiv bedienbar ist.

Welches Framework soll ich denn nun nehmen?

Es kommt also im Endeffekt, wie immer, auf den gewünschten Einsatzzweck an. Wer sich als Designer lieber auf die Arbeit eines erfahrenen Teams verlässt, was die Umsetzung eines responsiven Designs angeht, sollte Foundation oder Skeleton verwenden, je nach gewünschtem Funktionsumfang. Wer allerdings selber bestimmt möchte, wie sein Design auf den jeweiligen Endgeräten aussieht und auf einen großen Funktionsumfang nicht verzichten möchte, sollte auf Bootstrap setzen. Und wer von Anfang an die komplette Kontrolle über das Aussehen behalten und UI-Elemente ganz individuell gestalten möchte, aber trotzdem auf ein Grid setzen will, der sollte mit 960.gs arbeiten, je nach Bedarf auch mit Unterstützung durch Adapt.js

Ich habe für den schnellen Überblick eine Tabelle erstellt. (Bitte beachten Sie dabei, dass dies keine Wertung ist, sondern nur den Feature-Umfang darstellen soll. So ist es schneller möglich, das passende Framework zu wählen. Außerdem betrachte ich nur den Auslieferungszustand der Frameworks. Denn mit PlugIns ist es möglich, alle fehlenden Features zu ersetzen.)

Name Foundation Bootstrap Skeleton 960.gs
Photoshop-Vorlage X X X
Grid-basiert
Responsive-Grid ✓ (optional) X
Angepasste Typographie X
Erweiterte Formulare X X
Media Queries X
Online anpassbar X
Icon-Sets X X X
Slider X X
Modal X X

 

(dpe)

ist Webentwickler am Fraunhofer IGD-R, freiberuflicher Web-Enthusiast und Student der Wirtschaftsinformatik an der Uni Rostock.

12 Kommentare zu „Foundation: Eine ausführliche Einführung in das Top-Framework
  1. Stefko am 11. Oktober 2012 um 09:56

    ööööhm, kann es sein, dass ein Link zu Foundation vergessen wurde? ;-)

  2. Jens am 11. Oktober 2012 um 13:32

    Hmm… ziemlich wirrer Artikel, in so ziemlich dem schlechtesten Deutsch, das mir seit langer Zeit im professionellen Bereich untergekommen ist. Und dass Bootstrap für den Backend-Bereich konzipiert wurde, ist schlichtweg Quatsch. Schade, wäre ansonsten ein interessantes Thema.

    • Dieter Petereit am 11. Oktober 2012 um 21:54

      Ich gebe diesen Kommentar hier nur frei, um mal zu zeigen, was ein schlechtes Beispiel ist. Dieser Kommentar ist weder konstruktiv kritisch, noch fügt er dem Beitrag oder dem Thema einen Mehrwert hinzu. Also, solche brauchen wir hier nicht! Der nächste dieser Art wird gelöscht…

  3. _florian am 11. Oktober 2012 um 16:34

    Sieht vielversprechend aus. Danke für die ausführliche Vorstellung.
    Hier ist der (in der Tat fehlende) Link: http://foundation.zurb.com

  4. Johannes am 11. Oktober 2012 um 20:34

    Super Artikel! Vielen Dank!
    Hier noch der Link: http://foundation.zurb.com/

  5. SiGa am 11. Oktober 2012 um 22:35

    Ich hatte Foundation bereits in einem Projekt im Einsatz und kann´s nur empfehlen. Es ist ein alles-in-allem Paket mit zahlreichen Möglichkeiten, aber dadurch, dass es verschiedene CSS- und js-files mit verschiedenen Funktionen gibt, kann man auch weglassen, was man nicht braucht, und kombinieren, was sinnvoll ist.
    Ein tolles Framework, zuverlässig und flexibel. Ich hab aufgehört, zu suchen, seit ich es gefunden habe… ;)
    Hier der Link zur Docu, die die verschiedenen Funktionen mit Codebeispielen erklärt: http://foundation.zurb.com/docs/index.php

  6. Karl Marx am 14. Oktober 2012 um 21:57

    @Dieter: Nur doof das “Jens” damit mehr oder weniger Recht hat..

  7. Marc am 17. Oktober 2012 um 12:08

    Eine Ergänzung für die – zugegeben spezielle Zunft der – Rails Entwickler:

    Hier lässt sich Bootstrap deutlich einfacher einbinden. Das Foundation gem ist ziemlich buggy, gerade im production environment hatte ich Probleme, die Javascripts zum Laufen zu bringen. Das alles funktioniert bei Bootstrap deutlich einfacher und stabiler.

    Ansonsten kann ich Foundation zum Prototyping aber auch sehr empfehlen!

  8. Manuel am 17. Oktober 2012 um 12:09

    Ich habe mir Foundation mal angesehen. Danke für den Hinweis darauf, schon mal.

    Mir ist die Verwendung von Grids das Wichtigste Kriterium an so einem Framework. Die Zusätze wie Buttons, Formulare usw. sind für mich nur Bonus, wenn gleich sie die Arbeit sehr vereinfachen.

    Was mir sofort negativ aufgefallen ist:
    Die Verwendung von prozentualen Angaben der Spaltenbreiten. Ich mag jetzt kleinlich klingen, aber direkt im Beispiel (http://foundation.zurb.com/docs/grid.php -> Examples) sieht man, dass das letzte Child-Element nach rechts gefloatet wird, und links davon ein Abstand entsteht.
    Prozente auf Pixel zu pressen finde ich persönlich(!) unpraktikabel. Lieber habe ich mehrere Breakpoints im responsive design und gebe dann Pixelwerte an, wie bei Bootstrap.
    Zudem weiß ich dann schon im Voraus, wie breit meine Elemente sein werden. Das ist bei Bildern wichtiger als bei Texten, die sich anpassen. Denn Bilder in 33,33% einer 66,66% Spalte zu erahnen oder zu skalieren, finde ich eher unschön.

    Was ich nicht sagen möchte ist, dass Foundation schlechter ist. Einige Punkte habe ich gesehen, die mir besser gefallen.

  9. Yannick am 18. Oktober 2012 um 15:56

    Nette Vorstellung eines weiteren Frameworks, welches ich allerdings bei meinem nächsten reaktionsfähigen Projekt einsetzen möchte.

  10. Dan am 22. Dezember 2012 um 17:36

    Ich bevorzuge ganz klar Foundation. Hier noch die Photoshop Vorlage:
    http://foundation.zurb.com/files/foundation-psd-templates.zip

  11. E-Commerce Architekt am 17. Dezember 2013 um 13:51

    Hervorragender Artikel. Herzlichen Dank

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!