124 lines
6.8 KiB
Markdown
124 lines
6.8 KiB
Markdown
# Repo Map — CSS-Framework
|
||
|
||
```
|
||
css-framework/
|
||
│
|
||
├── .opencode/ — KI-Guidance für OpenCode
|
||
│ ├── commands/
|
||
│ │ ├── create-component.md — Checkliste: neue Komponente von CSS bis Doku
|
||
│ │ ├── add-token.md — Checkliste: neuen Design-Token einführen
|
||
│ │ └── sync-docs.md — Checkliste: Code-Doku-Drift beheben
|
||
│ └── skills/
|
||
│ ├── SKILL.md — Schnellreferenz (Komponenten, Tokens, JS-API, Muster)
|
||
│ └── references/
|
||
│ ├── components.md — Vollständige Komponenten-Dokumentation mit Beispielen
|
||
│ ├── tokens.md — Alle CSS Custom Properties mit Werten und Verwendung
|
||
│ └── jinja2.md — Basis-Template, HTMX-Muster und FastAPI-Patterns für Consumer-Apps
|
||
│
|
||
├── AGENTS.md — Verbindliche Arbeitsregeln für KI-Agenten
|
||
├── README.md — Nutzerdokumentation (vollständig, für Menschen)
|
||
├── REPO_MAP.md — Diese Datei
|
||
├── CHANGELOG.md — Versionshistorie
|
||
│
|
||
├── docs/
|
||
│ └── VERGLEICH.md — Vergleich mit Bootstrap und Tailwind
|
||
│
|
||
├── main.css — Entry Point, importiert alle vier Layer
|
||
├── tokens.css — Design Tokens (Single Source of Truth)
|
||
├── base.css — Classless Reset + semantische HTML-Elemente
|
||
├── components.css — Opt-in Komponenten-Klassen
|
||
├── utilities.css — Minimale Helfer-Klassen
|
||
├── fonts.css — Vorlage für lokale Google Fonts (optional)
|
||
├── framework.js — JavaScript API (data-action, Modal, Toast, Tabs, Dropdown usw.)
|
||
├── theme.js — Hell/Dunkel vor dem Rendern setzen und umschalten
|
||
├── demo.css — Styles nur für index.html (nicht Teil des Frameworks)
|
||
├── demo.js — Skripte nur für index.html (nicht Teil des Frameworks)
|
||
├── build.py — Minifier: erzeugt dist/ via python3 build.py
|
||
│
|
||
├── dist/ — Build-Ausgabe (generiert, nicht editieren)
|
||
│ ├── main.min.css — Alle vier CSS-Layer gebündelt und minifiziert
|
||
│ ├── framework.min.js — JavaScript API minifiziert
|
||
│ └── index.html — Demo mit minifizierten Pfaden (Sichtprüfung)
|
||
│
|
||
└── index.html — Vollständige Komponentendemo (Entwicklung + Sichtprüfung)
|
||
```
|
||
|
||
---
|
||
|
||
## CSS-Schichtenarchitektur
|
||
|
||
```
|
||
tokens.css → base.css → components.css → utilities.css
|
||
↑ ↑
|
||
Single Source Höchste Spezifität
|
||
of Truth (überschreibt alles)
|
||
```
|
||
|
||
Entspricht der Import-Reihenfolge in `main.css`. Änderungen immer in der **niedrigsten sinnvollen Schicht**.
|
||
|
||
---
|
||
|
||
## KI-Ebenen
|
||
|
||
| Datei | Zweck | Wann aktiv |
|
||
|---|---|---|
|
||
| `AGENTS.md` | Guardrails, verbindliche Regeln | Immer — wird automatisch geladen |
|
||
| `.opencode/skills/SKILL.md` | Schnellreferenz für Komponenten und Tokens | On-demand beim Skill-Aufruf |
|
||
| `.opencode/skills/references/components.md` | Tiefenreferenz mit vollständigen Komponenten-Beispielen | On-demand als Ergänzung zu SKILL.md |
|
||
| `.opencode/skills/references/tokens.md` | Alle CSS Custom Properties mit Werten | On-demand bei Token-Fragen |
|
||
| `.opencode/skills/references/jinja2.md` | Basis-Template, HTMX-Muster, FastAPI-Patterns | On-demand beim Arbeiten in FastAPI-Apps |
|
||
| `.opencode/commands/create-component.md` | Neue Komponente von CSS bis Doku | Manuell bei neuen Komponenten |
|
||
| `.opencode/commands/add-token.md` | Neuen Design-Token einführen | Manuell bei neuen Tokens |
|
||
| `.opencode/commands/sync-docs.md` | Code-Doku-Drift beheben | Manuell wenn Code und Doku auseinanderlaufen |
|
||
|
||
---
|
||
|
||
## Komponenten-Übersicht
|
||
|
||
### Classless (kein Klassen nötig — `base.css`)
|
||
`h1–h6` · `p` · `a` · `strong` · `em` · `code` · `pre` · `blockquote` · `ul` · `ol` · `dl` · `table` · `input` · `select` · `textarea` · `details` · `summary` · `figure` · `img`
|
||
|
||
### Layout (`components.css`)
|
||
`container` (sm/md/lg/xl/2xl) · `stack` (sm/lg) · `cluster` · `grid` (2/3/4) · `with-sidebar`
|
||
|
||
### Navigation (`components.css`)
|
||
`topnav` · `sidebar` · `breadcrumbs` · `footer` (einfach + `footer-full`)
|
||
|
||
### Komponenten (`components.css`)
|
||
`btn` (primary/secondary/ghost/danger/success, xs/sm/lg/xl, full/icon) · `button-group` · `segmented` · `badge` (7 Varianten, dot) · `card` (flat/raised/ghost/hover) · `accordion` (flush/muted) · `tabs` · `modal` (sm/lg/xl) · `dropdown` · `pagination`
|
||
|
||
### Formulare (`components.css`)
|
||
`form-group` · `form-row` · `input-group` (prefix/suffix) · `file-upload` (dropzone, is-error) · `switch`
|
||
|
||
### Tabellen (`components.css`)
|
||
`table-wrap` · `table-striped` · `table-compact` · `table-sticky` · `table-sticky-col` · `table-stack` · `table-sortable`
|
||
|
||
### Feedback & Status (`components.css`)
|
||
`spinner` (sm/lg) · `progress-bar` · `skeleton` · `stat` (data-trend) · `avatar` (sm/lg) · `avatar-group` · `empty` · `toast` · `alert` (info/success/warning/danger, dismissible) · `divider`
|
||
|
||
### Neue Komponenten (`components.css`)
|
||
`chip-group` (checkbox/radio, sm) · `timeline` (accent/success/warning/danger) · `stepper` (horizontal/vertikal) · `list-group` · `action-list` · `meta-list` (stacked/compact/flush)
|
||
|
||
### Tooltip (`components.css`)
|
||
`data-tooltip` · `data-tooltip-pos` (top/bottom/left/right) — CSS-only
|
||
|
||
### Utilities (`utilities.css`)
|
||
Display · Flex · Alignment (`items-*` / `justify-*` / `self-*`) · Gap · Margin · Padding · Text · Font · Border · Background · Shadow · Overflow · Width/Height · Position · Cursor · Opacity · Transition · `filter-bar` · `sr-only` · `hide-mobile` / `hide-desktop`
|
||
|
||
---
|
||
|
||
## JavaScript API
|
||
|
||
Alle Funktionen sind global verfügbar — gehören in einen `<script>`-Block am Ende des Basis-Templates.
|
||
|
||
| Funktion | Beschreibung |
|
||
|---|---|
|
||
| `openModal(id)` | Modal öffnen, Fokus setzen, Scroll sperren |
|
||
| `closeModal(id)` | Modal schließen |
|
||
| `switchTab(btn, panelId)` | Tab wechseln, ARIA aktualisieren |
|
||
| `toggleDropdown(id)` | Dropdown öffnen/schließen |
|
||
| `toggleNavDd(btn)` | Nav-Dropdown öffnen/schließen |
|
||
| `showToast(message, type)` | Toast einblenden (4s Auto-Dismiss) |
|
||
| `removeToast(id)` | Toast sofort entfernen |
|
||
| `dismissAlert(btn)` | Alert mit Transition entfernen |
|
||
| `sortTable(th)` | Tabellenspalte auf-/absteigend sortieren |
|