In der zweiten Auflage von »Flexible Boxes« beschreibe ich in Kapitel 18 das Erstellen eines Gridlayouts mit Foundation 5. Zurb hat mit Foundation 6 eine neue Version veröffentlicht, die ich und in diesem Beitrag kurz vorstellen möchte. Dabei schildere ich auch, was sich dadurch in Kapitel 18 so alles ändert.
Der Beitrag besteht aus drei Teilen:
- Kapitel 18.1 »Zurb Foundation« im Überblick
- Kapitel 18.2 »Rapid Prototyping«: ein Gridlayout mit Foundation
- Kapitel 18.3 Foundation ist ideal für Prototypen
Der Artikel ist denke ich auch für Leute interessant, die das Buch nicht kennen, sich aber für die grundlegende Funktionsweise von Foundation interessieren.
UPDATE: Gute Artikel zu Foundation 6 auf Sitepoint
Auf Sitepoint.com hat Simon Codrington drei lesenswerte Artikel zu Foundation 6 veröffentlicht:
- What’s New in Foundation 6? ist ein Überblick über die wichtigsten Neuerungen von Foundation.
- Foundation 6: The New Navigation Component zeigt die neuen Navigationsmodule sowie Beispiele für deren Einsatz.
- Foundation 6: The New Flex Grid zeigt das neue, auf Flexbox basierende Grid.
[Links hinzugefügt am 21. Januar 2016]
Kapitel 18.1: Foundation 6 im Überblick
Der Name »Foundation« steht inzwischen für drei verschiedene Frameworks:
- Foundation for Sites
- Foundation for Emails (hieß früher »Ink«)
- Foundation for Apps
Für das in Kapitel 18 geschilderte Gridlayout ist nur Foundation for Sites relevant, das ich im folgenden einfach nur Foundation nenne. Zurb selbst macht das übrigens auch: Ein Klick auf den orangefarbenen Button Download Foundation 6 auf der Startseite bringt Sie direkt auf die Downloadseite für Foundation for Sites.
Überblick
Mit Foundation 6 erstellte Webseiten funktionieren genau wie Foundation 5 in allen modernen Browsern und ab IE9 (Kompatibilität). IE8 kann weder box-sizing:border-box noch Media Queries und wird auch das JavaScript von Foundation zum Teil nicht verstehen.
Foundation 5 brachte viele vorgefertigte Komponenten mit, und die allermeisten davon gibt es auch noch in der 6er Version, auch wenn sich durchaus einiges geändert hat. So werden die einzelnen Komponenten so gut wie gar nicht mehr gestaltet. Dadurch wird das Foundation-CSS schlanker und man muss beim Erstellen eines Prototypen weniger Styling-Vorgaben überschreiben.
Dokumentation
Durch die Dreiteilung von Foundation haben sich viele im Buch beschriebene URLs geändert. Einige werden automatisch weitergeleitet, andere generieren nur ein 404. Oft muss man ein nur ein /sites/ergänzen, statt /docs/ also /sites/docs/ eingeben:
- Dokumentation: foundation.zurb.com/sites/docs/
- Übersichtsseite »Kitchen Sink«: foundation.zurb.com/sites/docs/kitchen-sink.html
Auf der Übersichtsseite sieht man auch sehr schön, dass die Bausteine in Foundation 6 noch weniger ausgestaltet sind als in Foundation 5, wo sie im Vergleich zu Bootstrap 3 schon sehr spartanisch waren. Motto: Foundation baut das Gerüst, die Gestaltung übernehmen Sie selbst.
Download, Ordnerstruktur und Gridsystem
Auch die URL für den Download von Foundation for Sites hat sich geändert:
- Download: foundation.zurb.com/sites/download.html
Die in Abbildung 18.2 auf Seite 446 gezeigten Download-Optionen hingegen gibt es noch genauso wie im Buch beschrieben.
Nach dem Entpacken des Archivs von Foundation erhält man immer noch drei Ordner, aber deren Inhalt hat sich geändert:
- Im Ordner css ist normalize.css jetzt in foundation.css enthalten.
- Neu dabei ist das leere Stylesheet app.css für das eigene CSS.
- Der Ordner js enthält die Datei foundation.js, deren minimierte Version und eine fast leere app.js für eigenes JavaSript.
- Den Ordner js/foundation gibt es nicht mehr, im Ordner js/vendor liegen jetzt jQuery und what-input.min.js. Modernizr ist nicht mehr dabei.
Im Hauptordner ist nur noch die index.html mit einigen einfachen Beispielen und Links, und auch die ist noch weniger ausgestaltet als die schon recht spartanische Startseite von Foundation 5.
Das Gridsystem von Foundation funktioniert noch genauso wie im Buch beschrieben. Es gibt drei Breakpoints:
- small als Grundlage
- medium ab min-width:40em (640px)
- large ab min-width:64em (1024px)
Auch die Zuweisung der Gridklassen im HTML hat sich nicht geändert.
Kapitel 18.2 »Rapid Prototyping»: ein Gridlayout mit Foundation
Bei der Erstellung des Gridlayouts selbst haben sich nur Kleinigkeiten geändert. Die HTML-Struktur der Beispielseite von Foundation 6 sieht noch fast genauso aus wie die aus Version 5 (Listing 18.1 auf Seite 450):
- Im <head> fällt die Zeile für Modernizr weg.
- Neu eingebunden wird ein zweites Stylesheet namens app.css, in dem das eigene CSS gespeichert wird.
- Vor </body> fehlt die Funktion
$(document).foundation(). Sie findet sich jetzt in der ersten Zeile von app.js, die genau an dieser Stelle eingebunden wird.
Beim Grid selbst hat sich die in der Klasse .row definierte maximale Breite für eine Gridzeile geändert, und zwar von 62.5em auf 75rem. Auch bei den Klassen .column und .columns wird das horizontale paddingjetzt in rem definiert und nicht mehr in em.
Die neue »Top Bar« ist nur noch ein Wrapper
Die Erstellung der Navigation hingegen hat sich in Foundation 6 komplett verändert. Die alten Module funktionieren anders als in Foundation 5 und es gibt auch komplett neue, was Im Blogartikel zum Release der Version 6 wie folgt umschrieben wird:
Flexible Navigation patterns
There’s a new menu system that is completely customizable and modular.
Man kann die Navigationsmodule fast beliebig kombinieren. Während die Top Bar in Foundation 5 eher ein monolithischer Block war, den man entweder gebrauchen konnte oder nicht, ist die neue nur noch ein Wrapper für das basic menu und könnte auch diverse andere Module enthalten.
Dieses neue Basismenü (»a flexible, all-purpose component for navigation«) vereinigt die Foundation 5 Module inline list, side nav, sub nav und icon bar in einer einzigen, sehr pfiffig angelegten Komponente. Auch der Toggle-Button für mobile Menüs (Hamburger plus Beschriftung) ist jetzt ein eigenes Modul namens Responsive Toggle.
Das neue Basic Menu
Das neue Basismenü ist im Grunde genommen einfach nur eine ungeordnete Liste mit der Klasse menuund enthält Listenelemente mit Links. Sonst nichts. Das Ergebnis ist eine weitgehend ungestaltete horizontale Navigation. Das Basismenü kann man durch Zuweisung von Klassen rechts ausgerichten, vertikal darstellen und verschachteln. Auch Icons für Menüpunkte sind problemlos möglich, genau wie bei Bootstrap mit der gewöhnungsbedürftigen Zweckentfremdung von <i> (wie Icon).
Das Beispiel aus dem Buch hat links den Menütitel »Flexible Boxes« und rechts vier Navi-Links. Das HTML für das neue Basismenü dazu könnte etwa so aussehen:
[css]<!– Top Bar mit Basic Menu (Foundation 6)
HTML für das Menü aus Listing 18.8 auf Seite 454 –>
<nav class="top-bar" id="fb-menu">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Flexible Boxes</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="vertical medium-horizontal menu">
<li><a href="#">Startseite</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>
</nav>[/css]
Das umgebende Element mit der Klasse top-bar wird in eine linke und ein rechte Hälfte unterteilt (top-bar-left und top-bar-right). Bemerkenswert ist die folgende Zeile:
[css]<code class="html plain"><</code><code class="html keyword">ul</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"vertical medium-horizontal menu"</code><code class="html plain">>[/css]
Das Menü ist also zunächst einmal vertikal und wird ab dem Breakpoint medium (40em) horizontal dargestellt. Mobile first.
Der neue Responsive Toggle
In kleinen Viewports wird die Top Bar standardmäßig ausgeblendet, sodass eigentlich nur noch ein Toggle-Button fehlt, der das Menü wieder sichtbar macht. Im HTML fügt man ihn am besten oberhalb des Basic Menu ein:
[css]
<!– Responsive Toggle von Foundation 6
Im HTML am besten vor der Top Bar mit Basic Menu einfügen –>
<div class="title-bar"
data-responsive-toggle="fb-menu"
data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menü</div>
</div>
[/css]
Und schon haben Sie ein komplett responsives Menü:
- In der Layoutvariante small erscheint der Toggle-Button, der ab medium automatisch ausgeblendet wird.
- Das Basic Menu ist, wenn es durch den Toggle-Button eingeblendet wird, schon vertikal. Perfekt.
- Ab dem Breakpoint medium verschwindet der Button und das Menü wird horizontal dargestellt.
Der Hamburger im Toggle-Button ist übrigens auch pfiffig gebaut:
[css]
.menu-icon::after {
content: “;
position: absolute;
display: block;
width: 100%;
height: 2px;
background: white;
top: 0;
left: 0;
box-shadow: 0 7px 0 white, 0 14px 0 white;
}[/css]
Die oberste Linie ist der 2px hohe weiße Hintergrund, die anderen beiden sind box-shadow. Keine Grafik, kein Hackfleisch und kein Icon-Font, einfach nur Linien. Passt überall perfekt.
Kapitel 18.3 Foundation ist ideal für Prototypen
Die Seite mit den vorgefertigten Templates ist gegenüber Abbildung 18.8 auf Seite 456 etwas geschrumpft:
Vielleicht ändert sich das ja noch. An der gesamten Site wird momentan noch ziemlich gebastelt.
Fazit
Foundation ist für die Erstellung von schnellen Prototypen noch besser geeignet als vorher. Insbesondere die neuen Navigationsmodule sind nach etwas Umgewöhnung wesentlich flexibler.
Ich bin gespannt, wie sich Bootstrap 4 dazu im Vergleich verhalten wird. Es setzt inzwischen ebenfalls auf SASS (nicht mehr auf Less) und will seine Komponenten auch wesentlich weniger gestylt anbieten (und kein Fertigbaukasten mehr sein). Das Problem für Bootstrap dürfte sein, dass viele Benutzer es genau deshalb eingesetzt haben, aber vielleicht hilft da der neue Theme-Shop weiter. We’ll see.