Fluid Spacing System

Was macht Fluid Spacing System?

Zweck

Der Skill "Fluid Spacing System" bietet eine Methodik zur Erstellung einer responsiven Skala von Weißräumen (Margins, Paddings, Gaps), die sich nahtlos an die Viewport-Größe des Nutzers anpasst. Durch die Verwendung der CSS clamp()-Funktion skalieren Abstände linear zwischen definierten Minimum- und Maximumwerten, wodurch visuelle Harmonie und konsistente Proportionen ohne übermäßige Media Queries gewährleistet werden.

Anwendungsfälle

• Einführung einer grundlegenden Abstandsskala für ein neues Designsystem.
• Modernisierung einer Website zur Verbesserung der visuellen Konsistenz auf Mobilgeräten, Tablets und Desktops.
• Gestaltung hochwertiger Layouts, bei denen Weißraum auf großen Bildschirmen atmen und auf kleinen kompakt bleiben soll.
• Ersetzung von festen pixelbasierten Abständen durch ein flexibles, implementierungsbewusstes System.

Wann NICHT verwenden

• Einfache, nicht-responsive Seiten: Wenn das Layout extrem einfach ist oder keine responsiven Anforderungen hat.
• Streng festgelegte Layouts: Wenn die Designspezifikationen exakte, nicht verhandelbare Pixelwerte für jede Auflösung vorschreiben.
• Unterstützung älterer Browser: Wenn die Zielgruppe hauptsächlich Browser verwendet, die CSS clamp() nicht unterstützen (z. B. Internet Explorer).

Eingaben

Um ein fließendes Abstandssystem zu generieren, benötigst du:

1. Viewport-Bereich:
   • min-width: Die Bildschirmbreite, bei der die Skalierung beginnt (z. B. 320px).
   • max-width: Die Bildschirmbreite, bei der die Skalierung endet (z. B. 1280px).
2. Basisabstandseinheit:
   • min-size: Die Basiseinheit (z. B. 16px) bei min-width.
   • max-size: Die Basiseinheit (z. B. 20px) bei max-width.
3. Skalierungsverhältnis:
   • Ein Multiplikator, der die Schritte in der Skala bestimmt (z. B. 1,25 für eine große Terz-Skala oder eine lineare 2x/3x/4x-Progression).

Ausgaben

1. Fließende Abstandsskala: Ein Satz von CSS-Variablen, die Werte von "tiny" bis "huge" mit Hilfe von clamp() definieren.
2. Semantische Zuordnung: Richtlinien zur Anwendung dieser Tokens (z. B. --space-m für Komponenten-Padding, --space-xl für Abschnitts-Margins).
3. Nutzungsdokumentation: Regeln zur Kombination von Einheiten, um vertikalen Rhythmus und horizontale Ausrichtung beizubehalten.

Workflow

1. Definiere die Skalenparameter

Lege die Grenzen deines fließenden Systems basierend auf den Zielgeräten des Projekts fest. Beispiel: 320px (Mobil) bis 1440px (Desktop), mit einer Basiseinheit, die von 16px auf 24px skaliert.

2. Wähle ein Abstandsverhältnis

Entscheide, wie die Abstandsschritte wachsen sollen.

• Linear/Multiplikativ: Schritte sind Vielfache der Basiseinheit (z. B. 0,5x, 1x, 1,5x, 2x, 4x, 8x). Am besten für vorhersagbare Ausrichtung.
• Geometrische Skala: Jeder Schritt ist der vorherige Schritt multipliziert mit einem Verhältnis (z. B. 1,25). Am besten für kontrastreiche, künstlerische Layouts.

3. Berechne die Skalenschritte

Erstelle eine Reihe von Größen. Eine typische Skala umfasst:

• 3XS bis XS: Für winzige Details, enge Listen und interne Button-Paddings.
• S bis M: Für standardmäßige Komponentenabstände und Rinnen.
• L bis 3XL: Für Abschnittsmargins, Hero-Abstände und große Layout-Lücken.

4. Generiere CSS clamp()-Formeln

Konvertiere Pixelwerte in fließende Formeln. clamp(min_rem, intercept_rem + slope_vw, max_rem)

Steigungsberechnung: (max_px - min_px) / (max_viewport - min_viewport) * 100

5. Weise semantische Rollen zu

Ordne die abstrakte Skala funktionalen Rollen zu, um Konsistenz im Team zu gewährleisten.

• space-component: --space-s
• space-layout-gutter: --space-m
• space-section: --space-xl

Entscheidungsregeln

• Das 8-Punkt-Raster-Prinzip: Stelle nach Möglichkeit sicher, dass deine Min- und Max-Werte Vielfache von 4 oder 8 sind, um mit standardmäßigen UI-Mustern übereinzustimmen.
• Näheprinzip: Elemente, die verwandt sind, sollten weniger Abstand zwischen sich haben als Elemente, die nicht verwandt sind.
• Mobile Kompression: Halte kleinere Abstandseinheiten (3XS-S) relativ stabil; nur größere Einheiten (L-3XL) sollten aggressiv skalieren, um zu verhindern, dass mobile Layouts „explodiert“ wirken.
• Barrierefreiheit: Stelle sicher, dass interaktive Elemente selbst bei der kleinsten Skala eine ausreichend große Trefferfläche haben (mindestens 24x24px gemäß WCAG 2.2 SC 2.5.8, einschließlich Padding; für primäre Aktionen werden 44x44px bevorzugt).
• Container-relativer Abstand: Verwende für Abstände, die auf den Container einer Komponente und nicht auf den Viewport reagieren sollen (z. B. eine Karte, die in einer schmalen Seitenleiste oder einer breiten Hauptspalte sitzen kann), Container-Abfrage-Längeneinheiten (cqi/cqw) innerhalb der clamp()-Formel anstelle von vw.

Einschränkungen

• Responsivität: Abstände sollten niemals horizontalen Überlauf verursachen.
• Konsistenz: Sobald eine Skala definiert ist, sollten keine "einmaligen" Pixelwerte verwendet werden.
• Hierarchie: Größere Abstände sollten immer verwendet werden, um größere Inhaltsblöcke (z. B. Abschnitte) zu trennen, während kleinere Abstände für interne Komponentendetails verwendet werden.
• Umfang: Dieser Skill deckt nur Abstandswerte ab – er erstellt kein Layout-Raster (verwende responsive-grid-system), definiert keine Typografiegrößen (verwende fluid-typography-system) oder verwaltet z-Index/Ebenen.

Häufige Fehlermuster

• Alles gleichmäßig skalieren: Zu starkes Skalieren kleiner Paddings (wie 4px) kann Komponenten auf dem Desktop verzerrt aussehen lassen.
• Layout-Rinnen ignorieren: Fließende Komponentenabstände, aber feste Rasterrinnen, was zu Ausrichtungsdrift führt.
• Überwältigende Skala: 20 oder mehr verschiedene Abstandsschritte machen das System schwer zu nutzen und zu warten. Strebe 7-9 Schritte an.
• Keine logischen Schritte: Verwendung willkürlicher Zahlen anstelle einer konsistenten Skala oder eines Verhältnisses.

Validierungskriterien

• Abstände skalieren fließend, wenn der Viewport geändert wird.
• Der vertikale Rhythmus bleibt auf allen wesentlichen Breakpoints erhalten.
• Es werden keine "einmaligen" Pixelwerte in der Implementierung verwendet; alle Abstände nutzen die definierten Variablen.
• Das System verwendet rem-Einheiten für die minimalen und maximalen Grenzen der clamp()-Funktion.
• Nähe und Hierarchie werden durch die Abstandswahl verstärkt.
• Interaktive Elemente behalten eine Trefferfläche von mindestens 24x24px (WCAG 2.2 SC 2.5.8) an jedem Punkt der fließenden Skala, einschließlich des kleinsten Viewports.