Grundlagen

Die Komponenten basieren auf HTML5. Das bedeutet für die Entwicklung einer Seite, dass dies dem Browser über den Dokumententyp auch mitgeteilt werden muss:

<!DOCTYPE html>

Unterstützung älterer Browser

Da ältere Browser oft nicht die nötige Unterstützung für moderne Techniken wie CSS3 und HTML5 mit sich bringen, müssen diese unter Zuhilfenahme von Browserweichen und Skripten unterstützt werden. Dies gilt vorallem für den Internet-Explorer der Version 8.

Um dafür die nötige grafische Unterstützung zu erhalten muss bereits das HTML-Grundgerüst angepasst werden:

<!--[if (lte IE 8) ]><html lang="de" class="lte-ie8"><![endif]--> 
<!--[if (gt IE 8)|!(IE)]><!--><html lang="de"><!--<![endif]--> 

</html>

Da der Internet-Explorer der Version 8 weder mit den neuen HTML5 Elementen, noch mit den Media-Queries aus CSS3 umzugehen weiß muss ihm dies explizit beigebracht werden. Das erledigen Open-Source Skripte die über sogenannte Content Delivery Networks bezogen werden können:

<!-- HTML5 element and CSS3 media query support for IE8 --> 
<!--[if lte IE 8]> 
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]-->

Mobile Geräte

Um eine einwandfreie Darstellung auf mobilen Geräten zu erhalten sollte das Dokument noch mit dem Meta-Element viewport versehen werden. Es sorgt dafür, dass die Seite beim Öffnen mit einem Zoom-Faktor von 1 dargestellt wird und sich optimal an die Breite des Geräts anpasst:

<meta name="viewport" content="width=device-width, initial-scale=1">

Accessibility

Oft werden Formulare oder Ähnliches in Web-Anwendungen verwendet. Um deren Verwendung für Unterstützungstechnologien zu verbessern kann das Attribut role="application" angewendet werden:

<body role="application">...
<!-- oder -->
<div role="application">...

Basis-Template

Für den Einstieg kann dieses Basis-Template verwendet werden. Es beinhaltet bereits alle erforderlichen Verknüpfungen und Einstellungen. Einfach den Quelltext in eine HTML-Datei kopieren und ggf. die Pfade zu den Stylesheets und Skripen anpassen:

<!DOCTYPE html> 
<!--[if (lte IE 8) ]><html lang="de-DE" class="no-js lte-ie8"><![endif]--> 
<!--[if (gt IE 8)|!(IE)]><!--><html class="no-js" lang="de"><!--<![endif]--> 
  <head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Telekom Komponenten</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Place favicon.ico and apple-touch-icon(s) in the root directory --> 

    <!-- Telekom Components CSS --> 
    <link type="text/css" rel="stylesheet" href="css/components.min.css" /> 

    <!-- HTML5 element and CSS3 media query support for IE8 --> 
    <!--[if lte IE 8]> 
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
  </head> 
  <body> 
    <p>Lorem ipsum...<p> 

    <!-- jQuery from CDN --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

    <!-- Telekom Components JS --> 
    <script type="text/javascript" src="js/components.min.js"></script> 
  </body> 
</html>

Normalisierung

Um eine einheitlichere Darstellung auf verschiedenen Browsern zu erzielen wird normalize.css eingesetzt. normalize.css ist ein Projekt von Nicolas Gallagher.

Webfonts

Die Codecomponenten verwenden Webfonts für die Darstellung der Schrift und der Icons.

Schriftbasis

Den gesamten Code Components liegt ein Gestaltungsraster zugrunde, dass auf einer Schriftgröße von 18px und einer Zeilenhöhe von 120% basiert.

Die dabei verwendete Schriftart ist die Telegrotesk im Schnitt regular.

Um diese Grundsätze in allen Komponenten sicherzustellen wurden sie direkt auf den <body> angewendet und werden somit auf fast alle Elemente wie beispielsweise <h1> oder <p> automatisch übertragen:

<h1>...</h1>
<p>...</p>

Es stehen außerdem die Schriftschnitte halbfett und fett zur Verfügung:

<p class="text-semibold">...</p>
<p class="text-bold">...</p>

Lizenzinformation für Telegrotesk Schriftart

Die Schriftart "Telegrotesk" darf nur von Mitarbeitern der Deutschen Telekom AG kostenfrei geladen und verwendet werden. Sie darf nicht an Dritte weitergegeben werden. Bitte kontaktieren sie zum Thema Schrift den Brand Design Support support(at)branddesign.telekom.com.

Alle Agenturen, Auftragnehmer, Leistungserbringer oder sonstige Geschäftspartner sind verpflichtet, die Schriftart von URW++ zu erwerben.