138 lines
1.9 KiB
Markdown
138 lines
1.9 KiB
Markdown
# CSS_GUIDE.md
|
|
|
|
## Zweck
|
|
Dieses Dokument beschreibt die Nutzung der CSS-Design-Tokens aus `tokens.css`.
|
|
|
|
Ziel ist eine konsistente, wartbare und wiedererkennbare UI, unabhängig vom Framework oder Projekt.
|
|
|
|
---
|
|
|
|
## Grundregeln
|
|
|
|
- Keine Hardcodes für Farben, Schriften oder Abstände
|
|
- Nutzung ausschließlich über CSS-Variablen
|
|
- Tokens sind stabiler als Klassen
|
|
|
|
Regel:
|
|
> Wenn ein Wert nicht aus `:root` kommt, gehört er dort hin.
|
|
|
|
---
|
|
|
|
## Einbindung
|
|
|
|
```html
|
|
<link rel="stylesheet" href="tokens.css" />
|
|
```
|
|
|
|
Frameworks (Beispiele):
|
|
- React / Vue: global importieren
|
|
- NiceGUI / Gradio: über Custom CSS
|
|
|
|
---
|
|
|
|
## Farben verwenden
|
|
|
|
```css
|
|
.header {
|
|
background: var(--color-primary);
|
|
color: var(--color-surface);
|
|
}
|
|
|
|
.link {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.error {
|
|
color: var(--color-error);
|
|
}
|
|
```
|
|
|
|
Regeln:
|
|
- Akzentfarbe nur für Interaktion
|
|
- Error-Farbe ausschließlich für Fehler
|
|
|
|
---
|
|
|
|
## Typografie
|
|
|
|
```css
|
|
h1, h2, h3 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
p {
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
code {
|
|
font-family: var(--font-mono);
|
|
}
|
|
```
|
|
|
|
Keine zusätzliche Schriftdefinition pro Komponente.
|
|
|
|
---
|
|
|
|
## Spacing
|
|
|
|
```css
|
|
.card {
|
|
padding: var(--space-4);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
```
|
|
|
|
Regel:
|
|
- Abstände folgen dem 8-px-Grid
|
|
- keine krummen Werte
|
|
|
|
---
|
|
|
|
## Border & Radius
|
|
|
|
```css
|
|
.panel {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
```
|
|
|
|
Rahmen sind funktional, nicht dekorativ.
|
|
|
|
---
|
|
|
|
## Shadows
|
|
|
|
```css
|
|
.dropdown {
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
```
|
|
|
|
Schatten sparsam einsetzen.
|
|
|
|
---
|
|
|
|
## Erweiterungen
|
|
|
|
- Dark Mode: eigenes Token-Set (`[data-theme="dark"]`)
|
|
- Projekt-spezifische Tokens dürfen ergänzt, aber nicht ersetzt werden
|
|
|
|
---
|
|
|
|
## Anti-Patterns
|
|
|
|
- Inline-Styles mit festen Farben
|
|
- Kopierte Farbwerte aus Design-Tools
|
|
- Magic Numbers
|
|
|
|
Wenn ein UI inkonsistent wirkt, liegt es fast immer an Regelbruch hier.
|
|
|
|
---
|
|
|
|
## Status
|
|
|
|
Version: v1.0 (Baseline)
|
|
|
|
Dieses Dokument ergänzt `DESIGN.md` und ist verbindlich für Web-UIs.
|