CSS-Framework

Foundation: Eine kurze Einführung
Kommentare

Bis zur Version 6 des CSS-Frameworks Foundation wird es noch ein wenig dauern. Aber auch die derzeit erhältliche Version 5 ist auf jeden Fall einen Blick wert.

Beim Aufbau einer Internetpräsenz auf ein Framework zurückzugreifen, kann Zeit und Arbeit sparen. Mit in Gruppen und IDs vordefinierten Elementen – wie Schrift, Navigation und Buttons – stellt ein solches Framework meist ein solides Grundgerüst zur Verfügung. Foundation ist neben Bootstrap eines der meistgenutzen.

Foundation entstand aus dem Styleguide der Firma ZURB. Ziel war es, dem Kunden schnell einen Prototypen für eine Webseite vorstellen zu können. Die ZURB-Designer waren auch an der Entwicklung von Bootstrap beteiligt.

Warum Foundation?

Foundation folgt einem Mobile-First-Ansatz, um so möglicht viele Endgeräte direkt bedienen zu können. Ferner steht hinter Foundation mit ZURB eine seit 1998 existierende Firma. Jedoch hat Foundation eine deutlich kleinere Community im Vergleich zu Bootstrap, was sich dementsprechend auch in einer kleineren Auswahl an Themes und Plugins manifestiert.

Foundation ist recht schlicht gehalten, und nicht mit Effekten oder Stilen überladen. Das benutzerdefinierte „Custom“-Gerüst (siehe unten) reduziert bei effizienter Nutzung den Ballast der ungenutzten Funktionen und Elemente, der immer ein buchstäblich gewichtiger Nachteil von Frameworks sein kann, auf ein vertretbares Maß.

Open-Source und Mobile First

Foundation wurde im September 2011 als unter MIT-Lizenz stehendes Open-Source-Projekt veröffentlicht. Somit kann es kostenlos und für alle denkbaren Zwecke verwendet werden. Mittlerweile befindet sich das responsive Mobile-First-Framework in Version 5.5.1.

Der Philosophie des Mobile First folgend ist Foundation darauf ausgerichtet, sich in erster Linie an mobilen Endgeräten zu orientieren. Wenn die Website auf größeren Endgeräten angesehen wird, dann skaliert sie sich hoch. Damit braucht es kein separates Design für verschiedene Endgeräte. Eine Internetpräsenz deckt alles ab.

So sieht die Foundation-Website auf einem mobilen Endgerät aus

So sieht die Foundation-Website auf einem mobilen Endgerät aus.
Um das Display eines iPhone 6 zu simulieren, wurde folgendes Tool genutzt:
Screenfly von quirktools.com

Download und Dokumentation

Das Framework steht in verschiedenen Fassungen auf der Foundation-Website zum Download bereit. Über die Auswahlmöglichkeit “Complete” kann der Benutzer das komplette Framework herunterladen. “Essential” beschränkt sich mit seinen gezippten 77 KB hingegen – nomen est omen – ausschließlich auf die wesentlichen Funktionen. Dazu gehören das Grid-System zur Platzierung von Elementen und die Schaltflächen. Zusätzlich gibt es mit “Custom” eine benutzerdefinierte Version. Der Benutzer kann dort bei den gewünschten Funktionen ein Häkchen setzen, die heruntergeladene Fassung beinhaltet dann ausschließlich diese.

Eine effiziente Vorgehensweise kann darin bestehen, zuerst das Komplettpaket zu nutzen. Wenn dann die Webseite konzipiert wurde und klar ist, welche Funktionen genutzt werden, kann auf ein entsprechend individualisiertes “Custom”-Gerüst zurückgegriffen werden.

Erste Schritte

Hat sich der Benutzer für ein Paket entschieden, muss die ZIP-Datei nur noch entpackt werden. Die verschiedenen Fassungen des Frameworks kommen stets mit einer index.html. Diese veranschaulicht dem Benutzer ein paar ausgewählte Elemente, Funktionen und deren Nutzung.

Sind etwas spezifischere Vorgaben gewünscht, dann stehen auf der Website des Foundation-Projekts 16 Templates zur Auswahl. Deren Quelltext muss dann nur noch zwischen die Body-Tags der Datei index.html kopiert werden. Angezeigt wird der Code durch Mausklick auf die Verlinkung “HTML” unter der jeweiligen Vorlage.

Der Quelltext des Blog-Templates

Der Quelltext des Blog-Templates.

Sublime Text und Text-Snippets

Die HTML- und CSS-Dateien des Frameworks können natürlich mit jedem beliebigen Texteditor bearbeitet werden. ZURB empfiehlt mit Sublime Text aber einen erstklassigen Editor, der sich durch einige praktische Funktionen, wie speziellen Text-Snippets für das Framework, auszeichnet.

Diese Text-Snippets ermöglichen es, mit nur wenigen Eingaben ganze Funktionen von Foundation in eine Datei zu schreiben. Dazu muss ein bestimmter Befehl in eine Zeile eingegeben werden, der dann mit der Tabulatortaste vervollständigt wird.

⌘ + ⇧ + P = Alle Befehle auf einen Blick

Alle Befehle auf einen Blick mit ⌘ + ⇧ + P .

Zum Beispiel wird die Eingabe von “zf-reveal” + Tab zu folgendem Code-Block vervollständigt:

<a href=“#“ data-reveal-id=“myModal“>Click Me For A Modal</a>
<div id=“myModal“ class=“reveal-modal“ data-reveal>
<h2>Awesome. I have it.</h2>
<p class=“lead“>Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class=“close-reveal-modal“>&#215;</a>
</div>

Hierbei handelt es sich um den Quelltext für ein modales Fenster, das sich bei Aktivierung über die Webseite legt. Funktionieren kann dieser Quelltext nur in Verbindung mit einem JavaScript, das zu Foundation gehört. Dieses muss mit folgender Zeile eingebunden werden:

<script src=“js/foundation/foundation.reveal.js“></script>

Ein modales Fenster erscheint über dem Inhalt der Seite

Ein modales Fenster erscheint über dem Inhalt der Seite.

Fazit

Wenn mit wenig Zeit viel erreicht werden soll, dann ist Foundation eine gute Wahl. Das gilt ganz besonders dann, wenn es in Kombination mit Sublime Text inklusive Text-Snippets genutzt wird.

Weitere Informationen

http://foundation.zurb.com

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -