Sistema di progettazione Pico CSS.

Sistema di design Pico CSS Sistema di progettazione: una piccola superficie semantica HTML

Una superficie semantica HTML essenziale

Pico applica stili agli elementi HTML familiari, senza chiedere che ogni paragrafo, campo o pulsante abbia una lunga lista di classi di componenti. In questo esempio, article fornisce la scheda delle preferenze, mentre l'intestazione e il piè di pagina ne definiscono i confini; le label contengono i controlli input/select nativi. L'elemento main usa container perché questa è la build standard di Pico, non la distribuzione separata classless.

Questo rende Pico utile per strumenti compatti e interfacce incentrate sui contenuti, dove i controlli nativi del browser sono sufficienti. Da solo, però, non trasforma un modulo in un'applicazione. Il JavaScript completo gestisce l'esempio di lettura, l'anteprima di revisione e il risultato locale, mentre il browser si occupa delle semantiche di base degli input.

Leggi la specifica di supporto

Variabili del tema e ruoli semantici del sistema di design di Pico CSS

Variabili del tema e ruoli semantici

Il ruolo primario predefinito non è un unico colore applicato indiscriminatamente. Pico distingue i valori per testo primario, sfondo, hover, focus e inversione. La tabella di riferimento riporta le definizioni effettive del tema chiaro, così da poter personalizzare il brand mantenendo le relazioni tra i colori. Le etichette dell'area di lettura usano il ruolo del testo primario; i pulsanti ereditano da Pico lo stile completo del componente.

L'interruttore dell'aspetto imposta data-theme su html. Un attributo esplicito light o dark prevale sulla selezione automatica dello schema colori. Se lo rimuovi, Pico può seguire la combinazione di colori preferita dal browser. La demo imposta esplicitamente la modalità iniziale per mantenere sincronizzati la casella di controllo e l'aspetto visivo. Quando introduci una palette primaria personalizzata, sovrascrivi entrambe le definizioni dello schema: modificare solo un valore della radice del tema chiaro non basta per ottenere un tema scuro completo.

Leggi la specifica di supporto

La tipografia reattiva modifica l'intera scala nel sistema di design di Pico CSS

La tipografia responsive modifica l’intera scala

Pico modifica la dimensione del font radice a diverse larghezze del viewport: inizialmente 100%, poi 106.25%, 112.5%, 118.75%, 125% e 131.25%. Con un valore predefinito del browser di 16px, corrispondono a 16–21px. Poiché la spaziatura dei componenti usa rem, anche la disposizione confortevole si espande insieme al testo. Un token descritto come un rem, quindi, non equivale sempre a sedici pixel.

Il cursore dell'esempio modifica solo #sample font-size, impostandolo come percentuale della dimensione ereditata. Non riscrive la variabile radice di Pico né le impostazioni di zoom del browser. Questa distinzione mantiene stabili i controlli delle impostazioni e chiarisce l'ambito locale della modifica. L'output nativo mostra la percentuale selezionata. Le dimensioni dei titoli mantengono i valori predefiniti di Pico: h1 è 2rem e h2 è 1.75rem.

Leggi la specifica di supporto

Lunghezza di riga e composizione di lettura nel sistema di design di Pico CSS

Lunghezza di riga e composizione di lettura

Le tre lunghezze di riga sono scelte originali espresse in unità ch. Impostano una larghezza massima, senza obbligare il testo a riempire la colonna. Su mobile, l'esempio può risultare più stretto del massimo selezionato: è il comportamento previsto per una larghezza massima reattiva. Non è necessario introdurre uno scorrimento orizzontale per rispettare una preferenza di larghezza maggiore.

Il layout di lettura personalizzato usa due colonne minmax e si dispone in una colonna sotto gli 800px. Questa soglia è specifica di questa composizione, non è un breakpoint ufficiale di Pico. I pulsanti di revisione e ripristino affiancati usano l'helper grid di Pico, mentre il piè di pagina della finestra di dialogo usa una riga flex con ritorno a capo. Sugli schermi stretti, la priorità è mantenere leggibile il pannello delle impostazioni, non conservare la disposizione a due colonne.

Leggi la specifica di supporto

Validazione nativa con un passaggio di revisione utile nel sistema di design di Pico CSS

Validazione nativa con un passaggio di revisione utile

Il nome del profilo usa required e minlength, con un breve testo di aiuto associato. La validazione dei vincoli nativa impedisce l'invio di un valore vuoto. Lo script aggiunge un controllo sul valore dopo aver rimosso gli spazi iniziali e finali, così una coppia di spazi non può soddisfare la regola dell'applicazione. Un evento invalid aggiunge aria-invalid per lo stile di errore di Pico; quando l'utente digita, l'errore personalizzato e l'attributo invalid non più attuale vengono rimossi.

Select e range sono normali controlli del browser. Aggiornano subito l'esempio di lettura, mentre Review profile acquisisce un oggetto temporaneo separato. Questa istantanea è il testo mostrato nella finestra di dialogo e i dati usati da Apply locally, così la conferma non descrive per errore un insieme di valori e ne applica un altro.

1. Lascia vuoto il nome del profilo e prova Review profile.
2. Inserisci un nome, scegli una larghezza e modifica la dimensione dell'esempio.
3. Controlla l'istantanea, annulla per continuare a modificare oppure applicala allo stato locale.

Leggi la specifica di supporto

Una vera finestra modale, non una semplice sovrapposizione stilizzata, nel sistema di design di Pico CSS

Una finestra di dialogo reale, non un semplice overlay stilizzato

Pico applica stili a dialog e al suo contenuto article, ma non fornisce JavaScript dell'applicazione. Questo esempio usa HTMLDialogElement.showModal. Il browser colloca la finestra di dialogo nel livello superiore, rende inerti gli altri contenuti del documento e consente la chiusura nativa con Escape. Impostare semplicemente l'attributo open produrrebbe un comportamento diverso, non modale, che qui non viene usato.

La finestra di dialogo usa aria-labelledby per fare riferimento al titolo. Il pulsante di chiusura ha un'etichetta accessibile esplicita, mentre Keep editing e Apply locally descrivono i due esiti possibili. Entrambi i pulsanti di annullamento chiamano close senza modificare lo stato salvato. L'applicazione registra il profilo temporaneo nel testo visibile e chiude la finestra di dialogo; non scrive in localStorage né invia richieste.

Leggi la specifica di supporto

Un elemento di disclosure nativo per le spiegazioni di supporto nel sistema di design di Pico CSS

Un disclosure nativo per le spiegazioni di supporto

La coppia details/summary spiega quali controlli influiscono sull'esempio e quali no. Si può espandere davvero, senza JavaScript, perché questo comportamento appartiene all'elemento HTML. Il riepilogo pone una domanda descrittiva e resta utilizzabile da tastiera. La spiegazione è un contenuto di supporto, quindi non interrompe il modulo principale con un altro pannello sempre aperto.

Non sostituire details con un titolo stilizzato solo perché l'immagine della versione chiusa sembra simile. Allo stesso modo, l'input dell'aspetto mantiene type=checkbox con role=switch, quindi ha un vero stato binario. Pico applica gli stili a strutture semantiche, che costituiscono gran parte del contratto d'interazione.

• article crea una superficie delle preferenze raggruppata visivamente.
• details e summary offrono un disclosure nativo.
• dialog aperto con showModal definisce un confine modale per la revisione.

Leggi la specifica di supporto

Installa una volta e mantieni riproducibile l'esempio nel sistema di design di Pico CSS

Installa una volta e mantieni riproducibile l'esempio

Il pacchetto standard contiene un file pico.min.css compilato. Copialo in una cartella locale assets, includilo prima delle regole di layout dell'applicazione e carica lo script app.js fornito usando defer. Il markup completo, CSS e lo script sono riportati sopra. Per questo esempio non servono provider di framework, font di icone o plugin JavaScript di terze parti.

Usa il foglio di stile standard in modo coerente con le relative classi container/grid. La build classless si basa su ipotesi di layout diverse, mentre la build conditional delimita in modo diverso l'ambito degli stili di Pico; scambiare queste distribuzioni senza verificare il markup non è un'ottimizzazione neutra. Se aggiungi Pico a un sito esistente, controlla come i suoi selettori degli elementi interagiscono con gli stili già presenti per moduli e tipografia prima di applicarlo globalmente.

Leggi la specifica di supporto

Scegli la distribuzione prima di adattare il markup nel sistema di design di Pico CSS

Scegli la distribuzione prima di adattare il markup

Questo esempio usa la distribuzione standard e i relativi helper container e grid. La distribuzione classless cambia le ipotesi di layout, mentre quella conditional delimita l'ambito degli stili di Pico. Considera la scelta della distribuzione una decisione d'integrazione, non un'ottimizzazione intercambiabile delle dimensioni dei file.

Su un sito esistente, esamina la portata dei selettori degli elementi su titoli, moduli, articoli e finestre di dialogo già presenti. La dimensione percentuale del font dell'esempio di lettura è una sovrascrittura locale e deve restare locale; modificare la scala radice cambierebbe anche la spaziatura e i controlli di Pico basati su rem. Quando decidi quali parti del documento ereditano il tema, mantieni allineati l'attributo dell'aspetto e i controlli delle preferenze dell'applicazione.

Leggi la specifica di supporto

Esempi di componenti del sistema di design di Pico CSS

<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>

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();

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}}