<!--
//
//
// Grid
-->
<p>
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.
</p>
<div class="tc-note">
**Anmerkung:**
Zu Demonstrationszwecken "brechen" wir hier mit dem üblichen Layout.
</div>
</div>
</div>
<div class="main">
<div class="container-fixed">
<h2>Anwendung</h2>
<p>
Um ein einfaches Spaltenlayout zu erstellen, legt man lediglich eine `.row`
und die entsprechenden Anzahl von `.col-*-*` Spalten in den Container.
</p>
{% highlight html %}
<div class="container-fixed">
<div class="row">
<div class="col-l-4">Navigation</div>
<div class="col-l-8">Inhalt</div>
</div>
</div>
{% endhighlight %}
</div>
</div>
<div class="container-fixed demo-grid grid-debug">
<div class="row">
<div class="col-l-4 demo-col">
<span class="text-nowrap">Navigation</span>
</div>
<div class="col-l-8 demo-col">
<span class="text-nowrap">Inhalt</span>
</div>
</div>
</div>
<div class="container-fixed">
<p>
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.
</p>
</div>
<div class="container-fixed demo-grid grid-debug">
<div class="row"><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div><div class="col-l-1 demo-col"><span class="text-nowrap">col-l-1</span></div></div>
<div class="row"><div class="col-l-2 demo-col"><span class="text-nowrap">col-l-2</span></div><div class="col-l-2 demo-col"><span class="text-nowrap">col-l-2</span></div><div class="col-l-2 demo-col"><span class="text-nowrap">col-l-2</span></div><div class="col-l-2 demo-col"><span class="text-nowrap">col-l-2</span></div><div class="col-l-2 demo-col"><span class="text-nowrap">col-l-2</span></div><div class="col-l-2 demo-col"><span class="text-nowrap">col-l-2</span></div></div>
<div class="row"><div class="col-l-3 demo-col"><span class="text-nowrap">col-l-3</span></div><div class="col-l-3 demo-col"><span class="text-nowrap">col-l-3</span></div><div class="col-l-3 demo-col"><span class="text-nowrap">col-l-3</span></div><div class="col-l-3 demo-col"><span class="text-nowrap">col-l-3</span></div></div>
<div class="row"><div class="col-l-4 demo-col"><span class="text-nowrap">col-l-4</span></div><div class="col-l-4 demo-col"><span class="text-nowrap">col-l-4</span></div><div class="col-l-4 demo-col"><span class="text-nowrap">col-l-4</span></div></div>
<div class="row"><div class="col-l-6 demo-col"><span class="text-nowrap">col-l-6</span></div><div class="col-l-6 demo-col"><span class="text-nowrap">col-l-6</span></div></div>
<div class="row"><div class="col-l-3 demo-col"><span class="text-nowrap">col-l-3</span></div><div class="col-l-6 demo-col"><span class="text-nowrap">col-l-6</span></div><div class="col-l-3 demo-col"><span class="text-nowrap">col-l-3</span></div></div>
<div class="row"><div class="col-l-4 demo-col"><span class="text-nowrap">col-l-4</span></div><div class="col-l-8 demo-col"><span class="text-nowrap">col-l-8</span></div></div>
<div class="row"><div class="col-l-12 demo-col"><span class="text-nowrap">col-l-12</span></div></div>
</div>
<div class="main">
<div class="container-fixed">
<h2>Container</h2>
<p>
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.
</p>
<p>
Beide Container verhalten sich responsive und passen sich an die Breite
des Tabs/Fensters an.
</p>
<p>
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`.
</p>
<p>
<strong>Liquid Grid Beispiel</strong>
</p>
</div>
</div>
<div class="container-liquid demo-grid grid-debug">
<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>
<div class="main">
<div class="container-fixed">
<br>
<p>
<strong>Beispiel für ein fixiertes Grid</strong>
<span class="col-l-hide col-xl-hide small text-warning">Die aktuelle
Fenstergröße ist kleiner <strong>L.</strong> Der Kontainer verhält sich
wie die liquid Variante.</span>
</p>
</div>
</div>
<div class="container-fixed demo-grid grid-debug">
<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>
<div class="main">
<div class="container-fixed">
<h3>Ausrichtung</h3>
<p>
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.
</p>
<p>
<strong>Beispiele für die Ausrichtung</strong>
<span class="col-l-hide col-xl-hide small text-negative">Die aktuelle
Fenstergröße ist kleiner <strong>L.</strong> Der Kontainer verhält sich
wie die liquid Variante.</span>
</p>
</div>
</div>
<div class="container-liquid left">
<div class="row">
<div class="col-l-12">left</div>
</div>
</div>
<div class="container-fixed demo-grid grid-debug left">
<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>
<br>
<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>
<div class="main">
<div class="container-fixed">
<h2>Bildschirmgrößen</h2>
<p>
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.
</p>
<p>
<strong>Tipp:</strong> Dies ist wohl der beste Moment um auf ein
mitgeliefertes Werkzeug hinzuweisen, das <a href="#debugThingy">`DebugThingy!`</a>,
welches sich in der rechten oberen Ecke befindet. Durch Drücken des
<i class="icon icon-lock" aria-hidden="true"></i>-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.
</p>
<p>
<strong>Beispiel:</strong>
</p>
</div>
</div>
<div class="container-liquid demo-grid grid-debug">
<div class="row">
<div class="demo-col col-l-3 col-m-6 col-s-12">
A:
<span class="col-s-emphased">S-12</span> //
<span class="col-m-emphased">M-6</span> //
<span class="col-l-emphased">L-3</span>
<strong style="color:red">
<span class="visible-xs">!XS</span>
<span class="visible-xl">!XL</span>
</strong>
</div>
<div class="demo-col col-l-9 col-m-6 col-s-12">
B:
<span class="col-s-emphased">S-12</span> //
<span class="col-m-emphased">M-6</span> //
<span class="col-l-emphased">L-9</span>
<strong style="color:red;">
<span class="visible-xs">!XS</span>
<span class="visible-xl">!XL</span>
</strong>
</div>
</div>
</div>
<div class="main">
<div class="container-fixed">
<p>
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.
</p>
<p>
<strong>Hinweis:</strong> Es ist eforderlich, dass der Viewport im head
des Dokuments korrekt angegeben wird.
</p>
{% highlight html %}<meta name="viewport" content="width=device-width, initial-scale=1.0">{% endhighlight %}
<p>
<strong>Beispiel:</strong>
</p>
</div>
</div>
<div class="container-fixed demo-grid grid-debug">
<div class="row">
<div class="demo-col col-xs-12 col-s-6 col-l-8 text-ellipsis">
<span class="text-nowrap col-xs-emphased">col-xs-12</span>
<span class="text-nowrap col-s-emphased">col-s-6</span>
<span class="text-nowrap col-m-emphased col-l-emphased col-xl-emphased">col-l-8</span>
</div>
<div class="demo-col col-s-6 col-l-4">
<span class="text-nowrap col-xs-emphased col-s-emphased">col-s-6</span>
<span class="text-nowrap col-m-emphased col-l-emphased col-xl-emphased">col-l-4</span>
</div>
</div>
<div class="row">
<div class="demo-col col-xs-6 col-l-4">
<span class="text-nowrap col-xs-emphased">col-xs-6</span>
<span class="text-nowrap col-s-emphased col-m-emphased col-l-emphased col-xl-emphased">col-l-4</span>
</div>
<div class="demo-col col-xs-6 col-l-4">
<span class="text-nowrap col-xs-emphased">col-xs-6</span>
<span class="text-nowrap col-s-emphased col-m-emphased col-l-emphased col-xl-emphased">col-l-4</span>
</div>
<div class="demo-col col-xs-6 col-l-4">
<span class="text-nowrap col-xs-emphased">col-xs-6</span>
<span class="text-nowrap col-s-emphased col-m-emphased col-l-emphased col-xl-emphased">col-l-4</span>
</div>
</div>
<div class="row">
<div class="demo-col col-l-6">
<span class="text-nowrap text-strong">col-l-6</span>
</div>
<div class="demo-col col-l-6">
<span class="text-nowrap text-strong">col-l-6</span>
</div>
</div>
</div>
<div class="main">
<div class="container-fixed">
<h2>Verschachtelungen</h2>
<p>
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.
</p>
{% highlight html %}
<div class="container-fixed">
<div class="row">
<div class="col-l-4">Navigation</div>
<div class="col-l-8">
<div class="row">
<div class="col-l-6">Teil 1</div>
<div class="col-l-6">Teil 2</div>
</div>
</div>
</div>
</div>
{% endhighlight %}
<p>
<strong>Beispiel:</strong>
</p>
</div>
</div>
<div class="container-fixed demo-grid grid-debug">
<div class="row">
<div class="demo-col col-l-4 col-m-12">
<span class="text-nowrap col-l-emphased col-xl-emphased">col-l-4</span>
<span class="text-nowrap col-xs-emphased col-s-emphased col-m-emphased">col-m-12</span>
</div>
<div class="demo-col col-l-8 col-m-12">
<span class="text-nowrap col-l-emphased col-xl-emphased">col-l-8</span>
<span class="text-nowrap col-xs-emphased col-s-emphased col-m-emphased">col-m-12</span>
<div class="row">
<div class="demo-col col-l-6 col-m-12">
<span class="text-nowrap col-l-emphased col-xl-emphased">col-l-6</span>
<span class="text-nowrap col-xs-emphased col-s-emphased col-m-emphased">col-m-12</span>
</div>
<div class="demo-col col-l-6 col-m-12">
<span class="text-nowrap col-l-emphased col-xl-emphased">col-l-6</span>
<span class="text-nowrap col-xs-emphased col-s-emphased col-m-emphased">col-m-12</span>
</div>
</div>
</div>
</div>
</div>
<div class="container-fixed">
<h2>Utility Klassen</h2>
<div class="tc-note tc-note-warning">
**Achtung:**
Die Utility Klassen sind mit Version 2.1 veraltet. Bitte verwenden Sie die
Hilfsklassen `.hidden-*` und `.visible-*`. Siehe [Helfer](helper.html)
</div>
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:**
</div>
<div class="container-fixed demo-grid grid-debug">
<div class="row">
<div class="col-l-12">
<p>
Aktuell sehen sie das Grid in Größe
<strong><span class="visible-xs">XS</span><span class="visible-s">S</span><span class="visible-m">M</span><span class="visible-l">L</span><span class="visible-xl">XL</span></strong>. Verändern Sie die Breite des Fensters um die Größen
(<span class="hidden-xs text-emphased">XS, </span><span class="hidden-s text-emphased">S, </span><span class="hidden-m text-emphased">M<span class="hidden-l hidden-xl">,</span> </span><span class="hidden-l"><span class="visible-xl">oder</span> <span class="text-emphased">L</span> </span><span class="hidden-xl">oder <span class="text-emphased">XL</span></span>) zu sehen.
</p>
</div>
</div>
</div>
<div class="main">
<div class="container-fixed">
<h2>Versatz und resets</h2>
<p>
Spalten mit verschiedenen Abständen bei unterschiedlichen breakpoints.
</p>
<p>
<strong>Beispiel:</strong>
</p>
</div>
</div>
<div class="container-fixed demo-grid grid-debug">
<div class="row">
<div class="demo-col col-l-6 col-m-5">
<span class="text-nowrap col-xs-emphased col-s-emphased col-m-emphased">col-m-5</span>
<span class="text-nowrap col-l-emphased col-xl-emphased">col-l-6</span>
</div>
<div class="demo-col col-l-6 col-m-5 offset-m-2">
<span class="text-nowrap col-xs-emphased col-s-emphased col-m-emphased">col-m-5</span>
<span class="text-nowrap col-xs-emphased col-s-emphased col-m-emphased">offset-m-2</span>
<span class="text-nowrap col-l-emphased col-xl-emphased">col-l-6</span>
</div>
</div>
<div class="row">
<div class="demo-col col-m-6 col-l-5 col-xl-6">
<span class="text-nowrap col-xs-emphased col-s-emphased col-m-emphased">col-m-6</span>
<span class="text-nowrap col-l-emphased">col-l-5</span>
<span class="text-nowrap col-xl-emphased">col-xl-6</span>
</div>
<div class="demo-col col-m-6 offset-m-0 col-l-5 offset-l-2 col-xl-6 offset-xl-0">
<span class="text-nowrap col-xs-emphased col-s-emphased col-m-emphased">col-m-6</span>
<span class="text-nowrap col-xs-emphased col-s-emphased col-m-emphased">offset-m-0</span>
<span class="text-nowrap col-l-emphased">col-l-5</span>
<span class="text-nowrap col-l-emphased">offset-l-2</span>
<span class="text-nowrap col-xl-emphased">col-xl-6</span>
<span class="text-nowrap col-xl-emphased">offset-xl-0</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/components.min.js"></script>
<script>//$(document).debugThingy()</script>
<div class="main">
<div class="container-fixed">