Diese Seite listet nur die Zusätzlichen Klassen, um die das ZDV die Foundation Klassen ergänzt hat. Die folgende Liste bietet eine Übersicht nützlicher Seiten:
Foundation kontrolliert die Abstände der Inhalte indem es jedem Element einen margin-bottom gibt. Wir bieten zusätzlich die Klassen .top und .bottom um einen margin-top oder margin-bottom an Stellen hinzuzufügen, um mehr Kontrolle über die Abstände zu bieten. Diese Klassen können mit den Klassen .small und .large kombiniert werden, um zu den Größenklassen der Foundation Callout zu passen.
Der <hr /> Tag kann verwendet werden um Inhalte visuell voneinander zu trennen. Das ZDV bietet zusätzlich die folgenden Klassen:
.dual zeigt anstelle eines Streifens zwei Streifen an.
.dual ausgestattet ist, kann mittels .wide der Abstand der Streifen erhöt werden.
.small und .large können auch hier verwendet werden, um den Abstand nach unten zu kontrollieren.
Das ZDV bietet Hilfsklassen an um auf einheitliche Weise Ränder für beliebige Container hinzuzufügen.
zdv-border fügt an allen Seiten einen Rand hinzu
zdv-border-top,
zdv-border-bottom,
zdv-border-left,
zdv-border-right fügt für die jeweilige Richtung einen Rand hinzu.
Das ZDV bietet zusätzlich zur .row Klasse eine header-row Klasse. Sie dient dazu auf bequeme Weise links bzw. rechts einer Überschrift weitere Elemente einzufügen und auszurichten. Standardmäßig werden alle Kinder, die keine Überschriften sind (<h1> etc.), rechts von der Überschrift angeordnet. Fügt man die Klasse .stretch zu einem Kind hinzu, so wird dessen Breite gestreckt um den verfügbaren horizontalen Freiraum auszufüllen. Falls mehrere Kinder diese Klasse erhalten, so wird der verfügbare Freiraum gleichmäßig unter ihnen aufgeteilt. Mittels den Klassen .left und .right kann explizit angeordnet werden, ob ein Kind links bzw. rechts von der Überschrift angeordnet werden soll.
Das ZDV verwendet Foundation Callouts als Boxen. Diese sind angepasst und können ohne zusätzliche Klassen eingesetzt werden.
Foundation sieht den <code> Tag für Texte vor, die als Code angezeigt werden sollen. Dieser Tag eignet sich allerdings nicht für mehrzeiligen Code. Das ZDV bietet daher die Klassen .code und .indent, mit denen <div> Tags ausgestattet werden können. Die Klasse .indent rückt dabei einen <div> Tag ein.
Das ZDV bietet Klassen für einfache Listen (zdv-list) als auch Bäume (zdv-tree-list).