Pico CSS-Stile: semantisches HTML mit responsiver, rem-basierter Typografieskala und Theme-Variablen. Die Standard-, klassenlose und bedingte Distribution haben unterschiedliche Integrationsbereiche; dieser Leitfaden verwendet den Standard-Build für ein Formular mit Leseeinstellungen und nativem Disclosure- und Dialogverhalten.
Offizielles Pico CSS 2.1.1 mit semantischem HTML und originalem Vanilla-JavaScript. · Implementierungsreferenz
02
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.
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.
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.
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.
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.
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.
Lassen Sie den Profilnamen leer und wählen Sie „Profil überprüfen“.
Geben Sie einen Namen ein, wählen Sie eine Breite und ändern Sie die Schriftgröße des Beispiels.
Überprüfen Sie den Snapshot, brechen Sie den Vorgang ab, um weiter zu bearbeiten, oder übernehmen Sie ihn in den lokalen Status.
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.
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.
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.
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.
Labels umschließen ihre Steuerelemente, article bildet die Einstellungskarte, details stellt die Offenlegung bereit und dialog enthält die Überprüfung.
html
<main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>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.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>
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.
javascript
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();
Der Breakpoint bei 800px und die ch-Abmessungen sind individuelle Festlegungen.
04
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.
html
<!-- npm install @picocss/[email protected]
mkdir -p assets
cp node_modules/@picocss/pico/css/pico.min.css assets/pico.min.css -->
<!doctype html>
<html lang="en" data-theme="light">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Reading room</title>
<link rel="stylesheet" href="assets/pico.min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>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.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>
</body>
</html>
Ein Prompt für dein Projekt
Agenten-Prompt
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.
05
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.
