Grundlagen Seitenaufbau

Die Usabiltiy der Seite steht für uns im Vordergrund, daher sind unsere Seiten grundsätzlich im Responsive Design und somit für die gängigsten Endgeräte optimiert. Das Rastersystem setzt auf Bootstrap und beinhaltet ein anpassungsfähiges, Mobile-First-basiertes, fließendes Rastersystem, das bis zu 12 Spalten über verschiedene Geräte- oder Viewport-Größen skaliert. Dabei existieren vordefinierte Klassen für einfache Layout-Optionen, sowie umfangreiche Mixins für die Erstellung von semantischeren Layouts.

Container Breite

Large devices Desktops (≥1200px): 1170px
Medium devices Desktops (≥992px): 970px
Small devices Tablets (≥750px): 970px
Extra small devices Phones (<768px): Auto (Screen Width)

Spaltengröße und Abstände

12 Spalten
15px Abstand nach rechts und links pro Spalte (auch außen)
Spalten beliebig kombinierbar (max. 12 pro Zeile)
Spalten können offset haben

Grid System

Spalte 1
8.33333%

Spalte 2
8.33333%

Spalte 3
8.33333%

Spalte 4
8.33333%

Spalte 5
8.33333%

Spalte 6
8.33333%

Spalte 7
8.33333%

Spalte 8
8.33333%

Spalte 9
8.33333%

Spalte 10
8.33333%

Spalte 11
8.33333%

Spalte 12
8.33333%

Spalte 1
25%

Spalte 2
16.66667%

Spalte 3
41.66667%

Spalte 4
16.66667%

Spalte 1 (1 Spalte Offset)
50% (8.33333%)

Spalte 2
16.66667%

Spalte 3
25%

Spalte 1
33.33333%

Spalte 2
33.33333%

Spalte 3
33.33333%

Spalte 1
50%

Spalte 2
50%

Spalte 1
100%

Grundlagen Seitenaufbau

Container Breite

Spaltengröße und Abstände

Grid System

Abhängigkeiten