Die Typografie unseres Creative Frameworks ist in verschiedene Bereiche gegliedert. Wie du sie einsetzt und welche Option sie umfasst ist in den unten angeführten Bereichen beschrieben. In diesm Abschnitt findest du alles zur Typografie des Frameworks.
Titel umfasst 5 verschiedene Titel Klassen die die Größe einer Überschrift bestimmen. Die Klassen beginnen mit dem Klassennamen .title-size, wobei anstatt size die gewünschte Größe verwendet werden muss. Es gibt folgende Größen .xs,.sl,.md, .lg und .xl. Titel sollten verwendet werden um Überschriften oder wichtige Informationen zu kennzeichnen.
<span class="title-xl">Titel-xl</span>
<span class="title-lg">Titel-lg</span>
<span class="title-md">Titel-md</span>
<span class="title-sl">Titel-sl</span>
<span class="title-xs">Titel-xs</span>
Die Überschriften Tags <h1> bis <h6> wurden ebenfalls von uns gestylt mit unterschiedlichen Größen. Für die Überschriften wird kein Klassenname benötigt.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Eben so wie die Überschriften Tags wurde auch der <p> Tag gestylt um es dem Benutzer einfach zu machen Content Elemente zu erstellen die sich aus einem Titel oder Heading sowie einem Paragraphen bestehen. Der <p> Tag hat einen margin von 1 rem und eine line-height von 1.5 rem.
Das ist ein Paragraf
Das ist ein weiterer Paragraf
Das ist der letzte Paragraf
<p>Das ist ein Paragraf</p>
<p>Das ist ein weiterer Paragraf</p>
<p>Das ist der letzte Paragraf</p>
Das Creative Framework bietet eine Auswahl an Text Schatten die in die zwei Arten .hard und .blur geliedert sind. Mit dem Klassenname .text-art-stärke können die gewünschten Schatten aufgerufen werden. Bei der Text Schattenstärke gibt es 3 verschiedene Abstufungen 1, 2 und 3. Die Klasse für einen .blur Schatten könnte folgendermaßen ausschauen: text-blur-3.
Text Blur-Schatten leichtText Hard-Schatten leicht
Text Blur-Schatten mittelText Hard-Schatten mittle
Text Blur-Schatten starkText Hard-Schatten stark
<span class="text-blur-1">Text Blur-Schatten leicht</span> <span class="text-hard-1">Text Hard-Schatten leicht</span>
<span class="text-blur-2">Text Blur-Schatten mittel</span> <span class="text-hard-2">Text Hard-Schatten mittle</span>
<span class="text-blur-3">Text Blur-Schatten stark</span> <span class="text-hard-3">Text Hard-Schatten stark</span>
Für die Textausrichtung gibt es ebenfalls Klassen die dem Benutzer das Ausrichten von Text erleichtern. Die Klassen sind ebenfalls mit dem Klassennamen .text-position aufrufbar wobei es 3 Arten von Positionen gibt. Position Rechts .text-right, Position Links .text-left und Position Zentriert .text-center.
Dieser Paragraph ist rechts ausgerichtetet.
Dieser Paragraph ist links ausgerichtetet.
Dieser Paragraph ist zentriertet.
<p class="text-right">Dieser Paragraph ist rechts ausgerichtetet.</p>
<p class="text-left">Dieser Paragraph ist links ausgerichtetet.</p>
<p class="text-center">Dieser Paragraph ist zentriertet.</p>
Mit dem Klassennamen .text-stärke kann die Schriftstärke eines Absatzes oder eines einzelnen Text Elements bestimmt werden. Als Optionen für die Stärke gibt es 3 unterschiedliche Klassen .text-bold, .text-medium und .text-light. Die Klasse .text-bold stezt die Schriftstärke auf bold. Ebenso setzen die Klassen .text-medium und .text-light die Schriftstärke des Elements auf medium oder light. Weiteres gibt es noch .text-thin und .text-thick.
Dieser Text ist bold.
Dieser Text ist medium.
Dieser Text ist light.
Dieser Text ist thin.
Dieser Text ist thick.
<p class="text-bold">Dieser Text ist bold.</p>
<p class="text-medium">Dieser Text ist medium.</p>
<p class="text-light">Dieser Text ist light.</p>
<p class="text-thin">Dieser Text ist thin.</p>
<p class="text-thick">Dieser Text ist thick.</p>
Es gibt eine Vielzahl an Schriftarten die unser Framework bereitstellt. Es wurden 10 unterschiedliche Schriftarten von uns ausgewählt die über Klassenname aufgerufen werden können. Die Klassenname setzen sich aus .font-schriftart zusammen. Anstatt schriftart ist der gewünschte Schriftname einzusetzen. Die Klasse der Schriftart sollte am besten in den <body> Tag eingefügt werden um dem Dokument einen einheitlichen Stil zu verpassen. Sie kann aber auch Paragrafen oder einzelnen Text Elementen zugeordnet werden. Wir bieten folgende Schriftarten an: .roboto,.open-sans,.merriweather, .nunito,.raleway,.roboto-serif, .merriweather-serif,.pt-serif,.eb-garamond, .source,.amatic und .kavicanar.
Roboto
Merriweather
Nunito
Raleway
Roboto Serif
Merriweather Serif
PT Serif
EB Garamond
Source
Amatic
Kavicanar
<span class="font-roboto">Roboto</span>
<span class="font-merriweather">Merriweather</span>
<span class="font-nunito">Nunito</span>
<span class="font-raleway">Raleway</span>
<span class="font-roboto-serif">Roboto Serif</span>
<span class="font-merriweather-serif">Merriweather Serif</span>
<span class="font-pt-serif">PT Serif</span>
<span class="font-eb-garamond">EB Garamond</span>
<span class="font-source">Source</span>
<span class="font-amatic">Amatic</span>
<span class="font-kavicanar">Kavincanar</span>
Es wurden ebenfalls mehrere Klassen zum stylen von Listen bereitgestellt. Alle Listen <ul>, <ol> und <dl> wurden standartgemäß designt. Es gibt die Klasse .list-inline, .list-styled und .list-unstyled. Bei Alle Listen wurde margin-top entfernt und ein margin-bottom 1rem hinzugefügt. Die Klasse .list-unstyled hat keine Aufzählungspunkte und die Klasse .list-inline stellt eine Liste als Inline Block Element dar. Die gestylte Liste .list-styled hat nicht gefüllte Punkte als Auflistungszeichen sowie die allgemeinen margin und padding Eigenschaften aller Listen.
<ul class="list-unstyled">
<li>Erstes Listen Element</li>
<li>Zweites Listen Element</li>
<li>Drittes Listen Element</li>
<li>Viertes Listen Element</li>
<li>Fünftes Listen Element</li>
</ul>
<ul class="list-styled">
<li>Erstes Listen Element</li>
<li>Zweites Listen Element</li>
<li>Drittes Listen Element</li>
<li>Viertes Listen Element</li>
<li>Fünftes Listen Element</li>
</ul>
<ul class="list-inline">
<li>Erstes Listen Element</li>
<li>Zweites Listen Element</li>
<li>Drittes Listen Element</li>
<li>Viertes Listen Element</li>
<li>Fünftes Listen Element</li>
</ul>
Inline Text Elemente können verwendet werden um Text hervor zu heben oder ermöglichen spezielle Formatierung von Text. Creative Framework hat folgende Tags <em>, <i>,<b>,<del>,<small>, <strong> und <mark> standartgemäß gestylt. Besonders wichtige Inline Text Elemente sind <i> für kurisven Text, <b> für fett geschrieben Text und <del> für durchgestrichenen Text.
Ein Teil des Textes ist leicht hervorgehoben
Ein Teil des Textes ist kursive
Ein Teil des Textes is bold
Ein Teil des Textes ist durchgestrichen
Ein Teil des Textes ist strong
Dieser Text ist makiert.
<p>Ein Teil des Textes ist leicht <em>hervorgehoben</em></p>
<p>Ein Teil des Textes ist <i>kursive</i></p>
<p>Ein Teil des Textes is <b>bold</b></p>
<p>Ein Teil des Textes ist <del>durchgestrichen</del>
<p>Ein Teil des Textes ist <strong>strong</strong></p>
<p><mark>Dieser Text ist makiert.</mark></p>
Da Links ein wichtiger Bestandteil einer Webseite sind, besitzt unser Framework eine Auswahl an verschiedenen Link Designs. Sie können einfach über den Klassennamen .link-art aufgerufen werden. Bei der Art der Links stehen folgende Auswahlmöglichkeiten zu Verfügung: .link-slide,.link-change-color, .link-scale-small,.link-scale-big,.link-heartbeat, .link-underline-green,.link-underline-white,.link-underline-blue, .link-underline-red,.link-lighten,.link-darken, .link-bg und link-crossed.
<a href="https://www.google.at" class="link-slide">www.google.at</a>
<a href="https://www.google.at" class="link-change-color">www.google.at</a>
<a href="https://www.google.at" class="link-scale-big">www.google.at</a>
<a href="https://www.google.at" class="link-scale-small">www.google.at</a>
<a href="https://www.google.at" class="link-underline-white">www.google.at</a>
<a href="https://www.google.at" class="link-underline-green">www.google.at</a>
<a href="https://www.google.at" class="link-underline-blue">www.google.at</a>
<a href="https://www.google.at" class="link-underline-red">www.google.at</a>
<a href="https://www.google.at" class="link-heartbeat">www.google.at</a>
<a href="https://www.google.at" class="link-darken">www.google.at</a>
<a href="https://www.google.at" class="link-lighten">www.google.at</a>
<a href="https://www.google.at" class="link-crossed">www.google.at</a>