doc-msp-theme 0.1.0

data/_sass/_accessibility-seo.md

@@ -0,0 +1,233 @@
+<!--
+//
+//
+// SEO und Accessibility
+-->
+
+Webinhalte und Web-Applikationen bedürfen immer einer besonderen Aufbereitung
+der Inhalte. Die Lesbarkeit ist ein maßgebliches Kriterium für die Qualität
+einer Webseite wobei sowohl auf Maschinen wie Menschen eigens Rücksicht
+genommen werden muss. Während Nutzer aufgrund der Gestaltung und
+Zusammenhänge problemlos Rückschlüsse zeihen können muss der Inhalt
+für Suchmaschinen gesondert aufbereitet werden. Ähnlich wenngleich
+wesentlich vielseitiger verhält es sich mit den Problemen denen Menschen
+mit körperlichen Einschränkungen gegenüberstehen. Eine Ergänzung von
+beschreibenden Texten für Sehbehinderte (insbesondere auch für dynamische
+Inhalte bei AJAX-Seiten!) ist genauso unumgänglich wie die Gewährleistung
+von Navigationsmöglichkeiten mittels Tastatur.
+
+Als nützliche Hilfe haben sich hierfür ARIA und Rich Snippets
+herauskristallisiert. Im Folgenden versuchen wir einen kurzen
+Überblick über beide Erweiterungen des Markups zu liefern und
+Ihnen den Einstieg zu erleichtern.
+
+<h2 id="aria" class="underline">Aria</h2>
+
+Accessible Rich Internet Applications (ARIA) ist eine Sammlung von speziellen
+Attributen, mit deren Hilfe es möglich ist Webinhalte für Menschen mit
+körperlichen Einschränkungen leichter zugänglich oder besser verständlich
+zu machen.
+
+ARIA ist bei den meisten Browsern und Screen-Readern implementiert,
+aber der Umfang kann bei älteren Versionen stark eingeschränkt sein.
+Daher empfiehlt es sich sogenanntes „sicheres“ ARIA zu verwenden, um
+Probleme oder störende Update-Hinweise zu vermeiden.
+
+Zu beachten ist darüber hinaus, dass selbst erstellte Komponenten
+mit der Tastatur zugänglich sein müssen; traditionell über Tab, Space,
+Enter, Pfeil-Tasten, Shift und Escape.
+
+### Die Problematik am Beispiel
+
+Das einfachste Beispiel wäre ein Knopf zum Speichern. Solche
+Buttons werden heute oftmals fälschlier Weise mit `<a>` oder `<div>`-Tags
+erstellt und erhalten mit JavaScript ihre eigentliche Funktion.
+Wie schnell dies für einen Blinden zu Falle werden kann, sollen
+die folgenden Beispiele aufzeigen.
+
+**Negativbeispiel**
+```html
+<div class="button" onclick="save()">speichern</div>
+```
+Mag sein, dass der „Button“ wie ein Button aussieht, dies ist für
+Screen-Reader jedoch weder ersichtlich noch ist er mit der Tastatur
+überhaupt zu erreichen oder zu bedienen.
+
+**Negativbeispiel**
+```html
+<div class="button" onclick="save()" tabindex="0">speichern</div>
+```
+Der tabindex bewirkt zwar, dass das Element angesprungen werden kann,
+es ist jedoch weiterhin nicht möglich ihn mittels Space/Enter zu bedienen.
+
+**Negativbeispiel**
+```html
+<div class="button" onclick="save()" onkeydown="save()" tabindex="0">speichern</div>
+```
+Sie denken Sie haben an alles gedacht? Einfach die selbe Funktion für
+die Tastatur hinzufügen und schon ist alles OK? Ganz so einfach ist das
+nicht, denn allein das Überspringen mit dem Tabulator führt ohne weitere
+Abfrage nun zum Speichern.
+
+**Negativbeispiel**
+```html
+<a href="javascript:save()">speichern</div>
+```
+Ein link ist mit Tastatur zu erreichen und auch bedienbar (zumindest mit
+Enter), vermittelt dem Screen-Reader jedoch weiterhin den Eindruck, dass
+es sich um eine Verknüpfung handelt, sprich die Seite verlassen wird, auch
+wenn dies nicht der Fall ist.
+
+**Negativbeispiel**
+```html
+<a href="#" onclick="save(event)" onkeydown="save(event)">speichern</div>
+```
+Um auch die Space-Taste zum Speichern nutzen zu können, wie bei einem
+gewöhnlichen Button auch hier noch einmal mit onkeydown. Da wir die Seite
+nicht verlassen wollten enthält unsere save-Funktion einen Aufruf von
+event.preventDefault() ... Sie haben eben einen Blinden eingesperrt –
+denn dieser link kann ohne Maus oder weitere Abfrage niemals mehr verlassen werden.
+
+**Korrekt**
+```html
+<button onclick="save(event)" class="button">speichern</button>
+```
+Solange es korrektes Markup gibt, ist dies der einzig richtige Weg.
+
+### Beispiele
+
+Die vorangegangenen Beispiele lassen sich natürlich lösen.
+Allerdings vermitteln sie dennoch gut, welcher Aufwand und wie viel Umsicht
+nötig ist, um selbst einfachste Imitate bestehender Komponenten so zu
+realisieren, dass sie wie gewohnt funktionieren. Geht es nun um Komponenten,
+die sich anders nicht umsetzen lassen – sei es weil diese bisher nicht
+existieren oder styling-Mittel nicht ausreichen – kommt ARIA ins Spiel.
+
+<div class="tc-example">
+  <div class="form-checkbox-set">
+    <label>
+      <input type="checkbox" name="cb" value="val1" class="form-checkbox">Checkbox
+    </label>
+  </div>
+</div>
+
+```html
+<div class="form-checkbox-set">
+  <label>
+    <input type="checkbox" name="cb" value="val1" class="form-checkbox">Checkbox
+  </label>
+</div>
+```
+
+Durch hinzufügen eines *role*-Attributes kann dem Screen-Reader mitgeteilt
+werden, um was für ein Element es sich handeln soll:
+
+```html
+<div class="form-checkbox-set">
+  <label>
+    <button type="button" role="checkbox" class="form-checkbox-js" aria-checked="false">
+      <span class="check"></span>
+    </button>
+    <input type="checkbox" name="cb" value="val1" class="form-checkbox hidden">Checkbox
+  </label>
+</div>
+```
+
+Nähere Informationen zu diesem Thema und weitere Beispiele finden Sie
+u. A. auf (https://developer.mozilla.org/de/docs/Barrierefreiheit/ARIA)
+
+<h2 id="rich-snippets" class="underline">Rich Snippets</h2>
+
+Bei Snippets handelt es sich um die Kurzinformationen, die unter Ergebnissen
+von Suchmaschinen angezeigt werden. Sie sollen Internetnutzern auf den
+ersten Blick vermitteln, warum die Informationen auf der vorgeschlagenen
+Seite relevant sind. Es kann sich je nach Seite dabei um Adressen,
+Öffnungszeiten, Erfahrungsberichte, Preise, Produkte, Hörproben und
+vieles weitere handeln.
+
+Im allgemeinen spricht man hierbei von _Rich Snippets_, welche
+den Inhalt soweit aufbereiten, dass er maschinen-lesbar ist.
+Unterteilt werden sie aktuell in drei verschiedene Standards:
+
+* Mikrodaten
+* Mikroformate
+* RDFs
+
+Wir empfehlen die Anwendung von Mikrodaten und haben diese daher bereits
+in die vorliegenden Beispiele integriert. Mikrodaten werden von Google,
+Microsoft, Yahoo! und Yandex gemeinsam weiterentwickelt und von den
+gängigen Suchmaschinen unterstützt.
+
+### Beispiel Mikrodaten
+
+Zum besseren Verständnis betrachten wir ein konkretes Beispiel für Mikrodaten.
+Hierzu bedienen wir uns der Einfachheit halber eines Preisangebots.
+
+```html
+<div>
+    <span>4,<sup>95</sup> €</span>
+    <a href="http://www.example.com/images/309433">Bilder</a>
+    <a href="http://www.example.com/purchase/309433">Jetzt bestellen</a>
+</div>
+```
+
+Die Problematik liegt auf der Hand. Unser Angebot besteht aus mehreren
+Teilen: den Euro, ein hochgestellter Cent-Betrag, dem Währungssymbol und diversen
+Links. Um Suchmaschinen eindeutige Hinweise liefern zu können wie die
+einzelnen Bestandteile zu interpretieren sind, erklären wir das Element
+zunächst zu einem **Bereich** für Mikrodaten, indem wir es um
+das *itemscope-Attribut* erweitern.
+
+```html
+<div itemscope>
+    <span>4,<sup>95</sup> €</span>
+    <a href="http://www.example.com/images/309433">Bilder</a>
+    <a href="http://www.example.com/purchase/309433">Jetzt bestellen</a>
+</div>
+```
+
+Das es sich allerdings tatsächlich um ein Produktangebot
+handelt und nicht um einen Betrag in einem fortlaufenden Text wie einem
+Zeitungsartikel oder sogar etwas komplett anderes, ist jedoch noch nicht
+ersichtlich. Dies spezifizieren wir durch die Angabe eines **Typs**
+mithilfe des *itemtype*.
+
+```html
+<div itemscope itemtype="http://schema.org/Offer">
+    <span>4,<sup>95</sup> €</span>
+    <a href="http://www.example.com/images/309433">Bilder</a>
+    <a href="http://www.example.com/purchase/309433">Jetzt bestellen</a>
+</div>
+```
+
+Das es sich um ein Angebot handelt wäre damit geklärt, aber darüber
+hinaus muss die Bedeutung der einzelnen Elemente geklärt werden. Dies
+geschieht durch Zuordnung der entsprechenden **Eigenschaften** mit dem
+*itemprop* Attribut.
+
+```html
+<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+    <span itemprop="price">4,<sup>95</sup> €</span>
+    <a itemprop="image" href="http://www.example.com/images/309433">Bilder</a>
+    <a itemprop="url" href="http://www.example.com/purchase/309433">Jetzt bestellen</a>
+</div>
+```
+
+Letztendlich lässt sich der Preis noch eindeutiger definieren,
+indem wir uns meta-tags bedienen. Dies ermöglicht eine für Maschinen
+eindeutige Preisangabe (ohne lokale Tausender-/Dezimaltrennzeichen)
+und kann insbesondere bei unterschiedlichen Währungen wie $/£ hilfreich sein,
+welche das selbe Währungssymbol haben.
+
+```html
+<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+    <meta itemprop="priceCurrency" content="EUR">
+    <meta itemprop="price" content="4.95">
+    <span>4,<sup>95</sup> €</span>
+    <a itemprop="image" href="http://www.example.com/images/309433">Bilder</a>
+    <a itemprop="url" href="http://www.example.com/purchase/309433">Jetzt bestellen</a>
+</div>
+```
+
+Nähere Informationen zu diesem Thema und weitere
+Beispiele finden Sie auf (http://schema.org/docs/gs.html)

data/_sass/_accessibility.md

@@ -0,0 +1,17 @@
+## Screenreader-Helfer
+
+Die CSS-Klasse `.sr-only` versteckt Elemente visuell.
+Sorgt aber dafür, dass der Inhalt von Screenreadern erkannt wird.
+Sie sollte überall da zum tragen kommen, an dem Screenreader das eigentliche
+Element nicht erkennen und interpretieren können.
+Ein klassisches Beispiel stellt ein einfaches Icon dar:
+
+<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>
+```

data/_sass/_accessibility.scss

@@ -0,0 +1,30 @@
+//
+// accessibility
+// ----------------------------------------
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}

data/_sass/_animation.scss

@@ -0,0 +1,17 @@
+//
+// animation
+// ----------------------------------------
+
+.fade {
+  opacity: 0;
+  @include vendor-prefix('transition', 'opacity .3s ease-out');
+
+  &.in {
+    opacity: 1;
+  }
+}
+
+.slide {
+  width: 0;
+  transition: width $transition-time-out $telekom-ease-in-medium;
+}

data/_sass/_badges.md

@@ -0,0 +1,39 @@
+<!--
+//
+//
+// Badges
+-->
+
+Um Einträge und deren Gewichtung hervorzuheben können sog. Badges
+eingesetzt werden.
+
+Badges `.badge` werden in der Regel auf das HTML-Tag `<span>` angewendet:
+
+<div class="tc-example">
+<a href="#">Neue Nachrichten <span class="badge">14</span></a>
+</div>
+
+```html
+<a href="#">Neue Nachrichten <span class="badge">14</span></a>
+```
+
+## Brand-Variante
+
+<div class="tc-example">
+    <p><span class="badge">34</span> - Regular</p>
+    <p><span class="badge badge-brand">34</span> - Brand</p>
+</div>
+
+```html
+<!-- Regular -->
+<span class="badge">34</span>
+<!-- Brand -->
+<span class="badge badge-brand">34</span>
+```
+
+<div class="tc-note">
+**Anmerkung Barrierefreiheit:**
+Die eingesetzten Farben haben meist eine Bedeutung. Um diese Bedeutung auch
+beim Einsatz von Unterstützungstechnologien zu untermauern sollte sie
+zusätzlich versteck in Textform durch die CSS-Klasse `.sr-only´ hinterlegt werden.
+</div>

data/_sass/_badges.scss

@@ -0,0 +1,50 @@
+//
+// Badges
+// ----------------------------------------
+
+.badge {
+  background-color: $badges-bgr-color;
+  border-radius: $badges-border-radius;
+  color: $badges-font-color-normal;
+  display: inline-block;
+  font-size: $font-size-small;
+  font-weight: 700;
+  line-height: 1;
+  min-width: 20px; // Linehight + Margin Top & Bottom
+  padding: 3px building-units(.5) 2px;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+
+  &:empty {
+    display: none;
+  }
+
+  .content-list-item > & {
+    float: right;
+  }
+}
+
+.badge-positive {
+  @include badge-variant($badges-bgr-color-positive);
+}
+
+.badge-warning {
+  @include badge-variant($badges-bgr-color-warning);
+}
+
+.badge-negative {
+  @include badge-variant($badges-bgr-color-negative, $badges-font-color-bright);
+}
+
+.badge-function {
+  @include badge-variant($badges-bgr-color-function, $badges-font-color-bright);
+}
+
+.badge-brand {
+  @include badge-variant($badges-bgr-color-brand, $badges-font-color-bright);
+}
+
+.badge-dark {
+  @include badge-variant($badges-bgr-color-dark, $badges-font-color-bright);
+}

data/_sass/_brandbar.scss

@@ -0,0 +1,34 @@
+//
+// Brandbar
+// ----------------------------------------
+
+.brand-logo {
+  display: block;
+}
+
+.brand-claim {
+  display: block;
+}
+
+.brandbar {
+  min-height: building-units(7);
+  background-color: $color-brand;
+  @include clearfix();
+  padding-left: 12px;
+  padding-right: 12px;
+
+  .brand-logo {
+    margin-top: 24px;
+    float: left;
+  }
+
+  .brand-claim {
+    margin-top: 38px;
+    float: right;
+  }
+}
+
+.brandbar-minimized {
+  height: 4px;
+  min-height: auto !important;
+}

data/_sass/_brandcolor.md

@@ -0,0 +1,92 @@
+<h2 class="underline">Farben</h2>
+
+## Hintergründe
+
+Die Helfer-Klassen umfassen alle Markenfarben und dienen zur Einfärbung
+von Element-Hintergründen. Sie beeinflussen somit die CSS-Eigenschaft
+`background-color`:
+
+###Telekom Magenta
+
+<ul class="brandcolor-list">
+  <li class="bg-brand"><span class="brandcolor-class">bg-brand</span></li>
+</ul>
+
+###Telekom Grau
+
+<ul class="brandcolor-list">
+  <li class="bg-gray-4"><span class="brandcolor-class">bg-gray-4</span></li>
+  <li class="bg-gray-6"><span class="brandcolor-class">bg-gray-6</span></li>
+  <li class="bg-gray-1"><span class="brandcolor-class text-white">bg-gray-1</span></li>
+  <li class="bg-gray-2"><span class="brandcolor-class text-white">bg-gray-2</span></li>
+  <li class="bg-gray-3"><span class="brandcolor-class text-white">bg-gray-3</span></li>
+  <li class="bg-gray-5"><span class="brandcolor-class text-white">bg-gray-5</span></li>
+  <li class="bg-gray-38"><span class="brandcolor-class text-white">bg-gray-38</span></li>
+</ul>
+
+###Screen Yellow
+
+<ul class="brandcolor-list">
+  <li class="bg-yellow"><span class="brandcolor-class">bg-yellow</span></li>
+  <li class="bg-yellow-75"><span class="brandcolor-class">bg-yellow-75</span></li>
+  <li class="bg-yellow-50"><span class="brandcolor-class">bg-yellow-50</span></li>
+  <li class="bg-yellow-25"><span class="brandcolor-class">bg-yellow-25</span></li>
+</ul>
+
+###Screen Orange
+
+<ul class="brandcolor-list">
+  <li class="bg-orange"><span class="brandcolor-class">bg-orange</span></li>
+  <li class="bg-orange-75"><span class="brandcolor-class">bg-orange-75</span></li>
+  <li class="bg-orange-50"><span class="brandcolor-class">bg-orange-50</span></li>
+  <li class="bg-orange-25"><span class="brandcolor-class">bg-orange-25</span></li>
+</ul>
+
+###Screen Violet
+
+<ul class="brandcolor-list">
+  <li class="bg-violet"><span class="brandcolor-class text-white">bg-violet</span></li>
+  <li class="bg-violet-75"><span class="brandcolor-class text-white">bg-violet-75</span></li>
+  <li class="bg-violet-50"><span class="brandcolor-class">bg-violet-50</span></li>
+  <li class="bg-violet-25"><span class="brandcolor-class">bg-violet-25</span></li>
+</ul>
+
+###Screen Dark Blue
+
+<ul class="brandcolor-list">
+  <li class="bg-dark-blue"><span class="brandcolor-class text-white">bg-dark-blue</span></li>
+  <li class="bg-dark-blue-75"><span class="brandcolor-class text-white">bg-dark-blue-75</span></li>
+  <li class="bg-dark-blue-50"><span class="brandcolor-class">bg-dark-blue-50</span></li>
+  <li class="bg-dark-blue-25"><span class="brandcolor-class">bg-dark-blue-25</span></li>
+</ul>
+
+###Screen Light Blue
+
+<ul class="brandcolor-list">
+  <li class="bg-light-blue"><span class="brandcolor-class">bg-light-blue</span></li>
+  <li class="bg-light-blue-75"><span class="brandcolor-class">bg-light-blue-75</span></li>
+  <li class="bg-light-blue-50"><span class="brandcolor-class">bg-light-blue-50</span></li>
+  <li class="bg-light-blue-25"><span class="brandcolor-class">bg-light-blue-25</span></li>
+</ul>
+
+###Screen Petrol
+
+<ul class="brandcolor-list">
+  <li class="bg-petrol"><span class="brandcolor-class">bg-petrol</span></li>
+  <li class="bg-petrol-75"><span class="brandcolor-class">bg-petrol-75</span></li>
+  <li class="bg-petrol-50"><span class="brandcolor-class">bg-petrol-50</span></li>
+  <li class="bg-petrol-25"><span class="brandcolor-class">bg-petrol-25</span></li>
+</ul>
+
+###Screen Green
+
+<ul class="brandcolor-list">
+  <li class="bg-green"><span class="brandcolor-class">bg-green</span></li>
+  <li class="bg-green-75"><span class="brandcolor-class">bg-green-75</span></li>
+  <li class="bg-green-50"><span class="brandcolor-class">bg-green-50</span></li>
+  <li class="bg-green-25"><span class="brandcolor-class">bg-green-25</span></li>
+</ul>
+
+```html
+<div class="bg-yellow"></div>
+```