Pico CSS lädt blitzschnell – nur ~10 KB komprimiert, kein JavaScript, kein Build-Step.
Typografie
Pico CSS setzt auf schöne Standardschriften und eine klare typografische Hierarchie – komplett ohne Klassen.
H1 – Hauptüberschrift
H2 – Abschnittstitel
H3 – Unterabschnitt
H4 – Klein aber wichtig
H5 – Noch kleiner
H6 – Das Kleinste
Fließtext mit fettem, kursivem, unterstrichenem und markiertem Text. Außerdem inline Code und kleiner Text.
„Pico CSS ist wie ein gut geschneiderter Anzug für HTML – es passt einfach."
Formulare
Fortschrittsbalken
Grid & Cards
Automatischer Dark Mode über das data-theme-Attribut – ohne eine einzige Zeile eigenen CSS.
Semantic HTML first. Pico CSS gibt ARIA-konformen Elementen das richtige Styling von Haus aus.
Tabellen
| Framework | Größe | JS nötig? | Dark Mode | Klassen |
|---|---|---|---|---|
| Pico CSS | ~10 KB | Nein | ✅ Automatisch | Minimal |
| Bootstrap | ~60 KB | Optional | ⚠️ Manuell | Sehr viele |
| Tailwind CSS | Variabel | Nein | ✅ Klassen | Utility-first |
| Bulma | ~25 KB | Nein | ⚠️ Manuell | Viele |
Accordion
Was ist Pico CSS?
Pico CSS ist ein minimales, klassen-loses CSS-Framework das auf semantischem HTML aufbaut. Es bietet schöne Standardstile für alle nativen HTML-Elemente.
Wie installiere ich Pico CSS?
Per CDN: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"> – das war's!
Unterstützt Pico CSS Custom Properties?
Ja! Pico CSS ist vollständig über CSS Custom Properties (Variablen) anpassbar. Du kannst Farben, Abstände, Schriften und mehr überschreiben.
Modal / Dialog
Pico CSS stylt native <dialog>-Elemente automatisch – kein JS-Framework nötig.
Farbpalette
Pico CSS liefert eine durchdachte Farbpalette als CSS-Variablen – anpassbar über :root.
Primary
Secondary
Contrast
Text
Muted
Card BG
Loading States
Das aria-busy-Attribut triggert automatisch einen Spinner – semantisch und zugänglich.