Theme: Classic

Das Theme Classic liebt Text, viel Text und strukturierte Überschriften. Das Menu ist sparsam und doch funktional, enthält es doch permanente Menupunkte und eine assoziative Menusektion. Der Hauptbereich ist ganz dem Inhalt vorbehalten.
Eine interne Seitennavigation dient gleichzeitig als Outline. Trotz dieser Strenge ist das Theme farblich flexibel. Helle wie dunkle Farbschemen lassen sich schnell erstellen.

Allgemeines

Sie können dieses Theme über die Seiten dieser Site testen.

Das Classic Theme ist ein KISS Theme. Es erwartet auf den Inhalt reduzierte HTML-Dokumente als Quelle, ohne header, footer oder main-Bereiche. Ihre Quell-Dokumente können also Design-agnostisch geschrieben werden. Eine typische Vorlage für eine Inhaltsseite sieht so aus:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<meta name="description" lang="de" content="Beschreibung des Seiteninhalts">
	<title>Ein Titel</title>
	<script src="../js/main.js"></script>
<!--optional
	<noscript><link rel="stylesheet" href="../css/nojs.css"></noscript>
	<meta name="date" content="2018-06-12">
	<meta name="last-modified" content="2018-07-29">
	<style>
/* lokale Styles */
	</style>
	<script data-initfunction="myfunc">
// lokales script hier
	</script>
-->
</head>
<body>

<h1>Hauptüberschrift</h1>

<!-- Inhalt der Seite hier -->

</body>
</html>

Organisation

Erstellen Sie irgendwo in Ihrem Dateisystem (bzw. in httpd-root) die folgenden Ordner und Unterordner:

Wenn Sie die Ordner anders benennen oder in einer anderen Ordnung anlegen, müssen Sie im Theme entsprechende Pfade anpassen.

Navigation

Zum Aufbau der Navigation braucht es eine Sitemap, die nach dieser Beschreibung strukturiert ist.
Das Theme wertet die Attribute data-for="navigation searchform" und data-relgroup="grouplabel" aus.
Links die nicht in der permanenten Navigation auftauchen, können mit einer Gruppe assoziiert werden, deren Links in der Navigation als Verwandte Themen erscheinen.
Die Navigation enthält zusätzlich ein Suchfeld, wodurch alle öffentlichen Seiten immer verfügbar sind. Ab bestimmten Bildschirmhöhen steht position:sticky optional zur Verfügung.

Design

Das Classic Theme folgt selbstverständlich den Forderungen des responsive Designs. Es kann farblich einfach angepasst werden. Auf Wunsch kann ein Standardbanner definiert werden.
Das Theme verwendet die selbst gehostete Font-Familie Lora eine lesefreundliche mittlere Serifenschrift. Einbindung erfolgt aus Sparsamkeitsgründen ausschlisslich über woff2, so dass Fonts den Download nur unwesentlich belasten.
Holen Sie sich Lora.rar und entpacken Sie das Paket in fonts.

Passend zur Schrift und zur Absicht, Vielschreiber zu unterstützen, sind p-Elemente automatisch mit Silbentrennung und Blocksatz versehen.

Unterstützung semantischer Klassen

Das Classic Theme beinhaltet semantische Klassen für Icons, die mit den Spritemaps gui.svg und gui_dark.svg harmonieren. Speichern Sie diese Dateien in images.
Eine volle Referenz aller Icon-Klassen finden Sie auf Website: Iconsets.
Tabellen mit der Klasse fixit werden speziell für Mobiles aufbereitet.
Eine Demo weiterer unterstützter Klassen und Elemente zeigt Ihnen die Seite Website: Dokumentation.

Struktur

Das Theme Script ist strukturiert in verschiedene Abschnitte. Header, Footer und Navigation kann direkt angepasst werden.
Zur Reduktion von Requests ist das ganze CSS enthalten. Das CSS trennt User-CSS, Fonts-CSS, Icon-CSS und Default-CSS.

HTML

Das Theme wird allen Inhalt des body-Elements in ein main-Element verschieben. Vor diesem werden Banner und header-Element eingefügt. Nach diesem wird ein footer-Element eingefügt.
Sie kürfen in Ihren Inhalts-Dokumenten ruhig header und footer verwenden (jedoch nicht main), jedoch werden diese als header und footer in Beziehung zum eigentlichen Inhalt verstanden und als solche respektiert.

CSS Tipp

Kopieren Sie Regeln aus dem default-css in den user-css Abschnitt, bevor Sie diese ändern. Dadurch erleichtern Sie wesentlich Updates Ihres Themes.

Spezielles

Das Classic Theme wird Javascript-Funktionen, die Sie über <script data-initfunction="myfunc"> deklarieren, automatisch ausführen.
Ein Debugging-CSS, das grobe Schnitzer im html markiert, kann eingebunden und aktiviert werden.

Script Source

Einbinden setzt voraus, dass die einbindende Seite selbst in einem Ordner parallel zum Ordner js liegt.

<!-- classic.js  wurde als main.js gespeichert -->
<script src="../js/main.js"></script>

Kopieren und speichern Sie die Source.