CSS Architektur

Erstellt: 2025-12-27 | Aktualisiert: 2025-12-31

Übersicht

Das CSS-System basiert auf CSS Custom Properties (Design Tokens) und einer modularen Dateistruktur.

Dateien

Design Tokens

Alle Variablen in :root definiert (designtokens.css).

Farben - Primary

--color-primary: #007bff;
--color-primary-hover: #0056b3;
--color-primary-light: #cce5ff;

Farben - Status

--color-success: #28a745;
--color-success-bg: #d4edda;
--color-success-text: #155724;

--color-warning: #ffc107;
--color-warning-bg: #fff3cd;
--color-warning-text: #856404;

--color-danger: #dc3545;
--color-danger-bg: #f8d7da;
--color-danger-text: #721c24;

--color-info: #17a2b8;
--color-info-bg: #cce5ff;
--color-info-text: #004085;

Farben - Neutral

--color-text: #333;
--color-text-muted: #666;
--color-text-light: #999;
--color-heading: #2c3e50;

--color-bg: #fff;
--color-bg-light: #f8f9fa;
--color-bg-muted: #f5f5f5;
--color-bg-dark: #2c3e50;

--color-border: #e0e0e0;
--color-border-light: #eee;

Spacing

--space-xs: 0.25rem;   /* 4px */
--space-sm: 0.5rem;    /* 8px */
--space-md: 1rem;      /* 16px */
--space-lg: 1.5rem;    /* 24px */
--space-xl: 2rem;      /* 32px */
--space-xxl: 3rem;     /* 48px */

Border Radius

--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-pill: 50px;

Shadows

--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 2px 8px rgba(0,0,0,0.1);
--shadow-lg: 0 4px 12px rgba(0,0,0,0.1);

Typography

--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', Monaco, monospace;

--font-size-xs: 0.75rem;   /* 12px */
--font-size-sm: 0.85rem;   /* 13.6px */
--font-size-md: 1rem;      /* 16px */
--font-size-lg: 1.1rem;    /* 17.6px */
--font-size-xl: 1.5rem;    /* 24px */
--font-size-xxl: 1.75rem;  /* 28px */

--line-height: 1.6;

Transitions

--transition-fast: 0.15s ease;
--transition-normal: 0.2s ease;
--transition-slow: 0.3s ease;

Layout

--max-width: 1200px;
--max-width-narrow: 800px;
--max-width-wide: 1400px;

Responsive Breakpoints

Verwendung

In PHP-Templates

<link rel="stylesheet" href="/css/designtokens.css">
<link rel="stylesheet" href="/css/admin.css">

In CSS

.my-element {
    padding: var(--space-md);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

Verwandte Themen

• Components - UI-Komponenten Referenz
• HTMX - Interaktivität