doc-msp-theme 0.1.0

data/_sass/_helper.md

@@ -0,0 +1,212 @@
+<!--
+//
+//
+// Helfer
+-->
+
+Die Komponenten stellen neben den gängigen Elementen diverse Helfer zur Verfügung. Bei ihnen handelt es sich meistens um CSS-Klassen, die in den verschiedensten Fällen zum Einsatz kommen. Im Folgenden werden diese Helfer kurz mit Einsatzzweck und Beispiel vorgestellt.
+
+## Clearfix
+
+Die CSS-Klasse `.clearfix` ist dafür zuständig, CSS-Floatings aufzuheben. Sie wird in der Regel auf das umgebende HTML-Element angewendet:
+
+<div class="tc-example">
+  <div class="clearfix">
+    <div style="float: left;">Ich bin links</div>
+    <div style="float: right;">Ich bin rechts</div>
+  </div>
+  <p>Ich folge wieder der normalen Anordnung</p>
+</div>
+
+```html
+<div class="clearfix">
+  <div style="float: left;">Ich bin links</div>
+  <div style="float: right;">Ich bin rechts</div>
+</div>
+<p>Ich folge wieder der normalen Anordnung</p>
+```
+
+## Elemente verstecken und Zeigen
+
+Sollen Elemente gänzlich verschwinden, hilft die CSS-Klasse `.hidden`.
+Sie versteckt Elemente auch vor Screen-Readern.
+
+```html
+<button type="button" class="hidden">Unsichtbar</button>
+```
+
+## Elemente Responsiv verstecken
+Sollen Elemente responsiv verschwinden, helfen die CSS-Klassen `.hidden-{screenklasse}` & `.visible-{screenklasse}-{displaytyp}` sie sind für die Screenklassen 's', 'm', 'l', 'xl' und die Displaytypen 'block', 'inline' und 'inline-block' verfügbar.
+Die Klassen `.hidden-{screenklasse}` versteckt das Element nur in der angegeben Screenklasse!
+Die Klassen `.visible-{screenklasse}-{displaytyp}` zeigt das Element nur in der angegeben Screenklasse!
+Beide Klassen versteckten die Elemente auch vor Screen-Readern.
+
+<div class="tc-example">
+  <div class="table-responsive">
+    <table class="visibility-example-table">
+
+      <tr>
+        <td>Sichtbar auf</td>
+        <td class="text-center">
+          <div class="hidden-xl visibility-example-item">X-Large</div>
+          <div class="visible-xl-block visibility-example-item emphased">X-Large</div>
+        </td>
+        <td class="text-center">
+          <div class="hidden-l visibility-example-item">Large</div>
+          <div class="visible-l-block visibility-example-item emphased">Large</div>
+        </td>
+        <td class="text-center">
+          <div class="hidden-m visibility-example-item">Medium</div>
+          <div class="visible-m-block visibility-example-item emphased">Medium</div>
+        </td>
+        <td class="text-center">
+          <div class="hidden-s visibility-example-item">Small</div>
+          <div class="visible-s-block visibility-example-item emphased">Small</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Kombiniert Sichtbar auf</td>
+        <td class="text-center">
+          <div class="hidden-xl hidden-s visibility-example-item">XL und S</div>
+          <div class="visible-xl-block visible-s-block visibility-example-item emphased">XL und S</div>
+        </td>
+        <td class="text-center">
+          <div class="hidden-l hidden-m visibility-example-item">L und M</div>
+          <div class="visible-l-block visible-m-block visibility-example-item emphased">L und M</div>
+        </td>
+        <td class="text-center">
+          <div class="hidden-xs hidden-m visibility-example-item">XS und M</div>
+          <div class="visible-xs-block visible-m-block visibility-example-item emphased">XS und M</div>
+        </td>
+        <td class="text-center">
+          <div class="hidden-xl hidden-l visibility-example-item">XL und L</div>
+          <div class="visible-xl-block visible-l-block visibility-example-item emphased">XL und L</div>
+        </td>
+      </tr>
+
+    </table>
+  </div>
+</div>
+
+
+## Inhaltsseparatoren
+Oft müssen Gruppen von Inhalten visuell separiert werden - hierzu bringen die Componenten Inhaltsseparatoren mit.
+Sie beinflussen den horizontalen Abstand von Elementen in einer Spalte. Für elemente kann auch ein umschliesendes Div verwendet werden.
+Separatoren werden von `6`-`18` Rastereinheiten angeboten:
+
+
+
+
+
+<div class="tc-note">
+**Anmerkung:**
+Inhalte innerhalb des Inhaltsseparators werden unten ausgerichtet!
+</div>
+
+<div class="tc-example">
+  <div style="border: 1px solid #eee;">
+      <div class="cont-sep-8">
+          <h1 class="underline">Separiert mit 8BU</h1>
+      </div>
+        <p>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+        </p>
+      <div class="cont-sep-6">
+        <h1 class="underline">Separiert mit 6BU</h1>
+      </div>
+        <p>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+        </p>
+
+    </div>
+</div>
+
+
+
+
+```html
+<div style="border: 1px solid #eee;">
+  <div class="cont-sep-8">
+    <h1 class="underline">Separiert mit 8BU</h1>
+  </div>
+  <p>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  </p>
+  <div class="cont-sep-6">
+    <h1 class="underline">Separiert mit 6BU</h1>
+  </div>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+    </p>
+  </div>
+
+```
+
+
+## Abstandshelfer
+
+Oft benötigen Elemente zusätzlichen Platz, um hervorgehoben oder eingepasst zu werden. Um im vorgegebenen Gestaltungsraster zu bleiben, bringen die Komponenten Abstandshelfer mit. Sie beeinflussen jeweils die `margin`-Eigenschaft des Elements, auf das sie angewendet werden. Die CSS-Klasse entscheidet, welches `margin`
+mit welchem Wert beeinflusst wird `offset-{screenklasse}-{ausrichtung}-{rastereinheiten}`. Aktuell gibt es die Screenklassen 's', 'm', 'l', 'xl' und Ausrichtungen `top`, `right`, `bottom`, `left`. Es werden jeweils `1`-`10` Rastereinheiten angeboten:
+
+
+<div class="tc-example">
+  <div style="border: 1px solid #eee;">
+    <div class="offset-left-5 offset-l-left-5 offset-m-left-10">5 Rastereinheiten nach rechts</div>
+  </div>
+</div>
+
+
+
+```html
+<div style="border: 1px solid #eee;">
+  <div class="offset-left-5 offset-l-left-5 offset-m-left-10">5 Rastereinheiten nach rechts</div>
+</div>
+```
+
+## Zentrierhelfer
+Oft müssen Elemente in einer Spalte Zentriert werden - hierzu bringen die Componenten Zentrierhelfer mit.
+Sie beinflussen die horizontale Ausrichtung von Elementen in einer Spalte. Hierfür wird jedoch ein umschliesendes Div benötigt.
+
+
+<div class="tc-example">
+  <div style="border: 1px solid #eee;">
+    <div class="h-ctr">
+		<button type="button" class="btn btn-default">Standard</button>
+    </div>
+  </div>
+</div>
+
+
+
+```html
+<div style="border: 1px solid #eee;">
+  <div class="h-ctr">
+  	<button type="button" class="btn btn-default">Standard</button>
+  </div>
+</div>
+```
+
+
+<div class="tc-example">
+  <div style="border: 1px solid #eee; height: 100px">
+    <div class="h-ctr v-ctr">
+    	<div>
+			   <button type="button" class="btn btn-default">Standard</button>
+		</div>
+    </div>
+  </div>
+</div>
+
+
+```html
+<div style="border: 1px solid #eee; height: 100px">
+  <div class="h-ctr v-ctr">
+  	<div>
+  		<button type="button" class="btn btn-default">Standard</button>
+  	 </div>
+  </div>
+</div>
+```
+
+

data/_sass/_helper.scss

@@ -0,0 +1,150 @@
+//
+// Helper
+// ----------------------------------------
+
+.clearfix {
+  @include clearfix();
+}
+
+// hides every element even on screenreaders
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.show {
+  display: inherit !important;
+  visibility: inherit !important;
+}
+
+@mixin hidden-element ($size) {
+  .hidden-#{$size} { display: none !important; }
+}
+
+@mixin visible-element ($size) {
+  .visible-#{$size} { display: initial !important; }
+  .visible-#{$size}-block { display: block !important; }
+  .visible-#{$size}-inline { display: inline !important; }
+  .visible-#{$size}-inline-block { display: inline-block !important; }
+}
+
+@mixin visible-default-element ($size) {
+  .visible-#{$size} { display: none !important; }
+  .visible-#{$size}-block { display: none !important; }
+  .visible-#{$size}-inline { display: none !important; }
+  .visible-#{$size}-inline-block { display: none !important; }
+}
+
+// default
+@include visible-default-element('xs');
+@include visible-default-element('s');
+@include visible-default-element('m');
+@include visible-default-element('l');
+@include visible-default-element('xl');
+
+@media (max-width: #{$grid-extra-small-max}px) {
+  @include visible-element('xs');
+  @include hidden-element('xs');
+}
+
+@media (max-width: #{$grid-small-max}px) and (min-width: #{$grid-small-min}px) {
+  @include visible-element('s');
+  @include hidden-element('s');
+}
+
+@media (max-width: #{$grid-medium-max}px) and (min-width: #{$grid-medium-min}px) {
+  @include visible-element('m');
+  @include hidden-element('m');
+}
+
+@media (max-width: #{$grid-large-max}px) and (min-width: #{$grid-large-min}px) {
+  @include visible-element('l');
+  @include hidden-element('l');
+}
+
+@media (min-width: #{$grid-extra-large-min}px) {
+  @include visible-element('xl');
+  @include hidden-element('xl');
+}
+
+.pull-left {
+  float: left;
+}
+
+.pull-right {
+  float: right;
+}
+
+// spacer helper for layouts
+@for $i from 1 through 18 {
+  .offset-top-#{$i} { margin-top: building-units($i); }
+  .offset-right-#{$i} { margin-right: building-units($i); }
+  .offset-bottom-#{$i} { margin-bottom: building-units($i); }
+  .offset-left-#{$i} { margin-left: building-units($i); }
+}
+
+@mixin offset($size) {
+  @for $i from 1 through 18 {
+    .offset-#{$size}-top-#{$i} { margin-top: building-units($i); }
+    .offset-#{$size}-right-#{$i} { margin-right: building-units($i); }
+    .offset-#{$size}-bottom-#{$i} { margin-bottom: building-units($i); }
+    .offset-#{$size}-left-#{$i} { margin-left: building-units($i); }
+  }
+}
+
+// default
+@include offset('l');
+
+// down-sizing
+@media screen and (max-width: #{$grid-medium-max}px) {
+  @include offset('m');
+}
+
+@media screen and (max-width: #{$grid-small-max}px) {
+  @include offset('s');
+}
+
+// up-sizing
+@media screen and (min-width: #{$grid-extra-large-min}px) {
+  @include offset('xl');
+}
+
+// vertical centering helper
+.h-ctr {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.v-ctr {
+  display: table;
+  height: 100%;
+
+  > div {
+    display: table-cell;
+    vertical-align: middle;
+  }
+}
+
+%separator {
+  position: relative;
+
+  > * {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
+
+// Content Separator
+@mixin separator() {
+  @for $i from 1 through 18 {
+    .cont-sep-#{$i} {
+      @extend %separator;
+      height: building-units($i);
+    }
+  }
+}
+
+@include separator();

data/_sass/_icons.md

@@ -0,0 +1,153 @@
+<!--
+//
+//
+// Icons
+-->
+
+Für Icons bieten die Komponenten mit der *Telekom-Icon* eine eigene Schriftart.
+Diese Icons gibt es in der Variante <i>Solid</i> und <i>Outline</i>
+
+Um das Einbinden der Icons zu vereinfachen, wird außerdem die CSS-Klasse
+`.icon` angeboten. Sie bringt die elementaren Einstellungen für ein Icon mit.
+Durch die zusätzliche Verwendung der klasse `.icon-solid` wird das Icon im *Solid* Stil angezeigt.
+Welches Icon verwendet wird, bestimmt eine weitere CSS-Klasse.
+Unter dem Beispiel sind alle Icons mit Klassenname aufgeführt.
+Zur Vereinfachung können Icons mit dem
+<span style="white-space: nowrap">`<i>`-Tag</span> erzeugt werden:
+
+<div class="tc-example">
+  <span class="sr-only">Synchronisieren</span>
+  <i class="icon icon-synchronize" aria-hidden="true"></i>
+</div>
+
+```html
+  <span class="sr-only">Synchronisieren</span>
+  <i class="icon icon-synchronize" aria-hidden="true"></i>
+```
+
+
+<div class="tc-example">
+  <span class="sr-only">Synchronisieren</span>
+  <i class="icon icon-solid icon-synchronize" aria-hidden="true"></i>
+</div>
+
+```html
+  <span class="sr-only">Synchronisieren</span>
+  <i class="icon icon-solid icon-synchronize" aria-hidden="true"></i>
+```
+
+
+<div class="tc-note">
+**Anmerkung Barrierefreiheit:**
+Icons werden von Unterstützungstechnologien oft nicht erkannt oder fehlerhaft
+interpretiert. Um das zu vermeiden ist es wichtig `aria-hidden="true"` auf die
+Icon-Tags anzuwenden, damit diese für Unterstützungstechnologien nicht
+mehr erkennbar werden.
+<br>
+Je nach Fall muss nun eine Alternative gefunden werden.
+So kann beschreibender Text mit CSS-Klasse `.sr-only` vor das Icon geschrieben
+werden, welcher dann nur von Unterstützungstechnologien erkannt wird.
+</div>
+
+
+
+<div class="row offset-bottom-2">
+  <div class="col-l-6"><h3>Varianten</h3></div>
+  <div class="col-l-6">
+    <div class="btn-sectioned offset-top-2" data-toggle="buttongroup-radio" style="float:right">
+    <button class="btn btn-default btn-small active" data-callback="setOutline">Outline*</button>
+    <button class="btn btn-default btn-small" data-callback="setSolid">Solid</button>
+    </div>
+  </div>
+</div>
+
+
+
+
+<ul class="icon-list">
+  <li><i class="icon icon-add" aria-hidden="true"></i><span class="sr-only">Hinzufügen Symbol, Klasse</span><span lang="en" class="icon-class">icon-add</span></li>
+  <li><i class="icon icon-add-to-watchlist" aria-hidden="true"></i><span class="sr-only">Zur <span lang="en">Watchlist</span> hinzufügen Symbol, Klasse</span><span lang="en" class="icon-class">icon-add-to-watchlist</span></li>
+  <li><i class="icon icon-attachment" aria-hidden="true"></i><span class="sr-only">Anhang Symbol, Klasse</span><span lang="en" class="icon-class">icon-attachment</span></li>
+  <li><i class="icon icon-bookmark" aria-hidden="true"></i><span class="sr-only">Lesezeichen Symbol, Klasse</span><span lang="en" class="icon-class">icon-bookmark</span></li>
+  <li><i class="icon icon-calendar" aria-hidden="true"></i><span class="sr-only">Kalender Symbol, Klasse</span><span lang="en" class="icon-class">icon-calendar</span></li>
+  <li><i class="icon icon-cancel" aria-hidden="true"></i><span class="sr-only">AbbrechenSymbol, Klasse</span><span lang="en" class="icon-class">icon-cancel</span></li>
+  <li><i class="icon icon-clock" aria-hidden="true"></i><span class="sr-only">Uhrzeit Symbol, Klasse</span><span lang="en" class="icon-class">icon-clock</span></li>
+  <li><i class="icon icon-cloud" aria-hidden="true"></i><span class="sr-only"><span lang="en">Cloud</span> Symbol, Klasse</span><span lang="en" class="icon-class">icon-cloud</span></li>
+  <li><i class="icon icon-comment" aria-hidden="true"></i><span class="sr-only">Kommentar Symbol, Klasse</span><span lang="en" class="icon-class">icon-comment</span></li>
+  <li><i class="icon icon-computer" aria-hidden="true"></i><span class="sr-only">Computer Symbol, Klasse</span><span lang="en" class="icon-class">icon-computer</span></li>
+  <li><i class="icon icon-confirm" aria-hidden="true"></i><span class="sr-only">Bestätigen Symbol, Klasse</span><span lang="en" class="icon-class">icon-confirm</span></li>
+  <li><i class="icon icon-context-menu" aria-hidden="true"></i><span class="sr-only">Kontextmenü Symbol, Klasse</span><span lang="en" class="icon-class">icon-context-menu</span></li>
+  <li><i class="icon icon-copy" aria-hidden="true"></i><span class="sr-only">Kopieren Symbol, Klasse</span><span lang="en" class="icon-class">icon-copy</span></li>
+  <li><i class="icon icon-cover-view" aria-hidden="true"></i><span class="sr-only"><span lang="en">Cover</span> Ansicht Symbol, Klasse</span><span lang="en" class="icon-class">icon-cover-view</span></li>
+  <li><i class="icon icon-decrease" aria-hidden="true"></i><span class="sr-only">Verkleinern Symbol, Klasse</span><span lang="en" class="icon-class">icon-decrease</span></li>
+  <li><i class="icon icon-digits" aria-hidden="true"></i><span class="sr-only">Punkte Symbol, Klasse</span><span lang="en" class="icon-class">icon-digits</span></li>
+  <li><i class="icon icon-download" aria-hidden="true"></i><span class="sr-only"><span lang="en">download</span> Symbol, Klasse</span><span lang="en" class="icon-class">icon-download</span></li>
+  <li><i class="icon icon-edit" aria-hidden="true"></i><span class="sr-only">Bearbeiten Symbol, Klasse</span><span lang="en" class="icon-class">icon-edit</span></li>
+  <li><i class="icon icon-end-call" aria-hidden="true"></i><span class="sr-only">Anruf beenden Symbol, Klasse</span><span lang="en" class="icon-class">icon-call</span></li>
+  <li><i class="icon icon-error" aria-hidden="true"></i><span class="sr-only">Fehler Symbol, Klasse</span><span lang="en" class="icon-class">icon-error</span></li>
+  <li><i class="icon icon-export" aria-hidden="true"></i><span class="sr-only">Export Symbol, Klasse</span><span lang="en" class="icon-class">icon-export</span></li>
+  <li><i class="icon icon-fast-forward" aria-hidden="true"></i><span class="sr-only">Schnellvorlauf Symbol, Klasse</span><span lang="en" class="icon-class">icon-fast-forward</span></li>
+  <li><i class="icon icon-favorites" aria-hidden="true"></i><span class="sr-only">Favoriten Symbol, Klasse</span><span lang="en" class="icon-class">icon-favorites</span></li>
+  <li><i class="icon icon-file" aria-hidden="true"></i><span class="sr-only">Datei Symbol, Klasse</span><span lang="en" class="icon-class">icon-file</span></li>
+  <li><i class="icon icon-filter" aria-hidden="true"></i><span class="sr-only">Filter Symbol, Klasse</span><span lang="en" class="icon-class">icon-filter</span></li>
+  <li><i class="icon icon-folder" aria-hidden="true"></i><span class="sr-only">Ordner Symbol, Klasse</span><span lang="en" class="icon-class">icon-folder</span></li>
+  <li><i class="icon icon-forward" aria-hidden="true"></i><span class="sr-only">Vorwärts Symbol, Klasse</span><span lang="en" class="icon-class">icon-forward</span></li>
+  <li><i class="icon icon-help" aria-hidden="true"></i><span class="sr-only">Hilfe Symbol (gerahmt), Klasse</span><span lang="en" class="icon-class">icon-help</span></li>
+  <li><i class="icon icon-help_2" aria-hidden="true"></i><span class="sr-only">Hilfe Symbol, Klasse</span><span lang="en" class="icon-class">icon-help_2</span></li>
+  <li><i class="icon icon-home" aria-hidden="true"></i><span class="sr-only"><span lang="en">Home</span> Symbol, Klasse</span><span lang="en" class="icon-class">icon-home</span></li>
+  <li><i class="icon icon-import" aria-hidden="true"></i><span class="sr-only">Import Symbol, Klasse</span><span lang="en" class="icon-class">icon-import</span></li>
+  <li><i class="icon icon-information" aria-hidden="true"></i><span class="sr-only">Info Symbol (gerahmt), Klasse</span><span lang="en" class="icon-class">icon-information</span></li>
+  <li><i class="icon icon-information_2" aria-hidden="true"></i><span class="sr-only">Info Symbol, Klasse</span><span lang="en" class="icon-class">icon-information_2</span></li>
+  <li><i class="icon icon-iptv" aria-hidden="true"></i><span class="sr-only"><span lang="en">IPTV</span> Symbol, Klasse</span><span lang="en" class="icon-class">icon-iptv</span></li>
+  <li><i class="icon icon-link" aria-hidden="true"></i><span class="sr-only">Verknüpfung Symbol, Klasse</span><span lang="en" class="icon-class">icon-link</span></li>
+  <li><i class="icon icon-list-view" aria-hidden="true"></i><span class="sr-only">Listenansicht Symbol, Klasse</span><span lang="en" class="icon-class">icon-list-view</span></li>
+  <li><i class="icon icon-loading-indicator" aria-hidden="true"></i><span class="sr-only">Ladezustand Symbol, Klasse</span><span lang="en" class="icon-class">icon-loading-indicator</span></li>
+  <li><i class="icon icon-lock" aria-hidden="true"></i><span class="sr-only">Vorhängeschloss Symbol, Klasse</span><span lang="en" class="icon-class">icon-lock</span></li>
+  <li><i class="icon icon-login" aria-hidden="true"></i><span class="sr-only">Anmeldung Symbol, Klasse</span><span lang="en" class="icon-class">icon-login</span></li>
+  <li><i class="icon icon-message" aria-hidden="true"></i><span class="sr-only">Mitteilung Symbol, Klasse</span><span lang="en" class="icon-class">icon-message</span></li>
+  <li><i class="icon icon-microphone-socket" aria-hidden="true"></i><span class="sr-only">Mikrophonständer Symbol, Klasse</span><span lang="en" class="icon-class">icon-microphone-socket</span></li>
+  <li><i class="icon icon-more" aria-hidden="true"></i><span class="sr-only">Mehr Symbol, Klasse</span><span lang="en" class="icon-class">icon-more</span></li>
+  <li><i class="icon icon-move-to-trash" aria-hidden="true"></i><span class="sr-only">Papierkorb Symbol, Klasse</span><span lang="en" class="icon-class">icon-move-to-trash</span></li>
+  <li><i class="icon icon-my-profile" aria-hidden="true"></i><span class="sr-only">Mein Profil Symbol, Klasse</span><span lang="en" class="icon-class">icon-my-profile</span></li>
+  <li><i class="icon icon-navigation-down" aria-hidden="true"></i><span class="sr-only">Navigation runter Symbol, Klasse</span><span lang="en" class="icon-class">icon-navigation-down</span></li>
+  <li><i class="icon icon-navigation-left" aria-hidden="true"></i><span class="sr-only">Navigation links Symbol, Klasse</span><span lang="en" class="icon-class">icon-navigation-left</span></li>
+  <li><i class="icon icon-navigation-right" aria-hidden="true"></i><span class="sr-only">Navigation richts Symbol, Klasse</span><span lang="en" class="icon-class">icon-navigation-right</span></li>
+  <li><i class="icon icon-navigation-up" aria-hidden="true"></i><span class="sr-only">Navigation hoch Symbol, Klasse</span><span lang="en" class="icon-class">icon-navigation-up</span></li>
+  <li><i class="icon icon-next" aria-hidden="true"></i><span class="sr-only">Nächster Titel Symbol, Klasse</span><span lang="en" class="icon-class">icon-next</span></li>
+  <li><i class="icon icon-pause" aria-hidden="true"></i><span class="sr-only">Pause Symbol, Klasse</span><span lang="en" class="icon-class">icon-pause</span></li>
+  <li><i class="icon icon-play" aria-hidden="true"></i><span class="sr-only">Abspielen Symbol, Klasse</span><span lang="en" class="icon-class">icon-play</span></li>
+  <li><i class="icon icon-previous" aria-hidden="true"></i><span class="sr-only">Vorheriger Titel Symbol, Klasse</span><span lang="en" class="icon-class">icon-previous</span></li>
+  <li><i class="icon icon-print" aria-hidden="true"></i><span class="sr-only">Drucken Symbol, Klasse</span><span lang="en" class="icon-class">icon-print</span></li>
+  <li><i class="icon icon-record" aria-hidden="true"></i><span class="sr-only">Aufnahme Symbol, Klasse</span><span lang="en" class="icon-class">icon-record</span></li>
+  <li><i class="icon icon-reload" aria-hidden="true"></i><span class="sr-only">Neu laden Symbol, Klasse</span><span lang="en" class="icon-class">icon-reload</span></li>
+  <li><i class="icon icon-reply" aria-hidden="true"></i><span class="sr-only">Antworten Symbol, Klasse</span><span lang="en" class="icon-class">icon-reply</span></li>
+  <li><i class="icon icon-rewind" aria-hidden="true"></i><span class="sr-only">Zurückspulen Symbol, Klasse</span><span lang="en" class="icon-class">icon-rewind</span></li>
+  <li><i class="icon icon-ringtone-off" aria-hidden="true"></i><span class="sr-only">Klingelton aus Symbol, Klasse</span><span lang="en" class="icon-class">icon-ringtone-off</span></li>
+  <li><i class="icon icon-ringtone-on" aria-hidden="true"></i><span class="sr-only">Klingelton an Symbol, Klasse</span><span lang="en" class="icon-class">icon-ringtone-on</span></li>
+  <li><i class="icon icon-scroll-left" aria-hidden="true"></i><span class="sr-only">Nach links scrollen Symbol, Klasse</span><span lang="en" class="icon-class">icon-scroll-left</span></li>
+  <li><i class="icon icon-scroll-right" aria-hidden="true"></i><span class="sr-only">Nach rechts scrollen Symbol, Klasse</span><span lang="en" class="icon-class">icon-scroll-right</span></li>
+  <li><i class="icon icon-search" aria-hidden="true"></i><span class="sr-only">Suchen Symbol, Klasse</span><span lang="en" class="icon-class">icon-search</span></li>
+  <li><i class="icon icon-settings" aria-hidden="true"></i><span class="sr-only">Einstellungen Symbol, Klasse</span><span lang="en" class="icon-class">icon-settings</span></li>
+  <li><i class="icon icon-share" aria-hidden="true"></i><span class="sr-only">Teilen Symbol, Klasse</span><span lang="en" class="icon-class">icon-share</span></li>
+  <li><i class="icon icon-shopping-cart" aria-hidden="true"></i><span class="sr-only">Einkaufswagen Symbol, Klasse</span><span lang="en" class="icon-class">icon-shopping-cart</span></li>
+  <li><i class="icon icon-skip-to-end" aria-hidden="true"></i><span class="sr-only">Zum Ende springen Symbol, Klasse</span><span lang="en" class="icon-class">icon-skip-to-end</span></li>
+  <li><i class="icon icon-skip-to-start" aria-hidden="true"></i><span class="sr-only">Zum Anfang springen Symbol, Klasse</span><span lang="en" class="icon-class">icon-skip-to-start</span></li>
+  <li><i class="icon icon-smartphone" aria-hidden="true"></i><span class="sr-only"><span lang="en">Smartphone</span> Symbol, Klasse</span><span lang="en" class="icon-class">icon-smartphone</span></li>
+  <li><i class="icon icon-speaker-off" aria-hidden="true"></i><span class="sr-only">Lautsprecher aus Symbol, Klasse</span><span lang="en" class="icon-class">icon-speaker-off</span></li>
+  <li><i class="icon icon-speaker-on" aria-hidden="true"></i><span class="sr-only">Lautsprecher an Symbol, Klasse</span><span lang="en" class="icon-class">icon-speaker-on</span></li>
+  <li><i class="icon icon-start-call" aria-hidden="true"></i><span class="sr-only">Anrufen Symbol, Klasse</span><span lang="en" class="icon-class">icon-start-call</span></li>
+  <li><i class="icon icon-stop" aria-hidden="true"></i><span class="sr-only">Stop Symbol, Klasse</span><span lang="en" class="icon-class">icon-stop</span></li>
+  <li><i class="icon icon-success" aria-hidden="true"></i><span class="sr-only">Erfolg Symbol, Klasse</span><span lang="en" class="icon-class">icon-success</span></li>
+  <li><i class="icon icon-synchronize" aria-hidden="true"></i><span class="sr-only">Synchronisieren Symbol, Klasse</span><span lang="en" class="icon-class">icon-synchronize</span></li>
+  <li><i class="icon icon-tablet-pc" aria-hidden="true"></i><span class="sr-only"><span lang="en">Tablet PC</span> Symbol, Klasse</span><span lang="en" class="icon-class">icon-tablet-pc</span></li>
+  <li><i class="icon icon-telekom-1T1" aria-hidden="true"></i><span class="sr-only">Telekom Symbol, Klasse</span><span lang="en" class="icon-class">icon-telekom-1T1</span></li>
+  <li><i class="icon icon-minimize" aria-hidden="true"></i><span class="sr-only">Minimieren Symbol, Klasse</span><span lang="en" class="icon-class">icon-minimize</span></li>
+  <li><i class="icon icon-maximize" aria-hidden="true"></i><span class="sr-only">Maximieren Symbol, Klasse</span><span lang="en" class="icon-class">icon-maximize</span></li>
+  <li><i class="icon icon-tile-view" aria-hidden="true"></i><span class="sr-only">Kachelansicht Symbol, Klasse</span><span lang="en" class="icon-class">icon-tile-view</span></li>
+  <li><i class="icon icon-upload" aria-hidden="true"></i><span class="sr-only"><span lang="en">upload</span> Symbol, Klasse</span><span lang="en" class="icon-class">icon-upload</span></li>
+  <li><i class="icon icon-warning" aria-hidden="true"></i><span class="sr-only">Warnung Symbol (gerahmt), Klasse</span><span lang="en" class="icon-class">icon-warning</span></li>
+  <li><i class="icon icon-warning_2" aria-hidden="true"></i><span class="sr-only">Warnung Symbol, Klasse</span><span lang="en" class="icon-class">icon-warning_2</span></li>
+  <li><i class="icon icon-zoom-in" aria-hidden="true"></i><span class="sr-only">Ansicht vergrößern Symbol, Klasse</span><span lang="en" class="icon-class">icon-zoom-in</span></li>
+  <li><i class="icon icon-zoom-out" aria-hidden="true"></i><span class="sr-only">Ansicht verkleinern Symbol, Klasse</span><span lang="en" class="icon-class">icon-zoom-out</span></li>
+</ul>
+