Jede Seite liegt in einem Container `.container-*`. Er sorgt dafür, dass die Seite nur eine bestimmte Breite einnimmt und mittig platziert wird. Er ist außderdem für das "responsive"-Verhalten der Seite verantwortlich.

**Anmerkung:** Zu Demonstrationszwecken "brechen" wir hier mit dem üblichen Layout.

</div> </div>

Anwendung

Um ein einfaches Spaltenlayout zu erstellen, legt man lediglich eine `.row` und die entsprechenden Anzahl von `.col-*-*` Spalten in den Container.

{% highlight html %}
Navigation
Inhalt
{% endhighlight %}
Navigation
Inhalt

In der Summe sollten sich pro Reihe zwölf Spalen befinden, da es sich beim hier vorliegenden Grid standardmäßig um ein 12-spaltiges System handelt.

col-l-1
col-l-1
col-l-1
col-l-1
col-l-1
col-l-1
col-l-1
col-l-1
col-l-1
col-l-1
col-l-1
col-l-1
col-l-2
col-l-2
col-l-2
col-l-2
col-l-2
col-l-2
col-l-3
col-l-3
col-l-3
col-l-3
col-l-4
col-l-4
col-l-4
col-l-6
col-l-6
col-l-3
col-l-6
col-l-3
col-l-4
col-l-8
col-l-12

Container

Es gibt zwei Arten von Containern, welche das Verhalten des Grids bestimmern. Die Klasse `container-fixed` ist für Layouts mit festgelegter Breite gedacht; `container-liquid` für jene, die sich von Haus automatisch in die komplette Breite einpassen.

Beide Container verhalten sich responsive und passen sich an die Breite des Tabs/Fensters an.

Ein Container mit `container-fixed` erhält seine Breite in einem bestimmten Bereich und schaltet stufenweise auf die nächst verfügbare Größe um. Ist nicht genug Freiraum verfügbar (mittlere Größe oder weniger), verhält er sich ebenfalls wie `container-liquid`.

Liquid Grid Beispiel

A
B
C
D

Beispiel für ein fixiertes Grid Die aktuelle Fenstergröße ist kleiner L. Der Kontainer verhält sich wie die liquid Variante.

A
B
C
D

Ausrichtung

Mit den Klassen `left, center, right` lassen sich fixierte Grids an der entsprechenden Kante der Seite ausrichten. Ist keine Klasse explizit aufgeführt, wird der Container zentriert.

Beispiele für die Ausrichtung Die aktuelle Fenstergröße ist kleiner L. Der Kontainer verhält sich wie die liquid Variante.

left
A
B
C
D


<div class=“container-liquid left”> <div class=“row”> <div class=“col-l-12”>right</div> </div> </div> <div class=“container-fixed demo-grid grid-debug right”> <div class=“row”> <div class=“demo-col col-l-3”>A</div> <div class=“demo-col col-l-3”>B</div> <div class=“demo-col col-l-3”>C</div> <div class=“demo-col col-l-3”>D</div> </div> </div>

Bildschirmgrößen

Das Grid-System unterstützt bis zu fünf verschiedene Größen, welche von Mobilegeräten über Tablets, Desktop bis zu TV-Geräten sämtliche Gerätetypen abdecken sollen. Die Größen werden unterteilt in `XS, S, M, L` und `XL`. Die Ausgangsgröße ist `L` und wird durch den zweiten Teil im `col-*-*`-Klassennamen angegeben. Durch die Verwendung von weiteren Klassen wie `col-s-6` or `col-xl-12` erhält man bei sich ändernder Fensterbreite ein dynamischeres Layout.

Tipp: Dies ist wohl der beste Moment um auf ein mitgeliefertes Werkzeug hinzuweisen, das `DebugThingy!`, welches sich in der rechten oberen Ecke befindet. Durch Drücken des -Knopfs, wird die momentane Breite des vorliegenden Seiteninhalts festgesetzt/gelöst. Dadurch sind die Beispiele leichter nachvollziehbar, da sie nicht mehr vertikal verrutschen, wenn die Fenstergröße geändert wird.

Beispiel:

A: S-12 // M-6 // L-3 !XS !XL
B: S-12 // M-6 // L-9 !XS !XL

Wie bereits erwähnt ist die Standartgröße des Grids Größe `L`. Mit `XL` überschreibt man die Werte für größere Layouts; mit den Größen `M, S, XS` überschreibt man sukzessive die Spaltenbreiten für schmalere Layouts. Eine Spaltenbreite die durch `S` angegeben wird, gilt also auch für `XS`-Layouts, sofern für diese nicht auch eine Klasse angegeben wurde.

Hinweis: Es ist eforderlich, dass der Viewport im head des Dokuments korrekt angegeben wird.

{% highlight html %}{% endhighlight %}

Beispiel:

col-xs-12 col-s-6 col-l-8
col-s-6 col-l-4
col-xs-6 col-l-4
col-xs-6 col-l-4
col-xs-6 col-l-4
col-l-6
col-l-6

Verschachtelungen

Verschachteln ist problemlos möglich. Sobald eine `.row` innerhalb einer Spalte eingefügt wird, ist diese der Ausgangspunkt für ein neues 12-Spalten-System.

{% highlight html %}
Navigation
Teil 1
Teil 2
{% endhighlight %}

Beispiel:

col-l-4 col-m-12
col-l-8 col-m-12
col-l-6 col-m-12
col-l-6 col-m-12

Utility Klassen

**Achtung:** Die Utility Klassen sind mit Version 2.1 veraltet. Bitte verwenden Sie die Hilfsklassen `.hidden-*` und `.visible-*`. Siehe [Helfer](helper.html)
Es ist möglich Inhalt abhängig von der aktuellen Layoutgröße zu zeigen oder zu verstecken und damit die Seite gerätefreundlicher zu machen. Genau wie bei den Spalten gibt es hierfür Klassen, welche nach Größe benannt sind, bspw. `col-s-hide` oder `col-xl-show`. Im Gegensatz zu den Klassen für Spalten jedoch, gelten diese ausdrücklich nur für die jeweilige Größe und nicht die darauf folgenden. **Beispiel:**

Aktuell sehen sie das Grid in Größe XSSMLXL. Verändern Sie die Breite des Fensters um die Größen (S, M oder L ) zu sehen.

Versatz und resets

Spalten mit verschiedenen Abständen bei unterschiedlichen breakpoints.

Beispiel:

col-m-5 col-l-6
col-m-5 offset-m-2 col-l-6
col-m-6 col-l-5 col-xl-6
col-m-6 offset-m-0 col-l-5 offset-l-2 col-xl-6 offset-xl-0

<div class=“main”> <div class=“container-fixed”>