Das ZDV Dashboard Design basiert auf ZURB Foundation. Foundation liefert für das responsive arrangieren von Inhalten ein Gitter-System aus. Zur Verwendung des Gitter-Layouts sei deshalb auf folgende Seiten verwiesen:
Eine weitere wertvolle Resource ist die ZURB Library mit vielen, hilfreichen Inhalten:
Das Grid-Layout kann immer verwendet werden, wenn Inhalte oder Container (für Inhalte) auf der Seite angeordnet werden sollen. Es hat sich jedoch gezeigt, dass das Grid-Layout nicht für alle Anwendungsfälle geeignet ist. Dies ist insbesondere dann der Fall, wenn das Seitenlayout aus verschiedenen, voneinander funktional unabhängigen Komponenten besteht. Für solche Fälle ergänzen wir das Foundation Grid-Layout um Layout-Flows.
Layout-Flows entspringen den Anforderungen, die Web-Applikationen an das Seitenlayout stellt.
Beim Gestalten von Applikationen möchte man häufig auf einfache Weise den Bildschirm in mehrere Bereiche einteilen, ohne die Art und Menge der Inhalte berücksichtigen zu müssen.
Eine einfache Lösung, wie sie auch in ähnlicher Art von herkömmliche Softwareapplikationen verwendet werden, ist das lineare Anordnen von Inhalten entlang einer Dimension. Hierzu dienen die zdv-vflow und zdv-hflow Klassen, die ineinander geschachtelt werden können.
Vertikale Layouts arrangieren ihre Kinder von oben nach unten. Alle Kinder nehmen dabei die volle Breite ihres Containers ein. Falls die Gesamthöhe der Kinder die Höhe des Containers überschreitet, wird der Container scrollbar. Für die Höhe eines Kindes sind folgende Verhalten vordefiniert:
zdv-size-auto nimmt das Kind genau die Höhe ein, die dessen Inhalt anfordert. Das Strecken der Höhe wird unterbunden.
zdv-size-stretch kann die Höhe eines Kindes auch kleiner als von seinem Inhalt angefordert sein.
Gibt man dem Container die Klasse zdv-[size]-block-flow lässt sich für die Größe [size] und drunter die Klasse zdv-size-stretch deaktivieren. Hiermit lässt sich das Scrollverhalten auf verschiedenen Displaygrößen kontrollieren. Folgendes Beispiel illustriert das Verhalten der zwei Klassen.
Horizontale Layouts arrangieren ihre Kinder von links nach rechts. Alle Kinder nehmen dabei die volle Höhe ihres Containers ein. Die Gesamtbreite der Kinder darf die Breite des Containers nicht überschreiten. Für die Breite eines Kindes sind folgende Verhalten vordefiniert:
zdv-size-auto nimmt das Kind genau die Breite ein, die dessen Inhalt anfordert. Das Strecken der Breite wird unterbunden.
zdv-size-stretch kann die Breite eines Kindes auch kleiner werden als es von seinem Inhalt angefordert wird.
[size]-[number] Klassen, wie sie auch zur Festlegung der Breite der column Klassen verwendet werden, können auch eingesetzt werden, um eine feste Breite nach Größe des Bildschirms festzulegen. Genaueres steht auf den Seiten zum Foundation Grid-System.
Es gibt noch einen großen Unterschied zu vertikalen Layouts. Containern mit der zdv-hflow Klasse kann auch eine zdv-[size]-reverse-flow Klasse hinzugefügt werden. Dies sorgt dafür, dass auf Bildschirmen der Größe [size] und kleiner das horizontale Layout zu einem vertikalen Layout umschaltet. Wird ein horizontales Layout umgeschaltet, so verhalten sich alle Kinder so, als wären sie mit der Klasse zdv-size-auto ausgestattet. Falls dann die Gesamthöhe der Kinder die Höhe des Containers überschreitet, so wird der Container scrollbar.
Folgendes Beispiel illustriert das Verhalten die Klassen.