---
name: css-framework
description: Erstellt und bearbeitet HTML/CSS/JS für CSS-Framework — ein classless-first CSS-Framework für Jinja2/HTMX-Webapps. Verwende diesen Skill für alle UI-Aufgaben: Layouts, Navigation, Buttons, Cards, Formulare (inkl. Switch, File Upload), Tabellen (inkl. sortierbar, sticky, mobile-stack), Modals, Dropdowns, Tabs, Alerts (inkl. dismissible), Accordion, Filter Chips, Timeline, Stepper, List Group, Meta List, Tooltip, Toast, Pagination, Feedback-Komponenten (Spinner, Skeleton, Stat, Avatar) sowie Alignment- und Spacing-Utilities. Auch für Design Tokens, Dark Mode, HTMX-Integration und die JavaScript-API (showToast, dismissAlert, sortTable, openModal, switchTab, toggleDropdown).
metadata:
author: tom
version: "2.1"
---
## Überblick
CSS-Framework ist ein schlankes, tokenbasiertes CSS-Framework für Flask/Jinja2-Webapps mit HTMX. Kein Build-Tool, keine Abhängigkeiten.
**Einbinden:**
```html
```
**Datei-Architektur:**
| Datei | Zweck |
|---|---|
| `tokens.css` | CSS Custom Properties — einzige Source of Truth |
| `base.css` | Classless Reset — semantisches HTML braucht keine Klassen |
| `components.css` | Opt-in Klassen für Layouts & Komponenten |
| `utilities.css` | Minimale Helfer-Klassen |
| `main.css` | Entry Point |
| `framework.js` | JavaScript API — `data-action` und globale Funktionen |
| `theme.js` | Hell/Dunkel vor dem Rendern setzen und umschalten |
Vollständige Referenzen: [tokens.md](references/tokens.md) · [components.md](references/components.md) · [jinja2.md](references/jinja2.md)
---
## Kernprinzipien
1. **Classless first** — `h1–h6`, `p`, `a`, `table`, `input`, `select`, `details` werden ohne Klassen gestylt
2. **Opt-in Klassen** — nur wo semantisches HTML nicht ausreicht
3. **Token first** — alle Werte über `tokens.css`, nie hartverdrahten
4. **Dark Mode** via `data-theme="dark"` auf ``
5. **Minimales JS** — framework-unabhängig, in `framework.js` via `