Dokumentation

CSS-Framework

Ein schlankes, klassenloses CSS-Framework für konsistente Jinja2/HTMX-Webapps. Alle Werte zentral in tokens.css anpassbar.

tokens.css base.css components.css utilities.css

Tokens

Farben

Alle semantischen Aliases aus tokens.css. Diese anpassen, nicht die Rohpalette.

Semantische Farben (Backgrounds)

--bg
--bg-subtle
--bg-muted
--surface
--surface-raised

Accent Palette

--accent-subtle
--accent-muted
--accent
--accent-hover
--accent-active

Semantisch (Status)

--color-success
--color-warning
--color-danger
--color-info

Tokens

Abstände

4px-Grid. 12 Stufen von --space-1 (4px) bis --space-24 (96px).

1
2
3
4
5
6
8
10
12
16

Base

Typografie

Classless — kein Markup nötig.

Headings

H1 — Seitenüberschrift (3rem)

H2 — Abschnittsüberschrift (2.25rem)

H3 — Unterabschnitt (1.875rem)

H4 — Kartenüberschrift (1.5rem)

H5 — Gruppenheader (1.25rem)
H6 — Label-Header (1rem)

Body & Inline

Normaler Absatztext mit fettem, kursivem Text und einem Link. inline code und markierter Text sind ebenfalls enthalten.

Zweiter Absatz. Kleiner Hilfstext darunter.

Ein Zitat als Blockquote, ideal für wichtige Aussagen oder Kundenstimmen. — Max Mustermann, CEO

Keyboard Shortcut: ⌘ + K

// Code Block
const greet = (name) => `Hallo, ${name}!`;

Base

Formulare (classless)

Standard-HTML-Elemente ohne Klassen gestylt.

Optionen

Base

Tabellen (classless)

Name Status Rolle Erstellt
Anna Müller Aktiv Admin 12. Jan 2025
Ben Schmidt Inaktiv Nutzer 3. Feb 2025
Clara Weber Ausstehend Editor 21. Mär 2025
Gesamt 3 Nutzer

Komponenten

Buttons

Varianten

Größen

Mit Icon

Button Group & Segmented Control

Zeitraum
Für serverseitige Filter oder Ansichtsauswahl ohne zusätzliche JavaScript-Logik.

Komponenten

Badges

Default Primary Erfolg Warnung Fehler Info Outline Live Offline

Komponenten

Cards

Projekt Alpha

Aktiv

Vollständige Card mit Header, Body und Footer. Hover für Shadow-Effekt.

AM
BS
+ 3 weitere
Gesamtumsatz € 48.291 +12.4% diesen Monat

Fortschritt

Onboarding 80%
Tests 45%
Deployment 12%
🖼
Tutorial 5 Min. Lesezeit

CSS Custom Properties richtig einsetzen

Wie du mit einem einzigen Token-System konsistente Designs über mehrere Projekte hinweg erreichst.

MW
Max Weber

Keine Einträge

Erstelle deinen ersten Eintrag, um hier Daten zu sehen.

Komponenten

Formulare (Opt-in Klassen)

Nutzerdaten bearbeiten

@
Wird für Login und Benachrichtigungen verwendet.
.de
Mindestens 8 Zeichen erforderlich.
Die Datei wird beim Absenden des Formulars normal übertragen.
Bitte nur Logos im SVG- oder PNG-Format verwenden.
Benachrichtigungen

Komponenten

Tabellen (table-wrap)

Nutzer Status Rolle Letzter Login
AM
Anna Müller
anna@beispiel.de
 Aktiv Admin Vor 2 Stunden
BS
Ben Schmidt
ben@beispiel.de
 Ausstehend Editor Vor 3 Tagen
CW
Clara Weber
clara@beispiel.de
 Inaktiv Nutzer Vor 2 Wochen
1–3 von 24 Einträgen

Komponenten

Alerts

Information

Deine Daten werden automatisch gespeichert. Du kannst jederzeit fortfahren.

Erfolgreich gespeichert

Alle Änderungen wurden übernommen.

Abo läuft ab

Dein Abonnement endet in 7 Tagen. Bitte verlängere es rechtzeitig.

Fehler aufgetreten

Die Anfrage konnte nicht verarbeitet werden. Bitte versuche es erneut.

Komponenten

Tabs

Inhalt des ersten Tab-Panels. Hier können beliebige Inhalte stehen.

Einstellungen und Konfigurationsoptionen.

[2025-01-15 09:12:03] INFO  Server gestartet
[2025-01-15 09:12:04] INFO  Datenbank verbunden
[2025-01-15 09:15:22] WARN  Hohe Speichernutzung

Komponenten

Accordion

Opt-in Pattern für gruppierte details-Elemente mit klaren Abständen und Varianten.

Standard

Was ist ein classless Framework?

Ein classless Framework stylt HTML-Elemente direkt, ohne dass zusätzliche Klassen für jede Kleinigkeit nötig sind.

Für komplexere Muster wie gruppierte FAQs oder Einstellungsblöcke kommen opt-in Komponentenklassen gezielt darüber.

Wie passe ich Farben an?

Alle Farben liegen in tokens.css als semantische Custom Properties vor.

Typische Einstiegspunkte sind --accent, --bg, --surface und --text.

Wann nutze ich eine Accordion-Variante?

Für FAQ-Bereiche, Einstellungsgruppen oder kompakte Informationslisten, die ohne JavaScript auskommen sollen.

Flush & Muted

API-Zugriff

Flush eignet sich für Listen mit durchgehender Kante, etwa in Sidepanels oder Settings-Cards.

Webhooks

Die Einträge schließen nahtlos aneinander an, bleiben aber technisch eigenständige details-Elemente.

Hinweise für Teams

Muted hebt den Container subtil gegen sehr helle Oberflächen ab und passt gut zu Hilfstexten oder begleitenden FAQs.

Komponenten

Feedback & Status

Spinner

Skeleton

Toast (simuliert)

Utilities

Alignment

Standalone align-items, justify-content und align-self — kombinierbar mit .flex und .grid-u.

align-items — .items-*

.items-start
höher
kurz
.items-center
höher
kurz
.items-end
höher
kurz
.items-stretch
füllt Höhe

justify-content — .justify-*

.justify-start
B
.justify-center
B
.justify-end
B
.justify-between
rechts

align-self auf Kind-Elementen — .self-*

.self-start
.self-center
.self-end
.self-stretch

Typisches Kompositions-Beispiel

AM

Anna Müller

anna@beispiel.de

Aktiv 
<div class="flex items-center justify-between">
  <div class="flex items-center gap-3">...</div>
  <span class="badge badge-success">Aktiv</span>
</div>

Komponenten

Meta List / Definition List

Label-Wert-Paare für Detailseiten, Profile und Systeminfos.

Standard (zweispaltig)

Status
Aktiv
Erstellt am
12. Januar 2025
Verantwortlich
AM
Anna Müller
Abteilung
Design
Letzter Login
vor 2 Stunden

Gestapelt (.meta-list-stacked)

Projektname
Acme Redesign
Deadline
30. Juni 2025
Budget
€ 24.000

Kompakt (.meta-list-compact)

Version
2.4.1
Node
20.11.0
Umgebung
Staging
Region
eu-central-1

Komponenten

Filter Chips

Checkbox- oder Radio-Basis. Kein JavaScript nötig.

Mehrfachauswahl (Checkboxen)

Einzelauswahl (Radio)

Klein (.chip-sm)

Komponenten

Timeline / Activity Feed

Vertikales Muster für Logs, Status-Historien und Prozessschritte.

Standard mit Farbvarianten

Deployment abgeschlossen

vor 2 Stunden

Version 2.4.1 ist live auf Produktion.

Review ausstehend

vor 5 Stunden

Branch erstellt

gestern

Ticket eröffnet

vor 3 Tagen

Komponenten

Stepper / Progress Steps

Rein visuelle Schrittanzeige. Kein JavaScript nötig.

Horizontal

Konto
Profil
3
Zahlung
4
Fertig

Vertikal

Konto anlegen

E-Mail und Passwort festlegen.

2

Profil ausfüllen

Name, Rolle und Profilbild.

3

Abschließen

Einstellungen bestätigen.

Komponenten

List Group / Action List

Kompaktes Pattern für Einstellungslisten, Menüs und Inbox-artige Ansichten.

List Group

  • Dashboard
  • Projekte
  • Team
  • Archiv

Action List

Profil bearbeiten

Name, Avatar und Kontakt

Sicherheit

Passwort und 2FA

Kompakt + Flush

Übersicht Rechnungen Integrationen API-Schlüssel

Komponenten

Responsive Table Patterns

Sticky Header, Sticky erste Spalte, Mobile Key-Value-Stacking (data-label auf td erforderlich).

Sticky Header + Sticky erste Spalte (.table-sticky .table-sticky-col)

NameRolleStatusAbteilungDatum
Anna MüllerAdminAktivDesign12.01.2025
Ben SchmidtEditorAusstehendEntwicklung08.03.2025
Clara HoffmannNutzerAktivMarketing22.02.2025
David BraunNutzerGesperrtVertrieb05.04.2025
Eva FischerAdminAktivDesign17.05.2025

Mobile Key-Value-Stacking (.table-stack) — auf schmalen Viewports als Karten

NameRolleStatusDatum
Anna Müller Admin Aktiv 12.01.2025
Ben Schmidt Editor Ausstehend 08.03.2025
Clara Hoffmann Nutzer Aktiv 22.02.2025

Komponenten

Dismissible Alert

Alert mit Close-Button. Minimales JavaScript — dismissAlert(btn).

Erfolgreich gespeichert

Deine Änderungen wurden übernommen.

Abo läuft bald ab

Dein Plan endet in 7 Tagen.

Fehler aufgetreten

Die Verbindung konnte nicht hergestellt werden.

Neue Funktionen verfügbar — sieh dir die Versionshinweise an.

Komponenten

Sortierbare Tabellen

.table-sortable auf <table>, data-action="sort" und data-sort="" auf sortierbaren <th>.

Name Abteilung Status Datum Betrag
Anna MüllerDesignAktiv12.01.2025€ 4.200
Ben SchmidtEntwicklungAusstehend08.03.2025€ 6.800
Clara HoffmannMarketingAktiv22.02.2025€ 3.100
David BraunVertriebGesperrt05.04.2025€ 5.500
Eva FischerDesignAktiv17.05.2025€ 2.900

Komponenten

Tooltip

CSS-only via data-tooltip="...". Position über data-tooltip-pos="top|bottom|left|right" (Standard: top).

Badge mit Tooltip

Komponenten

Toast

showToast(message, type) — automatisch nach 4s entfernt, manuell über ✕ schließbar.