Style-Guide: So sehen die Elemente aus
Auf dieser Seite zeige ich die verschiedenen Formatierungen, die wir für die Dokumentation von howtodance.de verwenden. Das hilft uns, ein konsistentes Design beizubehalten, wenn wir neue technische Anleitungen oder CSS-Snippets hinzufügen.
Die Hierarchie der Überschriften (H2)
Überschriften der Ebene 2 nutzen wir für die Hauptkapitel einer Dokumentation. Sie sind in einem kräftigen Grau gehalten und geben der Seite eine klare Struktur.
Unterkapitel und Details (H3)
Die H3 eignet sich hervorragend für spezifische Modul-Beschreibungen oder CSS-Erklärungen innerhalb eines Hauptthemas.
Kleine Gliederungspunkte (H4)
Für feine Unterteilungen oder kurze Funktionsbeschreibungen innerhalb eines Moduls verwenden wir die H4.
Besondere Hinweise (H5)
Die H5 nutzen wir oft als Einleitung oder für ergänzende Informationen, da sie etwas dezenter wirkt, aber dennoch Struktur verleiht.
Extra große Info-Überschrift (H6)
In unserem Stylesheet ist die H6 besonders groß definiert (2.9em). Das ist ideal für plakative Statements oder sehr wichtige Ankündigungen.
Infoboxen mit der Address-Klasse
Wenn wir Informationen hervorheben wollen (wie Tipps oder Modul-Parameter), nutzen wir den Address-Tag. Er bekommt durch unser CSS den markanten grauen Balken links.
Pro-Tipp für WBCE: Nutze beim Kopieren von Code immer das Code Modul 2, um sicherzustellen, dass keine Zeichen vom WYSIWYG-Editor umgewandelt werden.
Darstellung von Code-Blöcken (PRE)
Für längere CSS-Abschnitte oder PHP-Funktionen verwenden wir den PRE-Tag. Dieser wird mit einem Code-Icon im Hintergrund und einem Rahmen dargestellt.
pre {
background: #f3f3f3 url(images/icons/code.png) no-repeat 5px 5px;
padding: 0 30px;
border: 1px solid #C7C7C7;
overflow-x: visible;
}
Inline-Code im Fließtext
Um technische Begriffe oder Klassen direkt im Satz hervorzuheben, nutzen wir den Code-Tag: .blocksatz oder .picfull werden so direkt als technisches Element erkannt.
Zitate und wichtige Merksätze (Blockquote)
Für Kundenstimmen, Zitate oder besonders wichtige Leitsätze nutzen wir das Blockquote-Element, das wir mit einem schicken orangen Akzent und Anführungszeichen versehen haben.
Ein guter Tanzschul-Auftritt braucht nicht nur Rhythmus im Blut, sondern auch eine blitzschnelle und sauber strukturierte Webseite.
Mehr Informationen: howtodance.de