# Pico CSS-Designsystem ## Vorschau der Oberfläche des Pico CSS-Designsystems Passe Zeilenbreite und Beispielgröße an, wechsle die Darstellung und sieh dir ein lokales Profil in einem nativen Dialog an. ## Gestaltungsreferenz des Pico CSS-Designsystems Kompiliertes Standard-Stylesheet von Pico CSS 2.1.1. Die ersten Farbdefinitionen gehören zum hellen Theme. Durch die responsive Skalierung der Root-Schriftgröße ändert sich der Pixelwert von rem; gehe nicht davon aus, dass bei jedem Viewport eine Root-Schriftgröße von 16px gilt. Lesebreiten und der Layout-Breakpoint bei 800px sind Entscheidungen auf Anwendungsebene. ### Typografie und Rhythmus | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --pico-font-family | var(--pico-font-family-sans-serif) | Alias für die serifenlose Systemschriftfamilie. | | --pico-line-height | 1.5 | Standard-Zeilenhöhe des Fließtexts. | | --pico-font-size | 100% | Ausgangsgröße des Root-Elements vor den responsiven Media-Regeln. | | --pico-spacing | 1rem | Basiseinheit für Abstände. | | --pico-typography-spacing-vertical | 1rem | Vertikaler Textrhythmus. | | --pico-grid-column-gap | var(--pico-spacing) | Abstand zwischen nativen .grid-Spalten. | | --pico-border-radius | 0.25rem | Standardform für Steuerelemente und Karten. | | --pico-border-width | 0.0625rem | Standardstärke der Begrenzung. | | --pico-outline-width | 0.125rem | Breite der Fokusumrandung. | | --pico-form-element-spacing-vertical | 0.75rem | Vertikaler Innenabstand von Eingabefeldern und Schaltflächen. | | --pico-form-element-spacing-horizontal | 1rem | Horizontaler Innenabstand von Eingabefeldern und Schaltflächen. | ### Primäre Rollen im hellen Theme | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --pico-primary | #0172ad | Link-/Primärfarbe für Text. | | --pico-primary-background | #0172ad | Hintergrund der primären Schaltfläche. | | --pico-primary-hover | #015887 | Primärtext bei Hover. | | --pico-primary-hover-background | #02659a | Oberfläche primärer Schaltflächen bei Hover. | | --pico-primary-focus | rgba(2, 154, 232, 0.5) | Farbe für die Fokus-Hervorhebung. | | --pico-primary-inverse | #fff | Text auf primärem Hintergrund. | | --pico-background-color | #fff | Seitenoberfläche. | | --pico-color | #373c44 | Standardfarbe des Fließtexts. | | --pico-muted-color | #646b79 | Sekundärer Text. | ### Responsive Root-Größen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Base | 100% | 16px, wenn die Browser-Standardschriftgröße 16px beträgt. | | ≥576px | 106.25% | 17px unter derselben Annahme. | | ≥768px | 112.5% | 18px. | | ≥1024px | 118.75% | 19px. | | ≥1280px | 125% | 20px. | | ≥1536px | 131.25% | 21px. | ### Überschriftengrößen und Steuerelemente der Anwendung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | h1 | 2rem / 1.125 | Offizielle Überschriftengröße und Zeilenhöhe. | | h2 | 1.75rem / 1.15 | Offizielle Überschrift der zweiten Ebene. | | h3 | 1.5rem / 1.175 | Offizielle Überschrift der dritten Ebene. | | Reading measure | 48ch / 62ch / 72ch | Ursprüngliche auswählbare maximale Zeilenlängen. | | Sample scale | 90–125%; step 5 | Ursprüngliche Bereichsgrenzen, die nur auf den Beispieltext angewendet werden. | | Composition breakpoint | 800px | Ursprüngliche Regel für den Wechsel von zwei Spalten zu einer Spalte. | ## Vollständiger Leitfaden zum Pico CSS-Designsystem Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Pico CSS-Designsystem: eine kleine semantische HTML-Oberfläche ### Eine kleine semantische HTML-Oberfläche > Pico gestaltet vertraute HTML-Elemente, ohne für jeden Absatz, jedes Feld und jede Schaltfläche eine lange Liste von Komponentenklassen zu verlangen. In diesem Beispiel dient article als Einstellungskarte, header und footer markieren deren Grenzen, und die Labels enthalten die nativen input-/select-Steuerelemente. Das main-Element verwendet container, da dies der standardmäßige Pico-Build ist und nicht die separate klassenlose Distribution. Damit eignet sich Pico für kompakte Tools und inhaltsorientierte Oberflächen, in denen die nativen Steuerelemente des Browsers ausreichen. Ein Formular wird dadurch nicht von selbst zu einer Anwendung. Das vollständige JavaScript verwaltet das Lesebeispiel, die Prüfübersicht und das lokale Ergebnis, während der Browser die grundlegende Eingabesemantik übernimmt. Unterstützende Spezifikation lesen ## Pico CSS Designsystem: Theme-Variablen und semantische Rollen ### Theme-Variablen und semantische Rollen Die Standardrolle für Primärfarben ist nicht einfach eine einzelne Farbe, die unterschiedslos überall angewendet wird. Pico unterscheidet zwischen Werten für primären Text, Hintergrund, Hover, Fokus und invertierte Darstellung. Die Referenztabelle führt die tatsächlichen Definitionen für den hellen Modus auf, damit sich bei einer Markenanpassung die Beziehungen zwischen ihnen erhalten lassen. Beschriftungen im Lesebereich verwenden die Rolle für primären Text; Schaltflächen übernehmen die vollständige Gestaltung der Pico-Komponenten. Die Umschaltung der Darstellung setzt data-theme auf html. Ein explizites Attribut für den hellen oder dunklen Modus hat Vorrang vor der automatischen Auswahl des Farbschemas. Wird es entfernt, kann Pico dem bevorzugten Farbschema des Browsers folgen. Das Beispiel legt einen Startmodus ausdrücklich fest, damit Kontrollkästchen und Darstellung synchron bleiben. Wenn Sie eine eigene Primärfarbenpalette einführen, passen Sie beide Farbschema-Definitionen an; nur einen Wert im hellen Root zu ändern, reicht für ein vollständiges dunkles Theme nicht aus. Unterstützende Spezifikation lesen ## Pico CSS Designsystem: Responsive Typografie verändert die gesamte Skala ### Responsive Typografie verändert die gesamte Skala Pico passt die Root-Schriftgröße bei mehreren Viewport-Breiten an: zunächst 100 %, dann 106,25 %, 112,5 %, 118,75 %, 125 % und 131,25 %. Bei einer Browser-Standardschriftgröße von 16px entspricht das 16–21px. Da der Komponentenabstand in rem angegeben ist, wächst das komfortable Layout zusammen mit dem Text. Ein Token mit dem Wert ein rem entspricht daher nicht immer sechzehn Pixeln. Der Schieberegler im Beispiel ändert ausschließlich die Schriftgröße von #sample auf einen Prozentsatz der geerbten Größe. Er ändert weder die Root-Variable von Pico noch die Zoom-Einstellung des Browsers. Durch diese Unterscheidung bleiben die Einstellungssteuerelemente stabil und der lokale Geltungsbereich ist klar definiert. Die native Ausgabe zeigt den ausgewählten Prozentsatz an. Die Überschriften behalten die Pico-Standardwerte: h1 ist 2rem und h2 ist 1.75rem. Unterstützende Spezifikation lesen ## Pico CSS Designsystem: Zeilenlänge und Leselayout ### Zeilenlänge und Leselayout Die drei Zeilenlängen sind eigene Festlegungen in der Einheit ch. Sie setzen eine maximale Breite, statt den Text zu zwingen, die Spaltenbreite auszuschöpfen. Auf Mobilgeräten kann das Beispiel schmaler als die ausgewählte Maximalbreite sein; das ist das erwartete Ergebnis einer responsiven Maximalbreite. Auch bei einer großen Einstellung ist kein horizontales Scrollen erforderlich. Das benutzerdefinierte Leselayout hat zwei minmax-Spalten und klappt unterhalb von 800px auf eine Spalte um. Dieser Schwellenwert gilt nur für dieses Layout und ist kein offizieller Pico-Breakpoint. Die nebeneinander angeordneten Schaltflächen zum Überprüfen und Zurücksetzen nutzen Picos Grid-Hilfsklasse; die Fußzeile des Dialogs verwendet eine umbrechende Flex-Zeile. Auf schmalen Bildschirmen hat ein gut lesbares Einstellungsfeld Vorrang vor einer Anordnung in zwei Spalten. Unterstützende Spezifikation lesen ## Pico CSS Designsystem: Native Validierung mit einem sinnvollen Prüfschritt ### Native Validierung mit einem sinnvollen Prüfschritt Für den Profilnamen werden required und minlength sowie ein zugehöriger kleiner Hilfetext verwendet. Die native Constraint-Validierung verhindert eine leere Übermittlung. Das Skript prüft zusätzlich den bereinigten Wert, damit zwei Leerzeichen nicht die Anwendungsregel erfüllen. Bei einem ungültigen Ereignis fügt es aria-invalid für Picos Darstellung ungültiger Eingaben hinzu; bei der Eingabe werden der benutzerdefinierte Fehler und das veraltete Attribut für ungültige Eingaben entfernt. Select und range sind normale Browser-Steuerelemente. Sie aktualisieren das Lesebeispiel sofort, während „Profil überprüfen“ ein separates, noch nicht übernommenes Objekt erfasst. Dieser Snapshot liefert den im Dialog angezeigten Text und die Daten, die „Lokal übernehmen“ verwendet. So werden bei der Bestätigung nicht versehentlich andere Werte beschrieben als übernommen. 1. Lassen Sie den Profilnamen leer und wählen Sie „Profil überprüfen“. 2. Geben Sie einen Namen ein, wählen Sie eine Breite und ändern Sie die Schriftgröße des Beispiels. 3. Überprüfen Sie den Snapshot, brechen Sie den Vorgang ab, um weiter zu bearbeiten, oder übernehmen Sie ihn in den lokalen Status. Unterstützende Spezifikation lesen ## Pico CSS Designsystem: Ein echtes Modal, nicht nur ein gestaltetes Overlay ### Ein echtes Modal statt eines bloß gestalteten Overlays Pico gestaltet dialog und dessen article-Inhalt, stellt aber keine Anwendungslogik JavaScript bereit. Dieses Beispiel verwendet HTMLDialogElement.showModal. Der Browser platziert den Dialog in der obersten Darstellungsebene, macht den übrigen Dokumentinhalt inaktiv und ermöglicht das native Schließen mit Escape. Nur das open-Attribut zu setzen, würde ein anderes, nicht modales Verhalten erzeugen und wird hier nicht verwendet. Der Dialog hat ein aria-labelledby-Attribut, das auf seine Überschrift verweist. Die Schaltfläche zum Schließen hat eine ausdrücklich festgelegte barrierefreie Beschriftung; „Weiter bearbeiten“ und „Lokal übernehmen“ beschreiben die beiden möglichen Ergebnisse. Beide Schaltflächen zum Abbrechen rufen close auf, ohne den gespeicherten Status zu ändern. Bei der Übernahme wird das ausstehende Profil als sichtbarer Text gespeichert und der Dialog geschlossen; es wird weder in localStorage geschrieben noch eine Anfrage gesendet. Unterstützende Spezifikation lesen ## Pico CSS Designsystem: Eine native Disclosure-Komponente für ergänzende Erläuterungen ### Eine native Offenlegung für ergänzende Erläuterungen Das details/summary-Paar erklärt, welche Steuerelemente das Beispiel beeinflussen und welche nicht. Es lässt sich ohne JavaScript tatsächlich aufklappen, da dieses Verhalten zum Element HTML gehört. Die Zusammenfassung enthält eine aussagekräftige Frage und ist per Tastatur bedienbar. Die Erklärung ist ergänzender Inhalt und unterbricht daher das Hauptformular nicht mit einem weiteren ständig geöffneten Bereich. Ersetzen Sie details nicht durch eine gestaltete Überschrift, nur weil der geschlossene Screenshot ähnlich aussieht. Ebenso behält das Eingabefeld für die Darstellung type=checkbox mit role=switch, sodass es einen echten binären Zustand hat. Picos Gestaltung wird auf semantische Strukturen angewendet; diese Strukturen tragen einen großen Teil der Interaktionslogik. - article bildet eine optisch gruppierte Einstellungsfläche. - details und summary ermöglichen eine native Disclosure-Komponente. - Ein mit showModal geöffneter dialog schafft einen modalen Prüfbereich. Unterstützende Spezifikation lesen ## Pico CSS Designsystem: Einmal installieren und das Beispiel reproduzierbar halten ### Einmal installieren und das Beispiel reproduzierbar halten Das Standardpaket enthält eine kompilierte pico.min.css. Kopieren Sie sie in einen lokalen Assets-Ordner, binden Sie sie vor den Layoutregeln der Anwendung ein und laden Sie die bereitgestellte app.js mit defer. Das vollständige Markup, CSS und Skript sind oben enthalten. Für dieses Beispiel sind weder ein Framework-Provider noch eine Icon-Schriftart oder ein Drittanbieter-JavaScript-Plugin erforderlich. Verwenden Sie das Standard-Stylesheet einheitlich mit seinen Container- und Grid-Klassen. Der klassenlose Build geht von anderen Layoutannahmen aus, und der bedingte Build grenzt die Gestaltung anders ab. Diese Varianten ohne Prüfung des Markups auszutauschen, ist keine neutrale Optimierung. Wenn Sie Pico in eine bestehende Website integrieren, prüfen Sie, wie dessen Elementselektoren mit den vorhandenen Formular- und Typografiestilen zusammenspielen, bevor Sie es global anwenden. Unterstützende Spezifikation lesen ## Pico CSS-Designsystem: Distribution vor der Anpassung des Markups auswählen ### Lege die Distribution fest, bevor du das Markup anpasst Dieses Beispiel verwendet die Standard-Distribution mit ihren Container- und Grid-Hilfsklassen. Die klassenlose Distribution setzt andere Layoutannahmen voraus, während die bedingte Distribution die Pico-Stile gezielt begrenzt. Betrachten Sie die Wahl der Distribution als Integrationsentscheidung und nicht als austauschbare Optimierung der Dateigröße. Prüfen Sie bei einer bestehenden Website, wie weit Elementselektoren auf vorhandene Überschriften, Formulare, Artikel und Dialoge wirken. Die prozentuale Schriftgröße im Lesebeispiel ist eine lokale Überschreibung und sollte lokal bleiben. Eine Änderung der Root-Skalierung würde auch Picos auf rem basierende Abstände und Steuerelemente verändern. Stimmen Sie bei der Entscheidung, welche Teile des Dokuments das Theme übernehmen, das Attribut appearance und die Steuerelemente für die Anwendungseinstellungen aufeinander ab. Unterstützende Spezifikation lesen ## Pico CSS-Designsystem: Komponentenbeispiele ### Vollständige semantische Leseoberfläche Labels umschließen ihre Steuerelemente, article bildet die Einstellungskarte, details stellt die Offenlegung bereit und dialog enthält die Überprüfung. ```

PICO CSS / READING ROOM

A calmer reading setup

Adjust a local reading profile. Semantic HTML does most of the work.

Reading preferences

At least two characters. Saved only for this open preview.
No profile applied yet.

A SHORT SAMPLE

Make space for attention.

The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.

A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.

What changes in this preview?

Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.

Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.

Review reading profile

 ``` Code-Referenz - Pico gestaltet diese Elemente; native Browser-APIs sorgen für das Verhalten. - Der Dialog wird mit showModal geöffnet, nicht durch Hinzufügen eines open-Attributs. ### Ursprüngliche Profilinteraktion Live-Stile, native Validierung, sicherer Überprüfungstext sowie lokales Anwenden und Zurücksetzen. ``` const $=id=>document.getElementById(id);let pending=null; function update(){ $('sample').style.maxWidth=$('measure').value+'ch';$('sample').style.fontSize=$('scale').value+'%';$('size-label').value=$('scale').value+'%';document.documentElement.dataset.theme=$('night').checked?'dark':'light';} for(const id of ['measure','scale','night'])$(id).addEventListener('input',update); $('preferences').addEventListener('submit',event=>{event.preventDefault();pending={name:$('reader').value.trim(),width:$('measure').value,size:$('scale').value,dark:$('night').checked};if(pending.name.length<2){$('reader').setCustomValidity('Use at least two non-space characters.');$('reader').reportValidity();return;}$('review-text').textContent=`${pending.name}: ${pending.width}-character maximum, ${pending.size}% sample text, ${pending.dark?'dark':'light'} appearance. This will apply only to this preview.`;$('review').showModal();}); $('reader').addEventListener('input',()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid')});$('reader').addEventListener('invalid',()=>{$('reader').setAttribute('aria-invalid','true')}); for(const id of ['close','cancel'])$(id).addEventListener('click',()=>$('review').close()); $('apply').addEventListener('click',()=>{$('saved').textContent=`Applied ${pending.name} locally (${pending.width}ch, ${pending.size}%, ${pending.dark?'dark':'light'}). Reloading clears this profile.`;$('review').close();}); $('preferences').addEventListener('reset',()=>{setTimeout(()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid');$('saved').textContent='No profile applied yet.';update()},0)});update(); ``` Code-Referenz - Das Profil verlässt dieses Dokument nicht. - Namen, die nur aus Leerzeichen bestehen, werden mit setCustomValidity zurückgewiesen. ### Leselayout Explizite Anwendungsregeln trennen das Einstellungsfeld vom Beispiel. ``` main.container{max-width:1120px;padding:2rem 1rem}.kicker{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--pico-primary)}.reading-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr);gap:2rem;align-items:start}.reading-copy{padding-top:1rem}#sample{transition:font-size .15s}output{float:right}#review article{max-width:560px}#review footer{display:flex;flex-wrap:wrap;gap:.5rem}#review footer button{flex:1}h1{max-width:20ch}header>p{max-width:65ch}@media(max-width:800px){.reading-layout{grid-template-columns:1fr;gap:1rem}} ``` Code-Referenz - Der Breakpoint bei 800px und die ch-Abmessungen sind individuelle Festlegungen. ## Pico CSS-Designsystem: Agent-Setup ### Ausgangspunkt für die Implementierung Speichern Sie die vollständigen Beispiele oben als body, style.css und app.js. Die eigenständige Vorschau bindet dasselbe offizielle CSS und den ursprünglichen Anwendungscode inline ein. Verwendet die aktuelle Browserunterstützung für den nativen Dialog API. Der HTML-Wrapper enthält das vollständige body-Markup; speichern Sie die bereitgestellten Beispiele für Interaktion und CSS unter den hier angegebenen Dateinamen. ``` Reading room

PICO CSS / READING ROOM

A calmer reading setup

Adjust a local reading profile. Semantic HTML does most of the work.

Reading preferences

At least two characters. Saved only for this open preview.
No profile applied yet.

A SHORT SAMPLE

Make space for attention.

The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.

A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.

What changes in this preview?

Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.

Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.

Review reading profile

 ``` ### Ein Prompt für dein Projekt ``` Verwenden Sie das Lesebeispiel für Leseprofile mit Pico 2.1.1, dem Standard-Stylesheet, einem semantischen article, einem nativen Formular und der Offenlegung über details. Begrenzen Sie Änderungen an Textgröße und Zeilenlänge auf das Beispiel und synchronisieren Sie die Auswahl für appearance mit data-theme. Validieren Sie den bereinigten Profilnamen, erstellen Sie eine Momentaufnahme zur Überprüfung und öffnen Sie sie mit dialog.showModal; bei Abbruch darf das Profil nicht angewendet werden. Wenden Sie ausschließlich das erfasste lokale Profil an und setzen Sie es zurück, nachdem die nativen Formularstandardwerte wiederhergestellt wurden. Behalten Sie Picos responsives Root-Skalierungsverhalten bei, anstatt es durch die Textgrößeneinstellung des Beispiels zu ersetzen. ``` ## Pico CSS-Designsystem: Quellen und Geltungsbereich Pico CSS 2.1.1. Standard-Tokens sind von den ursprünglichen Regeln für Leselayout und Profil getrennt. Es wird weder eine Speicherung noch ein Remotedienst implementiert. - CSS-Variablen Tatsächliche Stil- und Farbdefinitionen. - Typografie Semantische Überschriften und Typografie. - Formulare Zusammenstellung nativer Formularelemente. - Modal Abgrenzung zwischen Dialoggestaltung und Anwendungsverhalten. - Raster Hilfsklasse für responsives Layout. - Accordion Offenlegung mit details und summary. ## Pico CSS-Designsystem: Weiterführende Ressourcen ### Preline UI Ein nativer Preline-Sitzungsplaner mit verknüpften Tabs, einem eingeschränkten Input-Number-Plugin, installierten Theme-Aliasen, echten Tailwind-Skalen und einer lokalen Materialkostenschätzung, die sich mit der ausgewählten Sitzung aktualisiert. ### Prime UI Eine auf eine feste Version abgestimmte PrimeVue-Implementierung des Prime UI-Ökosystems: ein Dokumentbaum im Aura-Theme mit echten Preset-Referenzen, gesteuerter Auf- und Zuklappfunktion, Filterung, Auswahl und lokalem Anheften. ### Pure CSS Pure CSS ist ein modulares Stylesheet für Grids, Formulare, Schaltflächen, Menüs und Tabellen – ohne Widget-Laufzeitumgebung. Dieser Leitfaden zeigt anhand eines filterbaren Gerätekatalogs mit explizit implementierter Sortierung und Auswahl, wie das optionale responsive Grid-Modul mit nativen semantischen Elementen zusammenspielt. - [Implementierungsreferenz](https://picocss.com/docs/forms) - [Quelle](https://picocss.com/docs/css-variables) - [Unterstützende Spezifikation lesen](https://picocss.com/docs/forms) - [Unterstützende Spezifikation lesen](https://picocss.com/docs/css-variables) - [Unterstützende Spezifikation lesen](https://picocss.com/docs/typography) - [Unterstützende Spezifikation lesen](https://picocss.com/docs/grid) - [Unterstützende Spezifikation lesen](https://picocss.com/docs/modal) - [Unterstützende Spezifikation lesen](https://picocss.com/docs/accordion) - [Code-Referenz](https://picocss.com/docs/modal) - [Code-Referenz](https://picocss.com/docs/forms) - [Code-Referenz](https://picocss.com/docs/grid) - [CSS-Variablen Tatsächliche Stil- und Farbdefinitionen.](https://picocss.com/docs/css-variables) - [Typografie Semantische Überschriften und Typografie.](https://picocss.com/docs/typography) - [Formulare Zusammenstellung nativer Formularelemente.](https://picocss.com/docs/forms) - [Modal Abgrenzung zwischen Dialoggestaltung und Anwendungsverhalten.](https://picocss.com/docs/modal) - [Raster Hilfsklasse für responsives Layout.](https://picocss.com/docs/grid) - [Accordion Offenlegung mit details und summary.](https://picocss.com/docs/accordion)