Bakual.net – Typography

In diesem Artikel zeig ich euch mögliche Typografie Elemente. Alle folgenden Elemente können in einem Artikel verwendet werden. Um sie zu benutzen muss man oft eine CSS Klasse einfügen. Das geht je nach Editor nur wenn man den Editor deaktiviert und mittels HTML Ansicht direkt die Änderung macht.

Akkordeon

Frühere Versionen von Allrounder hatten eine eigene Akkordeon Lösung mittels der lvacc Klasse. In der aktuellen Version ist dies standardmässig deaktiviert, kann aber in den "Advanced Template Options" wieder aktiviert werden indem man "Load deprecated features" aktiviert.

Bootstrap hat eine integrierte Lösung um ein Akkordeon zu erstellen. Wie das geht kann man in deren Dokumentation nachlesen. Es gibt aber auch tolle Plugins wie Sliders welche helfen das ganz einfach zu machen. Wenn man das Sliders Plugin nutzt, sollte man in dessen Einstellungen das Laden des Stylesheets deaktivieren, sonst siehts doof aus.

Horizontale Linie

Überschrift 1-6

Sektionsüberschrift 1-6

Abschnitte

Die Style funktionieren jeweils sicher für  sowie <div> Tags.
Siehe auch Bootstrap Dokumentation für weitere Möglichkeiten.

<p class="alert">TEXT HIER...</p>
<p class="alert alert-error">TEXT HIER...</p>
<p class="alert alert-success">TEXT HIER...</p>
<p class="alert alert-info">TEXT HIER...</p>
<p class="alert alert-block">TEXT HIER...</p>

Ein allgemeiner Warntext mit der Klasse alert

Ein Fehlertext mit den Klassen alert alert-error

Ein Erfolgstext mit den Klassen alert alert-success

Ein Informationstext mit den Klassen alert alert-info

Ein allgemeiner Warntext mit etwas grösserem Abstand oben und unten. Ideal für grössere Textblöcke. Gemacht mit den Klassen alert alert-block

Bitte beachtet dass die folgenden Klassen neu ein Prefix typo- benötigen. Dies weil einige davon mit Bootstrap Sachen wie Tooltips und Popovers Probleme machten.

<p class="typo-tip">TEXT HIER...</p>
<p class="typo-alert">TEXT HIER...</p>

Ein Tip Text welcher dazu verwendet werden kann um speziell gut sichtbare Tips zu markieren. Klasse: typo-tip

Ein Alarm Text welcher dazu verwendet werden kann um speziell gut sichtbare Alarmmeldungen zu markieren. Klasse: typo-alert

<p class="typo-info">TEXT HIER...</p>
<p class="typo-right">TEXT HIER...</p>
<p class="typo-alarm">TEXT HIER...</p>
<p class="typo-tell">TEXT HIER...</p>
<p class="typo-content">TEXT HIER...</p>
<p class="typo-note">TEXT HIER...</p>

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen typo-info mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen typo-right mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen typo-alarm mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen typo-tell mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen typo-content mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen typo-note mitgibt, wird es so formatiert wie in dieser Demo.

<p class="contenthead">TEXT HIER...</p>
<p class="contenthead-dark">TEXT HIER...</p>
<p class="contenthead-blue">TEXT HIER...</p>
<p class="contenthead-red">TEXT HIER...</p>
<p class="contenthead-green">TEXT HIER...</p>

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen contenthead mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen contenthead-dark mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen contenthead-blue mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen contenthead-red mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen contenthead-green mitgibt, wird es so formatiert wie in dieser Demo.

<p class="typo-hot">TEXT HIER...</p>
<p class="typo-new">TEXT HIER...</p>
<p class="typo-top">TEXT HIER...</p>

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen typo-hot mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen typo-new mitgibt, wird es so formatiert wie in dieser Demo.

 Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem  den Klassennamen typo-top mitgibt, wird es so formatiert wie in dieser Demo.

Code

Blockquote

Listen

Unsortierte Liste

<ul>
  <li>....</li>
  <li>....</li>
</ul>

Listenpunkt 1.1
Listenpunkt 1.2
Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
  - Listenpunkt 1.3.3.1
  - Listenpunkt 1.3.3.2
  - Listenpunkt 1.3.3.3
  - Listenpunkt 1.3.3.4
  - Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
Listenpunkt 1.4
Listenpunkt 1.5

<ulclass="arrow"
  <li>....</li>
  <li>....</li>
</ul>

Listenpunkt 1.1
Listenpunkt 1.2
Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
  - Listenpunkt 1.3.3.1
  - Listenpunkt 1.3.3.2
  - Listenpunkt 1.3.3.3
  - Listenpunkt 1.3.3.4
  - Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
Listenpunkt 1.4
Listenpunkt 1.5

<ul class="folder">
  <li>....</li>
  <li>....</li>
</ul>

Listenpunkt 1.1
Listenpunkt 1.2
Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
  - Listenpunkt 1.3.3.1
  - Listenpunkt 1.3.3.2
  - Listenpunkt 1.3.3.3
  - Listenpunkt 1.3.3.4
  - Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
Listenpunkt 1.4
Listenpunkt 1.5

<ul class="ok">
  <li>....</li>
  <li>....</li>
</ul>

Listenpunkt 1.1
Listenpunkt 1.2
Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
  - Listenpunkt 1.3.3.1
  - Listenpunkt 1.3.3.2
  - Listenpunkt 1.3.3.3
  - Listenpunkt 1.3.3.4
  - Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
Listenpunkt 1.4
Listenpunkt 1.5

<ul class="star">
  <li>....</li>
  <li>....</li>
</ul>

Listenpunkt 1.1
Listenpunkt 1.2
Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
  - Listenpunkt 1.3.3.1
  - Listenpunkt 1.3.3.2
  - Listenpunkt 1.3.3.3
  - Listenpunkt 1.3.3.4
  - Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
Listenpunkt 1.4
Listenpunkt 1.5

<ul class="cross">
  <li>....</li>
  <li>....</li>
</ul>

Listenpunkt 1.1
Listenpunkt 1.2
Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
  - Listenpunkt 1.3.3.1
  - Listenpunkt 1.3.3.2
  - Listenpunkt 1.3.3.3
  - Listenpunkt 1.3.3.4
  - Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
Listenpunkt 1.4
Listenpunkt 1.5

An ordered list

<ol>
  <li>....</li>
  <li>....</li>
</ol>

Listenpunkt 1.1
Listenpunkt 1.2
Listenpunkt 1.3
1. Listenpunkt 1.3.1
2. Listenpunkt 1.3.2
3. Listenpunkt 1.3.3
  1. Listenpunkt 1.3.3.1
  2. Listenpunkt 1.3.3.2
  3. Listenpunkt 1.3.3.3
  4. Listenpunkt 1.3.3.4
  5. Listenpunkt 1.3.3.5
4. Listenpunkt 1.3.4
5. Listenpunkt 1.3.5
Listenpunkt 1.4
Listenpunkt 1.5

{slider Links}

<a href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="information" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="extern" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="www" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="download" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="run" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="image" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="user" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="pdf" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="zip" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="text" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="sound" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="video" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>

Dropcap

Bilder

Spalten

Frühere Versionen von Allrounder hatten eine Lösung um mittels der lv-cols Klasse Spalten anzuzeigen. In der aktuellen Version ist diese standardmässig deaktiviert, kann aber in den "Advanced Template Options" wieder aktiviert werden indem man "Load deprecated features" aktiviert.

Da Bootstrap von sich aus schon solche Features mitbringt, habe ich diese etwas erweitert was nun erlaubt sogar "responsive" Spalten zu machen. Das heisst wenn das Fenster kleiner wird (zB auf Handys oder wenn man den Browser kleiner macht) werden die Spalten automatisch reduziert.