Mesh-System und Modularität

1) Warum das Netz

• beschleunigt Design und Entwicklung (gemeinsame Sprache: „12 Spalten, gutter 24“),
• reduziert die kognitive Belastung (gleichmäßiger Rhythmus, stabile Linien),
• verbessert die Übertragbarkeit von Komponenten zwischen Seiten,
• ermöglicht den Aufbau einer modularen Bibliothek ohne „Mikropapier“.

2) Grundnetzelemente

Container - maximale Breite des Inhalts, zentrierter Bereich.
Spalten - vertikale Bereiche für die Platzierung von Modulen.
Gutter ist der horizontale Abstand zwischen den Spalten.
Margin - die äußeren Felder links/rechts vom Container.
Row/Track ist eine horizontale Führung (im CSS Grid sind es Zeilen/Tracks).
Baseline ist das vertikale Raster der Typografie.

Empfohlener vertikaler Rhythmus: 8-pt (manchmal 4-pt für Nuancen), Maßeinheiten und Einzüge sind ein Vielfaches von 4/8.

3) Breakpoints und Container

• Der Container ist rasterförmig (fix. max-width) auf großen Bildschirmen, fluid auf mobilen.
• Gutter kann reibungslos zu großen Breakpoints wachsen.
• Die Spalten sind 4/6/8/12 als „Hauptset“.

4) Modularität und Dichten

Das Modul ist ein Inhaltsblock, der 1..N Spalten und Vielfache der Baseline-Höhe einnimmt.

• Komfort (Dashboards, Lesen): größere Schriftarten, Einrückungen 16-24.
• Compact (Tabellen, Pro-Modus): Schriftarten + 0/ − 1 px, vertikale Einzüge − 4/ − 8, Zeilenhöhen sind festgelegt (ein Vielfaches von 8).

Die Komponenten müssen über zwei Mindestdichtevoreinstellungen verfügen.

5) Typografie und Baseline-Mesh

Wählen Sie die Basislinienhöhe (z. B. 24 px) und synchronisieren Sie die Elementhöhen (40/48/56 px-Tasten sind Vielfache der Baseline).
Überschriften verankern vertikale Rhythmen: Einrückungen über/unter Vielfachen von 8.
Richten Sie die Symbole an der Höhe des Textes aus.

6) Layoutmuster

6. 1 Karten (Cards)

Mesh: Mosaik (fix. Kartenbreite) oder Säulenbreite (Karte = N Spalten).
Minimale Inhaltshöhen, um „Sprünge“ beim Herunterladen zu vermeiden; Skelett innerhalb der Karte.
Internes Padding: 16/20/24 je nach Breakpoint.

6. 2 Tabellen

Container für die gesamte Breite; Wir frieren die erste Spalte/Kappe beim horizontalen Scrollen ein.
Zellen - baseline-multiple; Zahlenspalten werden nach Stellen/Dezimalstellen ausgerichtet.
Bei XS gibt es „Kartenzeilen“ (Stacked Layout) anstelle des horizontalen Scrolls, wenn es zu viele Spalten gibt.

6. 3 Formulare

Einsäulig auf XS/SM, zwei- oder dreisäulig auf MD + (unter Berücksichtigung der Logik der Tabs/Abschnitte).
Das Feld + Label + Helptext wird in einem gemeinsamen Modul gestapelt (die Höhen sind Vielfache von 8).

6. 4 Dashboards

Grid mit festen Tracks und Wolken (Areas) für Stabilität.
Widgets haben minimale und maximale Breite in Spalten; Die Höhe ist ein Vielfaches der Baseline.
Beim Recycling - ändert sich die Anzahl der Spalten, wir brechen die Widgets nicht willkürlich.

7) Anpassungsfähigkeit, Auto-Layout und Verhalten

Inhalt vor dem Raster: Das Raster passt sich dem Inhalt an, anstatt ihn zu brechen.

• Verwenden Sie constraints (links/rechts/Mitte) und Auto-Layout für Karten/Listen.
• Unterstützung von Komponentenvarianten für XS/SM/MD/LG (Paddings, Slot-Reihenfolge ändern sich).

• Auf der Ebene der Abschnitte - CSS Grid (Bereiche, Spalten, Zeilen).
• Innerhalb der Komponenten - Flex (Achsen, Lückenausgleich).

8) CSS Grid/Flex - Workshop

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) Einzüge und Token

Erfassen Sie die Skalen im Designsystem.

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• Die internen Einrückungen der Komponenten sind von 'space'.
• Die Außenfelder der Container sind von 'gutter '/' margin'.
• Die Höhe der Elemente ist ein Vielfaches von 8 (40/48/56).

10) Modulare Komponenten

• wissen, wie viele Spalten er auf jedem Breakpoint belegt;
• Mindest-/Höchstmaße haben;
• nicht von „magischen“ Pixeln abhängen - nur Token;
• Halten Sie das interne Raster (Titel, Inhalt, Fußzeile) auf der Baseline.

11) Bilder und Medienproportionen

Fix aspect-ratio (z.B. 16/9, 4/3, 1/1) für Previews und Karten.

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

Verwenden Sie auf XS Full-Bleed (Bild an den Rändern) nur für Promo, der Rest des Inhalts folgt dem Container.
Der Text im Bild ist nur auf Plaques/Overlays, der Kontrast ≥ AA.

12) RTL und Lokalisierung

Die Grid-Richtung wird gespiegelt: 'dir =' rtl''und': dir (rtl) '-Regel für Einrückungen/Icons.
Reihenfolge der Spalten und „klebrige“ Bereiche (frozen columns) in Tabellen - berücksichtigen Sie die Spiegelung.
Die Länge der Zeilen und die Übertragungen können die Höhen der Module ändern - legen Sie einen Vorrat.

13) Besonderheiten von iGaming

Werbeflächen und Banner: separater Grill mit großen Modulen; Text immer auf dem Stempel, AAA-Kontrast für verantwortungsvolle Benachrichtigungen (18 +, Limits, Risiken).
Spitzenreiter/Ranglisten: Tabellen mit fester erster Spalte und Sticky-Cap, Zahlen tabellarisch (tabular-nums), Zeilenhöhen Vielfache von 8.
Spieler/Operations Dashboards: Widgets (Sessions, Einzahlungen, RTP, Netto-Einzahlungen) belegen 3-6 Spalten auf dem 12-Grid; Wiederaufbau kaskadiert auf MD/SM.
Turnierkarten: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA an einem festen Ort.

14) Zugänglichkeit und Fokus

Fokusringe sollten den Rhythmus nicht brechen: Fügen Sie ein Outline-Offset oder ein internes Pseudo-Element hinzu.

Minimale Klickgröße: 44 × 44 (mobil) / 32 × 32 (Desktop)

Codieren Sie die Bedeutung nicht nur durch Platzierung; Speichern Sie Textbeschriftungen und aria-Attribute.

15) Produktivität

Reduzieren Sie die Tiefe der Verschachtelung von Grids: 1 Hauptgrid der Sektion + Flexes im Inneren.
Vermeiden Sie schwere Schatten/Masken auf Hunderten von Karten; Verwenden Sie „flache“ Stile in Listen.
Träges Herunterladen von Medieninhalten; feste Proportionen verhindern CLS.

16) Antipatterns

„Raster nach Geschmack“ auf jeder Seite → zerbröckelt die Konsistenz.
Gutter wechselt abschnittsweise beliebig.
Inkonsistente Dichten (in einem Bildschirm und „kompakt“ und „Komfort“).
Komponenten abhängig von magischen Breiten (keine Spalten/Token).
Tabellen mit horizontalem Scrolling auf Mobile ohne alternatives Layout.
Text im Bild ohne Druckknöpfe und Kontraststeuerung.

17) QS-Checkliste

Struktur

• Spalten/Container/Margins entsprechen Breakpoints.
• Gutter ist innerhalb der Seite stabil.
• Höhen und Einzüge sind Vielfache von 8.

Komponenten

• Die Säulenbreiten (XS.. XL) und min/max sind definiert.
• Die inneren Gitter sind mit der baseline abgestimmt.

Tabellen/Formulare

• Sticky-cap/erste Spalte; Stacked-Modus auf XS.
• Formularfelder sind Vielfache von baseline; label/help text nicht „springen“.

A11y

• Fokusstile brechen den Rhythmus nicht; Klickzonen ≥ minimal.

Performance

• Keine CLS aufgrund von Medienblöcken; Fauler Download aktiviert.

18) Token und Dokumentation im Designsystem

• die Werte' container', 'columns', 'gutter', 'space', baseline;
• Beispiele für Layouts (Karten/Tabellen/Formulare/Dashboards);
• Dichtevoreinstellungen (Comfort/Compact) und ihre Auswirkungen auf die Komponenten;
• Code-Snippets für CSS Grid/Flex und Figma-Stile/Leyouts.

Kurze Zusammenfassung

Mesh ist der Vertrag zwischen Design und Entwicklung. Fixieren Sie Breakpoints, Container, Lautsprecher und 8-pt-Rhythmus, gestalten Sie Token und Layoutmuster, sorgen Sie für Dichteoptionen, Anpassungsfähigkeit und Zugänglichkeit. Dann werden die Seiten vorhersehbar skaliert, die Komponenten wiederverwendet und das Team schneller und stabiler.