Die konsequente Verwendung eines Rastersystems bildet die Grundlage für eine harmonische und konsistente Positionierung der Elemente auf dem Bildschirm. Das Raster hilft der Gestaltung und sorgt für ein einheitliches Erlebnis über alle Bereiche von GeFa hinweg, durch gleiche Abstände und saubere Umsetzung der Layouts auch auf unterschiedlich großen Bildschirmen.

Grundsätzlich wurden Raster und Umbruchpunkte so angelegt, dass GeFa auf allen Endgeräten, verschiedenen Fenstergrößen und individuellem Zoom von bis zu 400% problemlos genutzt werden kann. Dem Raster liegt ein 4-Pixel-Basisgrid zugrunde.

Breakpoints werden als Mindestbreite definiert. Das bedeutet, dass Bildschirmgrößen, die zwischen zwei definierten Breakpoints liegen, alle Abmessungen des Breakpoints mit der kleineren Größe übernehmen. Die Spaltenbreiten sind fließend und variieren je nach Bildschirmgröße.

TABLE

1. Rand (Margin): Rasterränder sind die äußeren Ränder des Rasters. Unsere Layouts haben einen festen Rand von 48 Pixeln.
2. Spalten (Columns): Spalten sind die vertikalen Leitlinien, an denen wir die meisten Inhalte ausrichten. Das Seitenraster besteht aus 12 Spalten, die Spaltenbreiten variiert entsprechend der Gesamtfensterbreite.
3. Stege (Gutters): Stege sind die Lücken zwischen den Spalten. Die Stegbreiten sind feste Werte (16 px, 24 px, etc.), basierend auf den jeweiligen Breakpoints.

Das Seitenraster besteht aus 12 Spalten mit einem fixen Spaltenabstand von jeweils 48 Pixeln. Der Abstand zum Seitenrand beträgt ebenfalls 48 Pixel. Die Spaltenbreiten passen sich dementsprechend an (je nach Gesamtfensterbreite).

Dem zugrunde liegt ein 8px Basisgrid.

Für mittlere Fensterbreiten bleibt das Grundraster der Seite bestehen (wie bei großen Breiten). Elemente innerhalb brechen ggf. um oder Seitenbereiche werden ausgeblendet (siehe Seitenaufbau).

Erst ab einer Gesamtscreenbreite von unter 760 Pixel bricht die Applikation in ein einspaltiges Layout um. Der Abstand von Inhaltsbereich zu Rand beträgt 16 Pixel.

Innerhalb des Formularbereichs wird ein vom Seitenlayout abweichendes Raster verwendet.

Das Formularraster besteht aus 12 Spalten mit einem fixen Spaltenabstand von jeweils 16 Pixeln. Der Abstand zum Formularrand beträgt 88 Pixel. Die Spaltenbreiten passen sich dementsprechend an (je nach Gesamtbreite des Formularbereichs).

TABLE

Ab einer Formularbreite von unter 640 Pixeln reduziert sich der Abstand vom Formularraster zum Formularrand von 88 auf 32 Pixel.

Am 12-Spaltigen Layout mit 16 Pixel Spaltenabstand ändert sich dadurch nichts.

Ab einer Formularbreite von unter 480 Pixeln bricht das Formularlayout in ein einspaltiges Layout um. Der Abstand vom Formularraster zum Formularrand reduziert sich auf 24 Pixel. Es wird nur noch maximal ein Eingabefeld pro Zeile dargestellt.