coastdigitalgroup/coastai-skills

Dashboard-Layout-System

Zweck

Das Dashboard-Layout-System bietet eine systematische Design-Methodik für viewport-fixierte, mehrteilige Weboberflächen (häufig als Application Shells oder Workspaces bezeichnet). Im Gegensatz zu standardmäßigen dokumentenbasierten Seiten, die unendlich in einem einzigen Scroll-Container nach unten fließen, sperrt eine Dashboard-Shell die Haupt-Viewport-Höhe auf exakt 100vh (oder 100dvh) und unterteilt den Arbeitsbereich in verschiedene funktionale Zonen.

Ein systematischer Ansatz löst häufige räumliche Reibungspunkte – wie „Scroll-in-Scroll“-Blockaden, Viewport-Rubber-Banding, Layout-Verschiebungen während Panel-Einklapp-Übergängen und überlappende Dialog-Fokusfallen. Er überbrückt die Lücke zwischen ästhetischem visuellem Design und technischem CSS-Containment, was zu einem kohärenten, hochfunktionalen und zugänglichen Arbeitsbereich führt.

Anwendungsfälle

• B2B-SaaS-Kernarbeitsbereiche: Webplattformen, die gleichzeitige Ansichten von Seitenleisten, Filtern, Listensteuerelementen und Inhaltsdetail-Panels erfordern.
• Datenanalyse-Dashboards: Hochdichte Multi-Panel-Raster, die Live-Daten, Metriken, Diagramme und Steuerungsseitenleisten in einer einheitlichen Ansicht präsentieren.
• Admin- und Operations-Panels: Schwere betriebliche Software, die feste Aktions-Header und kontextbezogene Detail-Drawer neben umfangreichen Datenrastern benötigt.
• Rich-Content-Editing-Oberflächen: Layouts mit einklappbaren Formatierungs-/Eigenschaften-Drawern, die eine zentrale Leinwand oder einen Rich-Text-Arbeitsbereich flankieren (z. B. CMS-Editoren, E-Mail-Builder und Design-Canvas-Tools).

Wann NICHT zu verwenden

• Marketing- und Landingpages: Wenn lineare, vertikale Scroll-Journeys optimiert für Storytelling und Call-to-Actions erforderlich sind. Verwenden Sie stattdessen hero-design-system und section-composition-system.
• Redaktionelle und Blog-Artikel: Wenn Leser standardmäßiges natives Browser-Scrolling mit einem einzigen linearen Textfluss erwarten. Verwenden Sie article-layout-system und table-of-contents-system.
• E-Commerce-Produktlistenseiten (PLP): Wenn unendliches Scrollen oder standardmäßige paginierte Layouts für kontinuierliches Produkt-Scannen besser geeignet sind.
• Einfache Utility-Tools: Ein-Eingabe-Utilities (z. B. ein einfacher Dateikonverter oder Bildskalierer), die nicht von einem Multi-Panel-Layout-Shell profitieren.

Eingaben

1. Workspace-Pane-Inventar: Liste der räumlichen Regionen, die von der Anwendung benötigt werden (z. B. Seitenleisten-Navigation, Topbar-Arbeitsbereichsaktionen, zentraler Inhaltsarbeitsbereich, rechter Eigenschaften-Drawer).
2. Interaktives Steuerungslayout: Spezifikationen für einklappbare Panels, größenveränderbare Fenster und Auslösebereiche.
3. Typografie- & Abstands-Tokens: Flüssige Typografie und relative Abstandssysteme (fluid-spacing-system und fluid-typography-system), um saubere Ausrichtungsraster zu erstellen.
4. Ziel-Breakpoints: Gerätelayout-Definitionen aus dem responsive-grid-system, um Panel-Faltung, Rail-Einklappung und mobile Drawer-Übergänge zu bestimmen.

Ausgaben

1. Viewport-Containment-Blaupause: HTML- und CSS-Grid/Flexbox-Raumspezifikationen, die die übergeordneten Dimensionen auf 100dvh sperren und das Scrollen auf bestimmte Untercontainer isolieren.
2. Pane-Kompositionsspezifikation: Visuelle Definition, Breitenbeschränkungen und Randlinien, die Navigation, Utility-Header und Arbeitsbereiche unterteilen.
3. Übergangs- & Bewegungsmodell: Hardwarebeschleunigte CSS-Animation-Richtlinien (transform, opacity) für reibungslose, verschiebungsfreie Übergänge einklappbarer Panels.
4. Responsive Faltungsregeln: Spezifikationen, die die Layout-Anpassung über Desktop-, Tablet- und Mobile-Viewport-Grenzen hinweg detaillieren.
5. Barrierefreiheits-Landmarken-Karte: Definierte ARIA-Rollenbereiche und Parameter für die Tastaturnavigation.

Arbeitsablauf

1. Viewport-Sperrung und Scroll-Containment einrichten

Sperren Sie den Hauptbrowser-Viewport, um gesamtes Seiten-Scrolling und Rubber-Banding zu verhindern. Alle Layout-Komponenten müssen in diesen starren Viewport-Container passen, und das Scrollen muss streng auf isolierte Inhaltsfenster delegiert werden:

• Setzen Sie den übergeordneten Container (z. B. .app-shell) auf width: 100vw und height: 100dvh (dynamische Viewport-Höhe) mit overflow: hidden.
• Teilen Sie die .app-shell mit einem 2-stufigen Layout-Raster:
  • Stufe 1 (Äußeres Raster): Trennt die linke Seitenleiste vom rechten Inhaltsarbeitsbereich.
  • Stufe 2 (Inneres Raster): Trennt die obere Leiste/den Header des Arbeitsbereichs von der scrollbaren Inhaltsfläche.
• Für scrollbare Fenster wenden Sie overflow-y: auto und -webkit-overflow-scrolling: touch an, um ein sanftes Trägheitsscrolling auf mobilem Safari zu gewährleisten.

2. Visuelle Anker und Ränder der Fenster definieren

Verwenden Sie klare visuelle Grenzen, um hochdichte Dashboards zu organisieren, ohne visuelles Rauschen hinzuzufügen:

• Randtrennung: Vermeiden Sie starke Schattenhöhen zwischen dauerhaft benachbarten Panels. Verwenden Sie stattdessen saubere, kontrastarme 1px-Randtrenner (z. B. 1px solid var(--border-neutral-muted)), um Abschnitte zu unterteilen.
• Hintergrundkontrast: Verwenden Sie subtile Hintergrundfarbunterschiede, um die Navigation vom aktiven Inhalt zu unterscheiden. Setzen Sie die Navigationsseitenleiste auf einen etwas dunkleren oder helleren Farbton (z. B. einen neutralen Farbton), während der Hauptinhaltsarbeitsbereich eine saubere weiße Leinwand oder eine tiefdunkle Oberfläche verwendet.
• Scroll-Schatten: Implementieren Sie bei scrollbaren Inhaltsbereichen subtile lineare Gradienten-Überlagerungen an den oberen und unteren Randgrenzen, um dem Benutzer visuell zu signalisieren, dass sich mehr Inhalt jenseits des Falzes befindet.

3. Mechanik einklappbarer Panels entwerfen

Einklappbare Panels (wie Seitenleisten oder rechte Detail-Drawer) müssen Zustandsänderungen reibungslos durchführen, ohne Cumulative Layout Shift (CLS) oder visuelle Ruckler zu verursachen:

• Breiten-Übergänge vermeiden: Das Animieren von CSS width zwingt den Browser, bei jedem Frame die Layouts aller untergeordneten Elemente neu zu berechnen, was zu niedrigen Bildraten führt.
• Transforms bevorzugen: Positionieren Sie Seiten-Drawer absolut oder außerhalb der Leinwandgrenzen und animieren Sie ihre Sichtbarkeit mit CSS transform: translateX() in Kombination mit hardwarebeschleunigten Übergängen.
• Inhaltsmaskierung: Verwenden Sie overflow: hidden auf umschließenden Wrapper-Blöcken, damit gleitende Panels sauber hinter benachbarten Ansichten verschwinden.

4. Barrierefreiheits-Landmarken codieren und übergeben

Dashboard-Layout-Vorlagen müssen eine strukturierte semantische Landmarken-Hierarchie für Screenreader und Tastaturbenutzer liefern:

• Landmarken-Zuweisung: Stellen Sie sicher, dass jedes Fenster einem geeigneten HTML5-semantischen Tag zugeordnet ist:
  • Globale Navigationsseitenleiste: <nav aria-label="Hauptnavigation">
  • Arbeitsbereichs-Oberleiste / Header: <header>
  • Zentraler Arbeitsbereich: <main>
  • Eigenschaften / Kontext-Drawer: <aside aria-label="Eigenschaften und Metadaten">
• Fokusverwaltung: Wenn ein einklappbares Panel geschlossen wird, verschieben Sie den Fokus programmatisch auf die Schaltfläche, die es geschlossen hat. Wenn ein mobiler Drawer geöffnet ist, fangen Sie den Tastatur-Tab-Fokus innerhalb dieses Panels ein.
• Inert-Attribut: Schalten Sie das inert-HTML-Attribut auf dem zentralen Hauptpanel um, wenn ein modales Panel oder ein mobiler Seiten-Drawer aktiv ist, um zu verhindern, dass Tastaturbenutzer versehentlich aus der sichtbaren Bildschirmüberlagerung heraus tabben.

5. Responsive Anpassungen planen (Faltungsregeln)

Skalieren Sie den Dashboard-Arbeitsbereich anmutig über verschiedene Geräte hinweg:

• Desktop-Bereich (>1200px): Multi-Panel-Layout vollständig erweitert. Linke Navigationsseitenleiste fixiert, Arbeitsbereichs-Header fixiert, zentrale Leinwand scrollt automatisch, rechter Eigenschaften-Drawer erweitert.
• Tablet-Bereich (768px-1200px): Klappen Sie die linke Navigationsseitenleiste in eine kompakte „Schiene“ (nur Symbole). Wandeln Sie den rechten Eigenschaften-Drawer von einer persistenten Rasterspalte in ein Overlay-Blatt um, das über eine Aktionsschaltfläche ausgelöst wird.
• Mobile-Bereich (<768px): Verstecken Sie sowohl die Seitenleiste als auch den Eigenschaften-Drawer vollständig hinter Overlay-Drawern. Das primäre Layout vereinfacht sich zu einer einspaltigen Ansicht, bestehend aus einem mobilen Topbar-Header mit einem Hamburger-Menü-Trigger, einer Aktionsschaltfläche und dem isolierten scrollbaren Inhaltsarbeitsbereich.

Entscheidungsregeln

Raster vs. Flexbox für die Shell-Struktur

Aspekt	CSS-Raster verwenden	CSS-Flexbox verwenden
Primäre Achse	Zweidimensional (sowohl Zeilen als auch Spalten sind dynamisch/starr).	Eindimensional (lineare Zeilenstapel oder Spaltenstapel).
Layout-Zweck	Strukturierung des äußeren Rahmens (Seitenleistenspalte + Hauptinhalts Spalte).	Ausrichtung des inneren Header-Inhalts (Logo links + Aktionen rechts).
Panel-Einklappung	Wenn Seitenleistenspalten dynamisch auf exakt 0 Breite kollabieren.	Wenn Kinder natürlich wachsen, schrumpfen und umbrechen sollen.

Scroll-Management: Globales Scrollen vs. Fensterspezifisches Scrollen

• Globales Seiten-Scrollen (NICHT in Dashboards verwenden): Führt dazu, dass der gesamte Header, die Seitenleiste und der Dashboard-Rahmen aus dem Bildschirm scrollen und der Benutzer zurück scrollen muss, um auf die Navigation zuzugreifen.
• Isoliertes Fenster-Scrollen (Standard-Dashboard-Muster): Hält den äußeren Rahmen (Header, Schienen, Aktionen) perfekt an den Bildschirmrändern verankert, während nur die Datentabelle, der Diagramm-Feed oder der Dokumenteneditor unabhängig innerhalb ihrer Viewport-Zellen scrollen.

Einschränkungen

• Dynamische Viewport-Höhe: Verwenden Sie immer dvh-Einheiten (100dvh) anstelle von vh (100vh) für den äußeren übergeordneten Container. In mobilen Browsern berücksichtigt die standardmäßige vh-Einheit nicht das Aus-/Einklappen der Browser-Chrome (Adressleisten, Navigationssteuerelemente), was dazu führt, dass der untere Teil des Dashboards abgeschnitten und unerreichbar ist.
• Fokus-Indikatoren: Stellen Sie sicher, dass Fokusringe auf interaktiven Panel-Triggern gut sichtbar sind. Sie müssen den WCAG 2.2-Kontrastregeln entsprechen und dürfen niemals durch overflow: hidden-Container-Ränder abgeschnitten werden.
• Keine doppelten Scrollbalken: Stellen Sie sicher, dass Container-Ränder, Innenabstände und Höhenbegrenzungen exakt berechnet werden (mithilfe von CSS calc() oder Flex/Grid-Auto-Einschränkungen), sodass ein scrollbares Fenster niemals verschachtelte doppelte Scrollbalken nebeneinander auslöst.
• Mindestgrößen für Touch-Ziele: Handler für größenveränderbare Panels, Seitenerweiterungsschaltflächen und Tab-Umschalter müssen eine Touch-Zielgröße von mindestens 24x24px (WCAG 2.2 SC 2.5.8) bieten, 44x44px werden bevorzugt.

Häufige Fehlermuster

• Die Adressleisten-Abschneidung (Mobil): Verwendung von 100vh auf mobilen Geräten, wodurch die Fußzeile des Benutzerprofils oder primäre Submit-Schaltflächen am unteren Rand der Seitenleiste hinter den mobilen Browser-Aktionsleisten verborgen werden.
• Das Layout-Zucken: Animieren der width-Eigenschaft auf einem Navigationsmenü, wodurch Karten, Diagramme und Raster im Hauptarbeitsbereich während des Einklappübergangs schnell springen und neu rendern.
• Die Scroll-Falle / Scroll-Leck: Fehler beim Isolieren von Scroll-Ereignissen innerhalb eines geöffneten Overlay-Fensters, wodurch der Hintergrundinhalt darunter scrollt, wenn der Benutzer auf einem mobilen Navigations-Drawer wischt.
• Unbeschriftete Scroll-Container: Hinzufügen von overflow: auto zu einem Seitencontainer ohne begleitende Rolle oder Tastaturfokus-Pfad, was verhindert, dass reine Tastaturbenutzer die Daten in diesem Container scrollen können.
• Doppeltes Scrollbalken-Chaos: Erstellen verschachtelter Wrapper ohne strenge Höhenbegrenzungen, was dazu führt, dass sowohl das Hauptbrowserfenster als auch der innere Container doppelte Scrollbalken anzeigen, was die Navigation verwirrt.

Validierungskriterien

• Die Höhe des äußeren Layout-Containers ist auf 100dvh (oder Fallback 100vh) gesperrt, mit overflow des Hauptdokuments auf hidden gesetzt.
• Keine doppelten Scrollbalken sind sichtbar, wenn mit scrollbaren Datenlisten oder Arbeitsbereichen interagiert wird.
• Responsive Zustände sind für Desktop-, Tablet- und Mobile-Bereiche mit entsprechenden Drawer- und Schienen-Transformationen definiert.
• Gleitende Panels und Seitenleisten werden mit hardwarebeschleunigten CSS-Eigenschaften (transform: translateX()) animiert.
• Der Arbeitsbereich verwendet geeignete semantische HTML5-Landmarken (<nav>, <header>, <main>, <aside>).
• Wenn ein Overlay-Drawer oder -Panel auf mobilen Geräten geöffnet ist, werden Hintergrundelemente auf inert gesetzt oder aus dem Tastaturfokusfluss ausgeblendet.
• Touch-Ziele auf Panel-Triggern, Umschaltern und Handles erfüllen die Mindestgrößenanforderung von 24x24px (44px bevorzugt).
• Inaktive Hintergrundfenster-Elemente scrollen nicht, wenn innerhalb aktiver Overlay-Blätter der obersten Ebene gewischt/gescrollt wird (Scroll-Leck-Prävention).