<!-- // // // 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">