Überblick
Diese Seite ist eine Testfläche für das Inhaltsverzeichnis. Sie enthält bewusst viele Überschriften auf zwei Ebenen, damit sich Scroll-Spy, Einrückung und die gebogenen Verbinder der Rail unter realistischen Bedingungen beurteilen lassen.
Der Text hat keinen fachlichen Anspruch. Entscheidend ist nur, dass jeder Abschnitt lang genug ist, um beim Scrollen einzeln in den oberen Bereich des Viewports zu geraten.
Voraussetzungen
Für den Aufbau werden ein aktueller Etch-Build und eine eingerichtete Automatic-CSS-Installation vorausgesetzt. Beide liefern die Tokens, aus denen sich Abstände, Farben und Rasterbreiten ableiten.
Ohne diese Grundlage greifen die verwendeten Variablen ins Leere und lösen sich stillschweigend zu nichts auf — ein Fehlerbild, das im Browser schwer zu erkennen ist.
Installation
Die Einrichtung verläuft in drei Schritten, die aufeinander aufbauen. Jeder Schritt lässt sich einzeln überprüfen, bevor der nächste begonnen wird.
WordPress vorbereiten
Zunächst wird eine leere Installation aufgesetzt und auf einen aktuellen Stand gebracht. Themes und Plugins, die eigenes CSS einschleusen, bleiben zunächst deaktiviert, damit die spätere Fehlersuche überschaubar bleibt.
Etch aktivieren
Nach der Aktivierung steht der Builder unter der bekannten Abfrage im Adressfeld bereit. Die Oberfläche lädt den aktuellen Beitrag und stellt Struktur, Stile und Komponenten in getrennten Panels dar.
Automatic CSS einrichten
Im Dashboard werden Farbfamilien, Abstandsskala und Rasterbreiten festgelegt. Diese Werte erzeugen die Variablen, auf die sich später jede geschriebene Regel bezieht — sie sind die einzige Stelle, an der Farben definiert werden.
Die Grundlagen
Der Aufbau folgt einem einfachen Grundsatz: erst die Bedeutung des Inhalts festlegen, dann die Darstellung. Wer umgekehrt vorgeht, landet regelmäßig bei Markup, das sich nicht wiederverwenden lässt.
Blöcke und Elemente
Jeder sichtbare Knoten ist ein Block mit einem HTML-Tag. Die Wahl des Tags ist keine Formalie, sondern bestimmt, wie Screenreader und Suchmaschinen die Seite lesen.
Klassen statt Inline-Styles
Gestaltung gehört in benannte Klassen, nicht an den einzelnen Knoten. Nur so lässt sich eine Änderung an einer Stelle vornehmen und wirkt überall dort, wo das Muster eingesetzt wird.
Styling mit Automatic CSS
Die Gestaltung greift durchgängig auf Tokens zu. Ein fest eingetragener Wert ist immer ein Rückschritt, weil er sich der zentralen Steuerung entzieht.
Farben und Tokens
Farben werden nie direkt notiert, sondern über Variablen bezogen. Wo eine Mischung nötig ist, entsteht sie aus vorhandenen Tokens statt aus einem neuen Festwert.
Abstände
Abstände zwischen Geschwistern entstehen über den Zwischenraum eines Flex- oder Grid-Containers. Abstände am Abschnittsende kommen aus dem Innenabstand des umgebenden Elements.
Raster und Layout
Für mehr als zwei gleichwertige Spalten bietet sich ein selbstresponsives Raster an. Es bricht nach verfügbarer Breite um und kommt ohne eigene Umbruchpunkte aus.
Komponenten bauen
Sobald eine Struktur mehrfach vorkommt, lohnt sich eine Komponente. Sie bündelt Markup, Stil und Verhalten an einer Stelle und macht spätere Änderungen billig.
Props definieren
Jeder veränderliche Textbaustein wird zu einer Eigenschaft. Wo eine spezialisierte Auswahl existiert, wird sie genutzt, damit im Panel eine echte Auswahl statt eines freien Feldes erscheint.
Wiederverwendung
Zwei sich überschneidende Komponenten sind schlechter als eine unvollkommene. Vor jeder Neuanlage lohnt der Blick in den Bestand — fast immer gibt es bereits etwas Passendes.
Responsives Verhalten
Der Ausgangszustand ist die schmale Ansicht. Zusätzliche Spalten werden erst in einer Abfrage für größere Breiten erklärt, nicht umgekehrt.
Dadurch bleibt der Grundfall knapp und es entsteht keine Regel, die eine andere wieder zurücknehmen muss.
Barrierefreiheit prüfen
Ein Inhaltsverzeichnis ist ein Navigationselement. Es braucht eine erkennbare Beschriftung, eine sinnvolle Reihenfolge und einen sichtbaren Fokus.
Tastaturbedienung
Alle Einträge müssen sich mit der Tabulatortaste erreichen lassen, und der aktive Eintrag muss sich auch ohne Farbe erkennen lassen. Der Fokusring darf nicht entfernt werden.
Kontraste
Gedämpfte Beschriftungen sind zulässig, solange der Kontrast ausreicht. Wo eine Farbe allein die Bedeutung trägt, braucht es ein zweites Merkmal.
Veröffentlichen
Vor dem Livegang wird die Seite ohne Builder aufgerufen und im echten Frontend geprüft. Erst dort zeigt sich, ob Skripte laufen und Stile vollständig ausgeliefert werden.
Ein letzter Durchgang mit verkleinertem Fenster deckt Umbrüche auf, die im Builder nicht auffallen.