Flexible HTML5 Frontends mit Foundation 3

Responsives Design, ein anpassungsfähiges Layout, dessen Aufbau sich nach den Gegebenheiten des jeweiligen Endgerätes richtet und so Anordnung und Darstellung der Elemente entsprechend verändert, ist bei der Vielzahl der möglichen Geräte (PC, Notebook, Tablet, Smartphone, etc.), die eine Webseite heute nutzen, ein immer interessanter werdendes Thema. Statt gezielt einzelne Geräte zu adressieren und so ggf. mehrere Versionen einer Seite vorzuhalten, ermöglichen entsprechende Frameworks eine Version, die auf Basis der Möglichkeiten von HTML5 und CSS3 (und Javascript) an die Erfordernisse der jeweiligen Situation angepasst wird. Foundation 3 ist ein solches Framework und soll im Folgenden anhand eines kleinen Beispiels kurz vorgestellt werden. Eine umfangreiche Einführung findet sich in der Dokumentation auf der Homepage des Herstellers.

Layout-Grundlagen

Die Grundlage des Foundation 3-Layouts ist das „Grid“, ein Gitter aus Zeilen und Spalten, das auch Verschachtelungen unterstützt. Zeilen enthalten dabei Spalten, von denen immer 12 ein Ganzes bilden. Die Breite einer Spalte ist relativ zum verfügbaren Platz und letztendlich in Prozent definiert. Über CSS-Klassen wird angegeben, wie viele Spalten ein bestimmter Inhalt breit sein soll (1 bis 12 Spalten, 1/12 bis 12/12 der verfügbaren Breite, also 8,3333% bis 100%).

Ein einfaches, dreispaltiges Layout

Ein einfaches, dreispaltiges Layout ist schnell realisiert:

<div class="row">
    <div class="two columns">
        <h3>Linke Spalte</h3>
        <p>z.B. Navigation</p>
    </div>
    <div class="eight columns">
        <h1>Mittlere Spalte</h1>
        <p>für Inhalt</p>
    </div>
    <div class="two columns">
        <h3>Rechte Spalte</h3>
        <p>z.B. für weiterführende Informationen</p>
    </div>
</div>

Das Ergebnis

Hier mit markierter Zeile:

und hier mit markierten Spalten:

und bei reduzierter Breite offenbart sich das responsive Layout:

Erweitertes Layout

Unter http://demo.jochenlinnemann.de/foundation/ habe ich ein erweitertes Layout hochgeladen. Hier kommen die Top-Bar und die Breadcrumbs von Foundation 3 zum Einsatz. Wie im obigen Beispiel zu sehen ist, ist eine Zeile auf 940px Breite vorkonfiguriert. Im erweiterten Layout habe ich durch eine eigene Klasse die Spaltenbreite auf 100% des Dokumentes festgelegt. Standardmäßig wechselt das Layout unterhalb einer Breite von 768px in den „Mobilgerätemodus“. Dies habe ich auch im erweiterten Layout beibehalten. Lediglich für die Top-Bar habe ich den Umbruch des Layouts auf 340px heruntergesetzt, da bis dahin genug Platz für alle Buttons bleibt.

Zwei Zeilen, zwei Spalten und Schachtelungen

<header class="row full-width">
    <div class="twelve columns">
    </div>
</header>

<div class="row full-width">
    <div class="eight columns">
        <div class="row">
            <div class="four columns">
            </div>
            <div class="four columns">
            </div>
            <div class="four columns">
            </div>
        </div>
    </div>
    <div class="four columns">
    </div>
</div>

Das Ergebnis

Bei höherer Breite:

Und bei reduzierter Breite:

Ausblick

Zukünftige Entwicklungen halten noch ganz andere Möglichkeiten bereit. Ein Ausblick wird in diesem Artikel gegeben: http://www.webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts

Was ist neu an HTML5?

HTML5 entfernt ein paar selten benutzte (oder auch durch CSS nutzlos gewordene) Tags und führt einige neue ein. Diese neuen Tags dienen in der Regel entweder der besseren (semantischen) Strukturierung von Dokumenten oder unterstützen multi-mediale Webseiten.

Zu den neuen Tags gehören u.a.:

  • <header> definiert einen Kopfbereich
  • <footer> definiert einen Fußbereich
  • <aside> definiert einen Seitenbereich
  • <section> umschließt einen Abschnitt
  • <article> kennzeichnet einen Artikel
  • <nav> kennzeichnet die Links der Navigations
  • <audio> kennzeichnet Audio-Inhalte
  • <video> kennzeichnet Video-Inhalte
  • <canvas> ermöglicht freies Zeichnen per JavaScript

Besondere Beachtung, zumindest im Hinblick auf die Entwicklung von Browserspielen, verdient <canvas> – was damit möglich ist, verdeutlicht das Spiel Cut the Rope.