Zeige alle Blogbeiträge

Flexible Boxes und Foundation 6

  | Beitrag empfehlen auf 

Flexible Boxes (2015)

In der zweiten Auflage von Flexible Boxes beschreibe ich in Kapitel 18 das Erstellen eines Gridlayouts mit Foundation 5. Zurb hat soeben 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: 

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 zwei lesenswerte Artikel zu Foundation 6 geschrieben: 

[Links hinzugefügt am 21. Januar 2016]

Kapitel 18.1 - Foundation 6 im Überblick

Der Name »Foundation« steht inzwischen für drei verschiedene Frameworks:

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.

Foundation von ZURB - Startseite
Foundation 6: Die Startseite auf foundation.zurb.com

Ü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: 

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:

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 padding jetzt 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 menu und 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:

<!-- 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>

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:

<ul class="vertical medium-horizontal menu">

Das Menü ist also zunächst einmal vertikal und wird ab dem Breakpoint medium (40em) horizontal dargestellt. Mobile first.

Foundation 6: Top Bar mit Basic Menu

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:

<!-- 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>

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.
Foundation 6: Top Bar mit Basic Menu und Responsive Toggle

Der Hamburger im Toggle-Button ist übrigens auch pfiffig gebaut:

.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; 
}

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.

Peter Müller - Autor und Dozent

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Ab und an schreibe ich hier im Blog Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun.

Zeige alle Blogbeiträge

Einen Kommentar schreiben

Bitte füllen Sie alle Formularfelder mit einem Sternchen aus.