Gestaltungsraster

Das Gestaltungsraster ist der unsichtbare Helfer in der Entwicklung konsistenter Designs. Es garantiert ein durchgängiges Layout über alle Seiten hinweg, minimierte Aufwände und höhere Qualität in den CSS-Regeln, schnellere Entwicklung von Prototypen, Reduktion der Komplexität und verlässliche Unterstützung aller Browser, die unterstützt werden müssen. Das Gestaltungsraster _(„Layout-Grid“)_ für Mobile, Tablet & Desktop übernimmt das etablierte 12er-Raster.

Wann welches Gestaltungsraster benutzen?

Als stark an Formular-Prozessen orientierte Anwendung benutzen das Zoll-Portal und die angeschlossenen Fachverfahren im Inhaltsbereich <main> der Anwendungen ein einspaltiges Design, insbesondere auch um den linearen Ablauf solcher Formulare und Formular-Prozesse zu betonen.

Bei eher von Textinhalten getriebenen Seiten (Hilfeseiten, Übersichtsseiten und Vergleichbare), die oftmals um eine zusätzliche Navigation, Filterkomponente oder eine Marginalspalte erweitert werden müssen, bietet sich hingegen ein 2-spaltiges Design in der Aufteilung 1/3 + 2/3 (= 4 + 8 Grid-Spalten) an.

Verhalten des Grids

Als besonders effizient hat sich erwiesen, den Aufbau der Seiten nach dem Prinzip „Mobile First“ vorzunehmen. Hierbei wird zunächst die mobile, oftmals einspaltige Ansicht erstellt und darauf aufbauend danach die (mehrspaltige) Desktop-Version.

Das Design System trifft keine Annahmen, welche Geräte und Bildschirmgrößen Nutzende verwenden müssen, um die Anwendung nutzen zu können. Daher ist das Layout grundsätzlich fluid, d. h. dass innerhalb gewisser Grenzen die komplette Breite des jeweiligen Ausgabemediums ausgenutzt wird. Wird der Ausgabebereich verkleinert, passt sich der Inhalt bis zu definierten Punkten kontinuierlich an.

An diesen Punkten (Breakpoints) kann eine Anpassung des Layouts durch Umbrechen so erfolgen, dass eine optimale Nutzung des Ausgabemediums gewährleistet wird. Grenzen werden lediglich gesetzt, indem die Darstellung auf sehr großen Monitoren in der Breite so begrenzt wird, dass die Lesbarkeit der Inhalte gewährleistet, und eine Untergrenze definiert ist, ab der die Nutzung einer stark Formular- und Datentabellen-zentrierten Anwendung nicht mehr sinnvoll erscheint.

Ebenso vorgesehen ist die fixe, nicht-liquide Bemaßung ganzer Masken mit den gängigen Breakpoints 576px, 768px, 992px, 1200px und 1400px.

Ausrichtung und Positionierung in Grids und Sub-Grids

Ein Layout-Raster teilt die verfügbare Fläche in Zeilen und Spalten. Dazu wird ein Container-Element zunächst in Zeilen (Rows) mit variabler Höhe aufgeteilt. Zellen des Rasters werden durch anteiliges Zusammenfügen von Spalten gebildet. Beispielsweise kann die Aufteilung 4/12 zu 8/12 oder 6/12 zu 6/12 betragen. Die aus Spalten und Zeilen gebildeten Zellen können wiederum durch Zeilen und Spalten geteilt werden (Schachtelung).

Insbesondere in Formularen definieren die eingesetzten Grid-Spalten die Breiten der enthaltenen Formular- und Text-Elemente, da diese selbst generell flexibel angelegt sind und sich auf den zur Verfügung stehenden Platz ausdehnen.

Platzierungen außerhalb des Rasters

Grundsätzlich müssen alle Elemente innerhalb einer Seite auch innerhalb des Gestaltungsrasters (CSS-Grid) platziert werden. Ausnahmen von dieser Regel bestehen bei eigenständig gestalteten Bereichen wie dem Header und dem Footer der Seiten. Dynamische Elemente die sich wie z. B. Navigationsmenüs, Dialoge, Fehlermeldungen und Tooltips über den Inhalt legen stehen ebenfalls nicht im Raster.

Horizontale und vertikale Abstände und Stege

Abstände und Stege ergeben sich automatisch aus der Verwendung der Grid-Klassen, da diese dort bereits definiert sind. Wenn keine horizontalen oder vertikalen Abstände erwünscht sind, so bietet das bootstrap-Grid hierfür eine entsprechende Klasse, um diese aufzuheben (g-0).

Bitte beachten Sie, dass vertikale Intervalle grundsätzlich in der Einheit rem angegeben sind, horizontale Abstände hingegen in der Einheit px. Hintergrund ist einerseits ein gleichmäßiger typografischer Rhythmus auf der y-Achse durch die Einheit rem, andererseits wird damit verhindert, dass bei Schriftskalierung durch die Nutzenden der zur Verfügung stehende horizontale Raum unnötig verkleinert wird.

Beschreibung Bootstrap-Grid

Unser Raster unterstützt sechs responsive Breakpoints. Diese Breakpoints basieren auf Media Queries mit Mindestbreite, d. h. sie wirken sich auf diesen Breakpoint und alle darüber liegenden Breakpoints aus (z. B. .col-sm-4 gilt für sm, md, lg, xl und xxl). Dies bedeutet, dass Sie die Größe und das Verhalten von Containern und Spalten für jeden Breakpoint steuern können.

Container zentrieren Ihren Inhalt horizontal und bringen ihre eigenen Innenabstände mit sich. Verwenden Sie .container für eine responsive Breite, .container-fluid für eine Breite von 100 % über alle Viewports und Geräte hinweg, oder einen responsiven Container (z. B. .container-md) für eine Kombination aus fixen und flexiblen Breiten.

Zeilen fassen Spalten ein, jede Spalte verfügt über einen horizontalen Innenabstand, um den Abstand bzw. Steg zwischen den Spalten zu steuern. Diese Abstände werden dann in den Zeilen mit negativen Aussenabständen ausgeglichen um sicherzustellen, dass die Inhalte der Spalten visuell an der linken Achse ausgerichtet ist. Zeilen unterstützen auch Modifikator-Klassen, um Spaltengrößen einheitlich anzuwenden, und Klassen für Stege, um die Abstände zwischen Ihren Inhalten zu ändern.

Spalten sind sehr flexibel: Pro Zeile stehen 12 Vorlagenspalten zur Verfügung, sodass Sie verschiedene Kombinationen von Elementen erstellen können, die sich über eine beliebige Anzahl von Spalten erstrecken. Die Spaltenklassen geben die Anzahl der Spalten an, die überspannt werden sollen (z. B. col-4 überspannt vier Spalten). Die Breiten werden in Prozentwerten festgelegt, damit Sie immer die gleiche Größe relativ zueinander haben.

Stege sind ebenfalls flexibel und anpassbar: Steg-Klassen sind für alle Breakpoints verfügbar und haben die gleichen Größen wie die Aussen- und Innen-Abstände (margin und padding). Ändern Sie horizontale Stege mit .gx-Klassen, vertikale Stege mit .gy- oder alle Stege mit .g-*-Klassen. Mit .g-0 können Sie unerwünschte Stege entfernen.

Beim Erstellen von Grid-Layouts werden alle Inhalte in Spalten angeordnet. Die Hierarchie des Bootstrap-Gitters reicht vom Container über die Zeile und die Spalte bis hin zu Ihrem Inhalt.

Für ein Grid im Grid fügen Sie eine .row innerhalb einer Grid-Spalte ein. Verschachtelte Zeilen sollten eine Reihe von Spalten enthalten, die sich zu 12 oder weniger addieren.

Übersicht Breakpoints

Klassen für Spaltenbreite

Klassen für Spaltenausrichtung

Für die Ausrichtung der Spalten erhält das Eltern-Element mit der Klasse .row die entsprechende Klasse.

Stege

Stege sind die Lücken zwischen den Spalteninhalten, die durch horizontales Padding entstehen. Wir setzen padding-right und padding-left für jede Spalte und verwenden negative Ränder, um diese am Anfang und Ende jeder Zeile auszugleichen, um den Inhalt auszurichten.

Die Zwischenräume können responsiv angepasst werden. Verwenden Sie Breakpoint-spezifische Steg-Klassen, um horizontale Stege, vertikale Stege oder alle Stege zu ändern.