doc-msp-theme 0.1.0

data/_sass/_functions.scss

@@ -0,0 +1,389 @@
+//
+// Functions
+// ----------------------------------------
+
+////// common functions //////
+
+// returns the max of two values
+@function max($v1, $v2) {
+  @return if($v1 > $v2, $v1, $v2);
+}
+
+// returns the min of two values
+@function min($v1, $v2) {
+  @return if($v1 < $v2, $v1, $v2);
+}
+
+@function to-string($list, $glue: '', $is-nested: false) {
+  $result: null;
+
+  @for $i from 1 through length($list) {
+    $e: nth($list, $i);
+
+    @if type-of($e) == list {
+      $result: $result#{to-string($e, $glue, true)};
+    } @else {
+      $result: if($i != length($list) or $is-nested, $result#{$e}#{$glue}, $result#{$e});
+    }
+  }
+
+  @return $result;
+}
+
+////// unit handling functions //////
+
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}
+
+@function strip-unit-when-zero($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    $unitless: strip-unit($number);
+    @if $unitless == 0 {
+      @return $unitless;
+    }
+  }
+
+  @return $number;
+}
+
+////// common css helper //////
+
+// returns a color, based on an alpha-value against a background-color
+// its the fallback solution for browsers without rgba support
+@function fallback-rgba($color, $alpha, $background-color: #fff) {
+  @return mix($color, $background-color, percentage($alpha));
+}
+
+////// building unit functions //////
+
+// calculates the padding of a button in the context of building units
+@function building-unit-box-padding($line-height, $height, $padding-horizontal) {
+  @return floor(max(0, (($height * $building-unit - 1) - $line-height) / 2) - 1) max(0, ($padding-horizontal * $building-unit - 1)) floor(max(0, (($height * $building-unit - 1) - $line-height) / 2));
+}
+
+@function building-units($value) {
+  @return $value * $building-unit;
+}
+
+// returns the pixels of the capline to the top based on the font-size
+@function calculate-line-height-offset($font-size, $line-height) {
+  @return ($font-size * $line-height - $font-size) / 2;
+}
+
+@function capline-pixels($font-size, $line-height) {
+  @return ceil($font-size * $font-capline-top-ratio + calculate-line-height-offset($font-size, $line-height));
+}
+
+@function capline-bu($bu, $font-size, $line-height: 1) {
+  @return strip-unit-when-zero($bu * $building-unit - capline-pixels($font-size, $line-height));
+}
+
+// returns the pixels of the capline to the top based on the font-size
+@function baseline-pixels($font-size, $line-height) {
+  @return floor($font-size * $font-baseline-bottom-ratio + calculate-line-height-offset($font-size, $line-height));
+}
+
+@function baseline-bu($bu, $font-size, $line-height: 1) {
+  @return strip-unit-when-zero($bu * $building-unit - baseline-pixels($font-size, $line-height));
+}
+
+////// HSV calculations //////
+
+// returns a hsv color
+@function hsv($hue: 0, $saturation: 100%, $value: 100%) {
+  @return ($hue, $saturation, $value, 1);
+}
+
+// returns a hsva color
+@function hsva($hue: 0, $saturation: 100%, $value: 100%, $alpha: 1) {
+  @return ($hue, $saturation, $value, $alpha);
+}
+
+// returns the converted hsv color, based on a rbg color
+@function color-to-hsv($r, $g: 0, $b: 0, $a: 1) {
+  $color: #000;
+
+  @if type-of($r) != 'color' {
+    $color: rgba($r, $g, $b, $a);
+  } @else {
+    $color: $r;
+  }
+
+  // rgba
+  $r: red($color) / 255;
+  $g: green($color) / 255;
+  $b: blue($color) / 255;
+  $a: alpha($color);
+
+  // conversion values
+  $cmax: max($r, max($g, $b));
+  $cmin: min($r, min($g, $b));
+  $delta: $cmax - $cmin;
+
+  // hsv
+  $hue: hue($color);
+  $saturation: 0;
+  @if $cmax != 0 {
+    $saturation: percentage($delta / $cmax);
+  }
+  $value: percentage($cmax);
+
+  @return ($hue, $saturation, $value, $a);
+}
+
+// returns the converted rgb color, based on a hsv color
+@function hsv-to-color($h, $saturation: 100%, $value: 100%, $alpha: 1) {
+  @if type-of($h) == 'list' {
+    $alpha: hsv-alpha($h);
+    $value: hsv-value($h);
+    $saturation: hsv-saturation($h);
+    $h: hsv-hue($h);
+  } @else if type-of($h) == 'number' {
+    @if unitless($h) {
+      $h: (360 * (0 + $h)) + 'deg';
+    }
+  }
+
+  $chroma: hsl($h, 100%, 50%);
+
+  @if unit($saturation) == '%' {
+    $saturation: 0 + ($saturation / 100%);
+  }
+  @if unit($value) == '%' {
+    $value: 0 + ($value / 100%);
+  }
+
+  $c: $value * $saturation;
+  $m: ($value - $c) * 255;
+
+  $r: max(0, min(red($chroma) * $c + $m, 255));
+  $g: max(0, min(green($chroma) * $c + $m, 255));
+  $b: max(0, min(blue($chroma) * $c + $m, 255));
+
+  $color: rgba($r, $g, $b, $alpha);
+
+  @return $color;
+}
+
+// HSV properties //
+
+// returns the hue value of a hsv color
+@function hsv-hue($hsv) {
+  @if type-of($hsv) == 'color' {
+    $hsv: color-to-hsv($hsv);
+  }
+  @return nth($hsv, 1);
+}
+
+// sets the hue value of a hsv color
+@function hsv-set-hue($hsv, $value, $return-rgb-color: false) {
+  @if type-of($hsv) == 'color' {
+    $hsv: color-to-hsv($hsv);
+  }
+  $result: ($value, hsv-saturation($hsv), hsv-value($hsv), hsv-alpha($hsv));
+  @if ($return-rgb-color) {
+    @return hsv-to-color($result);
+  }
+  @return $result;
+}
+
+// returns the saturation value of a hsv color
+@function hsv-saturation($hsv) {
+  @if type-of($hsv) == 'color' {
+    $hsv: color-to-hsv($hsv);
+  }
+  @return nth($hsv, 2);
+}
+
+// sets the saturation value of a hsv color
+@function hsv-set-saturation($hsv, $value, $return-rgb-color: false) {
+  @if type-of($hsv) == 'color' {
+    $hsv: color-to-hsv($hsv);
+  }
+  $current: nth($hsv, 2);
+  $result: hsv-adjust-saturation($hsv, $value - $current);
+  @if ($return-rgb-color) {
+    @return hsv-to-color($result);
+  }
+  @return $result;
+}
+
+// returns the value of a hsv color
+@function hsv-value($hsv) {
+  @if type-of($hsv) == 'color' {
+    $hsv: color-to-hsv($hsv);
+  }
+  @return nth($hsv, 3);
+}
+
+// sets the value of a hsv color
+@function hsv-set-value($hsv, $value, $return-rgb-color: false) {
+  @if type-of($hsv) == 'color' {
+    $hsv: color-to-hsv($hsv);
+  }
+  $current: nth($hsv, 3);
+  $result: hsv-adjust-brightness($hsv, $value - $current);
+  @if ($return-rgb-color) {
+    @return hsv-to-color($result);
+  }
+  @return $result;
+}
+
+// returns the alpha value of a hsv color
+@function hsv-alpha($hsv) {
+  @if type-of($hsv) == 'color' {
+    $hsv: color-to-hsv($hsv);
+  }
+  @return nth($hsv, 4);
+}
+
+// sets the alpha value of a hsv color
+@function hsv-set-alpha($hsv, $value, $return-rgb-color: false) {
+  @if type-of($hsv) == 'color' {
+    $hsv: color-to-hsv($hsv);
+  }
+  $result: (hsv-hue($hsv), hsv-saturation($hsv), hsv-value($hsv), $value);
+  @if ($return-rgb-color) {
+    @return hsv-to-color($result);
+  }
+  @return $result;
+}
+
+// HSV adjustment functions //
+
+// returns the inverted hsv color
+@function hsv-invert($hsv-color, $return-rgb-color: false) {
+  @if type-of($hsv-color) == 'color' {
+    $hsv-color: color-to-hsv($hsv-color);
+  }
+
+  $result: hsva(360deg - hsv-hue($hsv-color), 100% - hsv-saturation($hsv-color), 100% - hsv-value($hsv-color), hsv-alpha($hsv-color));
+  @if ($return-rgb-color) {
+    @return hsv-to-color($result);
+  }
+  @return $result;
+}
+
+// changes the brightness of a hsv color
+@function hsv-adjust-brightness($hsv-color, $value, $return-rgb-color: false) {
+  @if $hsv-color == false {
+    @return false;
+  }
+
+  @if type-of($hsv-color) == 'color' {
+    $hsv-color: color-to-hsv($hsv-color);
+  }
+
+  $hue: hsv-hue($hsv-color);
+  $saturation: hsv-saturation($hsv-color);
+  $brightness: hsv-value($hsv-color);
+  $alpha: hsv-alpha($hsv-color);
+
+  @if unit($value) == '%' {
+    $value: 0 + ($value / 100%);
+  }
+
+  $brightness: max(0, min(($brightness / 100%) + $value, 1));
+  $result: ($hue, $saturation, percentage($brightness), $alpha);
+  @if ($return-rgb-color) {
+    @return hsv-to-color($result);
+  }
+  @return $result;
+}
+
+// changes the hue value of a hsv color
+@function hsv-adjust-hue($hsv-color, $value, $return-rgb-color: false) {
+  @if $hsv-color == false {
+    @return false;
+  }
+
+  @if type-of($hsv-color) == 'color' {
+    $hsv-color: color-to-hsv($hsv-color);
+  }
+
+  $hue: hsv-hue($hsv-color);
+  $saturation: hsv-saturation($hsv-color);
+  $brightness: hsv-value($hsv-color);
+  $alpha: hsv-alpha($hsv-color);
+
+  @if unit($value) != 'deg' {
+    $value: $value * 360deg;
+  }
+
+  $hue: max(0, min($hue + $value, 1));
+  $result: ($hue, $saturation, $brightness, $alpha);
+  @if ($return-rgb-color) {
+    @return hsv-to-color($result);
+  }
+  @return $result;
+}
+
+// changes the saturation of a hsv color
+@function hsv-adjust-saturation($hsv-color, $value, $return-rgb-color: false) {
+  @if $hsv-color == false {
+    @return false;
+  }
+
+  @if type-of($hsv-color) == 'color' {
+    $hsv-color: color-to-hsv($hsv-color);
+  }
+
+  $hue: hsv-hue($hsv-color);
+  $saturation: hsv-saturation($hsv-color);
+  $brightness: hsv-value($hsv-color);
+  $alpha: hsv-alpha($hsv-color);
+
+  @if unit($value) == '%' {
+    $value: 0 + ($value / 100%);
+  }
+
+  $saturation: max(0, min(($saturation / 100%) + $value, 1));
+  $result: ($hue, $saturation, $brightness, $alpha);
+
+  @if $return-rgb-color == true {
+    @return hsv-to-color($result);
+  }
+  @return $result;
+}
+
+// cloned common HSV functions //
+
+@function hsv-lighten($hsv-color, $value, $return-rgb-color: false) {
+  @return hsv-adjust-brightness($hsv-color, $value, $return-rgb-color);
+}
+
+@function hsv-darken($hsv-color, $value, $return-rgb-color: false) {
+  @return hsv-adjust-brightness($hsv-color, 0 - $value, $return-rgb-color);
+}
+
+@function hsv-saturate($hsv-color, $value, $return-rgb-color: false) {
+  @return hsv-adjust-saturation($hsv-color, $value, $return-rgb-color);
+}
+
+@function hsv-desaturate($hsv-color, $value, $return-rgb-color: false) {
+  @return hsv-adjust-saturation($hsv-color, 0 - $value, $return-rgb-color);
+}
+
+@function hsv-grayscale($hsv-color, $return-rgb-color: false) {
+  @return hsv-adjust-saturation($hsv-color, 0 - hsv-saturation($hsv-color), $return-rgb-color);
+}
+
+@function hsv-complement($hsv-color, $return-rgb-color: false) {
+  @if type-of($hsv-color) == 'color' {
+    $hsv-color: color-to-hsv($hsv-color);
+  }
+  $deg: hsv-hue($hsv-color) + 180deg;
+  @if ($deg >= 360deg) {
+    $deg: $deg - 360deg;
+  }
+  $result: hsva($deg, hsv-saturation($hsv-color), hsv-value($hsv-color), hsv-alpha($hsv-color));
+  @if $return-rgb-color == true {
+    @return hsv-to-color($result);
+  }
+  @return $result;
+}

data/_sass/_grid.md

@@ -0,0 +1,449 @@
+<!--
+//
+//
+// 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">