Zurb Foundation - Raster System

Im zweiten Artikel über das Responsive Frontend Framework Foundation geben wir einen Einblick in das Raster System, skizzieren die Vorteile und zeigen erste Anwendungsmöglichkeiten.

Zurb Foundation - Responsive Frontend Framework

Musste man sich vor vielen Jahren bei der Programmierung von Webseiten noch mit nahezu unwartbaren und beängstigenden Tabellenlayouts behelfen, so sind heute moderne Raster-Systeme das Werkzeug der Wahl, um schnell, flexibel und device-unabhängig selbst komplexe Weblayouts umzusetzen.

Foundation verfügt ebenfalls über ein ausgereiftes Raster-System (aka Grid), das in der aktuellen Version 5 noch ein paar zusätzliche Features erhalten hat.


Das Raster System von Foundation 5

Foundation verfügt über ein Raster System, das auf Basis von verschiedenen Media-Queries unterschiedliche Bildschirm-Auflösungen bedient. Neu in Version 5 hinzugekommen ist das Medium Raster, womit aktuell folgende Raster Varianten zur Verfügung stehen:

  • Small Grid (max-width: 40em)
  • Medium Grid  (min-width: 40.063em, max-width: 64em)
  • Large Grid  (min-width: 64.063em, max-width: 90em und größer)

Die Steuerung des prozent-basierten Raster Systems erfolgt über unterschiedliche Media-Queries, wobei die Dokumentation zu den Media-Queries einen sehr guten Überblick über die einzelnen Schwellenwerte (Breakpoints) gibt.

Foundation arbeitet nach dem Mobile-First Prinzip (ausgehend vom kleinsten Device z.B. Smartphone wird die Seite in Komplexität und Layout schrittweise für die jeweils größeren Endgeräte optimiert) und es empfiehlt sich daher, bei der konkreten programmiertechnischen Umsetzung ebenfalls mit den mobilen Layouts zu starten.


HTML Markup

Standardmäßig verfügt das Raster von Foundation über 12 Spalten, die beliebig ineinander verschachtelt werden können, um so auch komplexe Layouts einfach und schnell abbilden zu können. Wem 12 Spalten nicht genügend Flexibilität bieten, der kann sich via SASS oder z.B. auch auf der Download Seite von Foundation sehr leicht eine angepasste Version zusammenstellen.

Die Verwendung des Rasters ist denkbar einfach. Zu Beginn definiert man ein HTML-Element (z.B. <div>) und gibt diesem Element die Klasse "row":

<div class="row"></div>

Die Ausgabe hat dann beispielhaft folgendes Aussehen:

 

Damit erhält man das horizontale Grundgerüst, das in weiterer Folge die einzelnen vertikalen Spalten des Rasters aufnehmen kann.

<div class="row">
	<div class="small-2 columns">2 Spalten</div>
	<div class="small-4 columns">4 Spalten</div>
	<div class="small-6 columns">6 Spalten</div>
</div>

Die Ausgabe hat dann beispielhaft folgendes Aussehen:

2 Spalten
4 Spalten
6 Spalten

Wie bereits zuvor kurz erwähnt, arbeitet Foundation standardmäßig nach dem Mobile-First Prinzip. Im konkreten Fall werden somit mit dem zuvor definierten Raster (Small) auch alle größeren Bildschirmauflösungen durch CSS-Vererbung (Kaskadierung) bedient, ohne dass man für die beiden anderen Raster (Medium & Large) spezielle Adaptierungen im HTML Source-Code durchführen müsste.

Im Umkehrschluss bedeutet das allerdings, dass man dadurch eine sehr große Flexibilität bei der Steuerung des Rasters über unterschiedliche Auflösungen und Devices hinweg hat, ohne allzu großen Mehraufwand.

Das nachfolgende Beispiel demonstriert dabei, wie man sehr einfach unterschiedliche Raster für unterschiedliche Auflösungen und Devices definieren kann:

<div class="row">
	<div class="small-2 medium-4 columns">2 Small, 4 Medium</div>
	<div class="small-4 medium-4 columns">4 Small, 4 Medium</div>
	<div class="small-6 medium-4 columns">6 Small, 4 Medium</div>
</div>

Die Ausgabe hat dann z.B. auf Smartphones beispielhaft folgendes Aussehen:

2 Small
4 Small
6 Small

Und auf Tablets & Desktop Geräten beispielhaft folgende:

4 Medium
4 Medium
4 Medium

Der CSS-Vererbung folgend, wäre somit das Medium Raster auch für das nicht definierte Large Raster maßgeblich und man könnte dieses bei Bedarf noch zusätzlich genauer definieren.


Ausblick

Nach dieser ersten Einführung in das Raster System von Foundation werden wir in einem der nächsten Artikel noch über weitere spannende Aspekte des Foundation Grids berichten wie z.B.:

  • Verschachtelte Raster (Nested Grids)
  • Offsets
  • Unvollständige Spalten
  • Zentrierte Spalten
  • und vieles mehr

« Zurück zur Übersicht

« Zurück von Sascha Reschun von Sascha Reschun Weiter »

Zur besten Nutzung dieser Website und zur Bedienerfreundlichkeit werden Cookies verwendet. Diese Website nutzt zusätzlich Google Analytics und Scripte, welche Cookies benutzen. Wenn Sie diese Website weiter nutzen, gehen wir von Ihrem Einverständnis aus. [ Mehr zum Datenschutz ].
OK