Pure CSS è un foglio di stile modulare per griglie, moduli, pulsanti, menu e tabelle, senza un runtime per i widget. Questa guida mostra come il modulo opzionale per la griglia responsive si integra con gli elementi semantici nativi in un catalogo di attrezzature filtrabile, con ordinamento e selezione implementati esplicitamente.
Riferimento di progettazione del sistema sistema di design Pure CSS
Moduli del pacchetto compilato Pure CSS 3.1.0. Sono valori letterali dei selettori, non un API di design token con nome: Pure non pubblica un tema con variabili CSS semantiche come Chakra o Pico. L’applicazione aggiunge tipografia, spaziatura del layout e un contorno di focus più marcato.
sistema di design Pure CSS: un piccolo insieme di moduli CSS
Un insieme essenziale di moduli CSS
Pure offre normalizzazione di base, griglie, pulsanti, moduli, menu e tabelle. Questo catalogo usa il bundle compilato del pacchetto e un file separato per la griglia responsive. Non importa un JavaScript framework, provider o runtime di widget. Il filtraggio, l’ordinamento e la selezione sono implementati nel codice dell’applicazione, riportato integralmente sopra.
Questa distinzione è importante quando si confronta Pure con una piattaforma completa di componenti. Una classe pure-table fornisce lo stile delle celle, ma non le funzionalità di ordinamento, impaginazione, virtualizzazione o selezione. Una classe pure-button aggiunge uno stile visivo utilizzabile su un pulsante nativo. L’esempio mantiene gli elementi semantici sottostanti, senza aspettarsi che i nomi delle classi creino comportamenti.
sistema di design Pure CSS: valori CSS letterali, non un sistema di token inventato
Valori CSS letterali, non un sistema di token inventato
Gli stili compilati dei pulsanti di Pure usano un riempimento neutro #E6E6E6, un raggio di 2px e una spaziatura interna basata su em. Il pulsante primario facoltativo usa rgb(0,120,231) con testo bianco. I campi dei moduli hanno un raggio di 4px e una spaziatura interna specifica. Il riferimento del sistema mostra queste differenze effettive, invece di uniformarle in una scala di raggi condivisa e fittizia.
Questo catalogo aggiunge una palette applicativa volutamente sobria: testo blu-grigio scuro, separatori neutri e un riepilogo della selezione con sfondo chiaro. Non sono colori ufficiali del marchio Pure. Non è disponibile un interruttore per la modalità scura, perché questa versione dell’esempio non implementa una palette alternativa completa per l’applicazione. Per cambiare tema, occorrerebbe intervenire insieme su moduli, intestazioni della tabella, bordi, testo e stati di focus.
sistema di design Pure CSS: tipografia e spaziatura appartengono all’applicazione
Tipografia e spaziatura appartengono all’applicazione
Il livello originale della pagina sceglie Arial/Helvetica a 16px con un’interlinea di 1.5, un’intestazione di 34px e titoli di sezione di 18px. Sugli schermi stretti, l’intestazione passa a 28px. Si tratta di scelte esplicite, non dell’affermazione che Pure prescriva una scala tipografica editoriale. L’esempio CSS include tutti i valori necessari per riprodurre la composizione.
La griglia di Pure regola la resa del testo e la spaziatura tra lettere sul contenitore della griglia per gestire le unità in linea. Le regole delle unità ripristinano il comportamento normale del testo. Il catalogo assegna inoltre la famiglia di caratteri alle unità della griglia, evitando cambi di carattere inattesi nella barra laterale e nei risultati. La spaziatura interna dell’applicazione è inserita nelle unità, con il dimensionamento border-box, così da mantenere inalterate le larghezze frazionarie.
sistema di design Pure CSS: le frazioni responsive richiedono il modulo responsive
Per le frazioni responsive serve il modulo responsive
La barra laterale combina pure-u-1 con pure-u-md-1-4; i risultati combinano pure-u-1 con pure-u-md-3-4. Inizialmente, entrambi occupano tutta la larghezza. Al limite del media query md, 48em, passano rispettivamente a un quarto e tre quarti della larghezza. Il filtro mantiene così una proporzione leggibile senza calcoli di layout JavaScript personalizzati.
Il bundle principale pure-min.css non include le classi responsive della griglia basate su media query. Se si dimentica grids-responsive-min.css, i modificatori md non hanno effetto. La configurazione carica esplicitamente entrambi i file. Sugli schermi mobili, la barra laterale precede la tabella e il bordo dei risultati viene rimosso, creando un flusso di lettura continuo.
sistema di design Pure CSS: il filtraggio è distinto dalla selezione
Il filtraggio è distinto dalla selezione
Il modulo disposto in verticale contiene un campo di ricerca con etichetta, un menu di selezione della categoria e una casella di controllo per la disponibilità. Ogni modifica a un campo aggiorna le righe visibili applicando tutte e tre le condizioni. L’invio del modulo viene impedito, così premendo Invio nel campo di ricerca non si abbandona la pagina. Cancella filtri richiama il ripristino nativo e aggiorna i risultati dopo che il browser ha ripristinato i valori predefiniti.
La selezione è memorizzata in un Set di ID stabili dei kit. Nascondere con un filtro un elemento selezionato non lo rimuove dal Set. L’elenco di riepilogo, sempre visibile, rimane quindi il riferimento per gli elementi selezionati. Questo comportamento è spiegato accanto al conteggio della selezione; altrimenti, l’utente potrebbe scambiare le righe nascoste dal filtro per attrezzatura deselezionata.
Seleziona un registratore o una videocamera disponibili.
Applica un filtro a un’altra categoria e verifica che l’elemento selezionato rimanga nell’elenco di riepilogo.
Cancella la selezione per rimuovere tutti gli ID selezionati, indipendentemente dai filtri.
sistema di design Pure CSS: mantieni il significato della tabella sugli schermi stretti
Mantieni il significato della tabella sugli schermi stretti
La tabella usa gli elementi caption, thead e tbody, oltre agli attributi scope per le intestazioni di colonna. L’intestazione Attrezzatura contiene un pulsante nativo che inverte l’ordine dei nomi. Al relativo elemento th viene assegnato aria-sort=ascending o descending, in corrispondenza della freccia visibile. Tutte le righe mantengono la stessa struttura di colonne durante l’ordinamento.
Una larghezza minima di 540px preserva il significato di Seleziona, Attrezzatura, Categoria e Disponibilità. Sugli schermi stretti, solo l’area della tabella con etichetta scorre orizzontalmente. È possibile spostare il focus da tastiera su quest’area, che mostra un contorno di focus visibile. La pagina non si allarga. È una scelta intenzionale per la visualizzazione dei dati in tabella, anziché forzare ogni riga in una scheda visivamente scollegata.
sistema di design Pure CSS: gli stati disabilitato, vuoto e di focus richiedono comportamenti effettivi
Gli stati disabilitato, vuoto e di focus richiedono comportamenti effettivi
Gli articoli in prestito rimangono nell’elenco per indicare la disponibilità, ma non possono essere selezionati: le relative caselle di controllo native sono disabilitate. Anche Cancella selezione è disabilitato quando il Set è vuoto. La regola di opacità di Pure contribuisce a comunicare lo stato disabilitato, ma è l’attributo HTML a impedire l’attivazione.
Se un filtro non restituisce risultati, viene mostrato un messaggio specifico di stato vuoto e le intestazioni restano visibili. Il conteggio dei risultati è una regione di stato cortese. Il foglio di stile originale aggiunge un contorno evidente a focus-visible, perché lo stile di focus predefinito dei pulsanti Pure è un gradiente con il contorno azzerato; in questo strumento interattivo è utile un indicatore da tastiera più chiaro.
Le caselle di controllo disabilitate indicano i kit non disponibili senza rimuoverne le righe.
Lo stato vuoto spiega come ripristinare i risultati cancellando i filtri.
I contorni di focus si applicano a pulsanti, campi di input, menu di selezione e area di scorrimento.
sistema di design Pure CSS: installa e riproduci l’intero catalogo
Installa e riproduci l’intero catalogo
Installa [email protected], copia pure-min.css e grids-responsive-min.css nella directory locale degli asset e includili in quest’ordine, prima di style.css. Sopra sono forniti il body completo, lo script dell’applicazione e CSS. Un server statico può servire i file risultanti; il catalogo non richiede un runtime di compilazione.
I moduli del pacchetto sono disponibili anche separatamente, se le dimensioni del bundle richiedono una selezione più mirata. Mantieni coerenti le dipendenze di base e della griglia quando riduci CSS. Non copiare solo il foglio di stile della tabella dando per scontato che le classi dei moduli o dei pulsanti continuino a essere formattate. Questo esempio privilegia una configurazione completa e riproducibile rispetto a un bundle parziale non spiegato.
sistema di design Pure CSS: scegli i moduli CSS senza perdere le relative dipendenze
Scegli i moduli CSS senza perderne le dipendenze
Il bundle compilato applica lo stile ai pulsanti, ai moduli e alla tabella del catalogo, mentre grids-responsive-min.css fornisce le frazioni condizionate dai punti di interruzione. Rimuovere il file responsive non genera errori: le classi md semplicemente non modificano più il layout. Quando riduci il numero di moduli importati, verifica il comportamento risultante delle colonne.
Le unità della griglia ripristinano inoltre il comportamento del testo modificato dal contenitore della griglia per il layout in linea. Mantieni l’assegnazione del carattere dell’applicazione sulle unità e inserisci la spaziatura interna al loro interno, usando il dimensionamento border-box. Se in seguito il catalogo includerà l’impaginazione, conserva la selezione nello stato dell’applicazione usando ID stabili: né CSS della tabella né una frazione della griglia implementano questo comportamento.
grids-responsive-min.css viene caricato separatamente.
Per le caselle di controllo degli articoli in prestito si usa disabled, non solo uno stile attenuato.
Stato di filtro, ordinamento e selezione
Il comportamento originale visualizza sei record di esempio fissi e mantiene la selezione tramite ID stabili.
javascript
const data=[{id:'c1',name:'Compact camera kit',kind:'Camera',available:true},{id:'c2',name:'Cinema camera kit',kind:'Camera',available:false},{id:'a1',name:'Field recorder',kind:'Audio',available:true},{id:'a2',name:'Wireless microphone pair',kind:'Audio',available:true},{id:'l1',name:'Portable LED panel',kind:'Lighting',available:false},{id:'l2',name:'Softbox lighting kit',kind:'Lighting',available:true}];const selected=new Set();let ascending=true;const $=id=>document.getElementById(id);
function selection(){ $('selected-count').textContent=selected.size+(selected.size===1?' item selected':' items selected');$('clear-selection').disabled=!selected.size;const list=$('selection-list');list.replaceChildren();for(const x of data.filter(x=>selected.has(x.id))){const li=document.createElement('li');li.textContent=x.name;list.append(li);}if(!selected.size){const li=document.createElement('li');li.textContent='No equipment selected.';list.append(li);}}
function render(){const query=$('query').value.toLowerCase().trim();const visible=data.filter(x=>x.name.toLowerCase().includes(query)&&($('kind').value==='all'||x.kind===$('kind').value)&&(!$('available').checked||x.available)).sort((a,b)=>(ascending?1:-1)*a.name.localeCompare(b.name));$('count').textContent=visible.length+' of '+data.length+' kits shown';$('empty').hidden=visible.length!==0;$('rows').replaceChildren();for(const x of visible){const tr=document.createElement('tr');const choice=document.createElement('td');const input=document.createElement('input');input.type='checkbox';input.disabled=!x.available;input.checked=selected.has(x.id);input.setAttribute('aria-label','Select '+x.name);input.addEventListener('change',()=>{input.checked?selected.add(x.id):selected.delete(x.id);selection()});choice.append(input);tr.append(choice);for(const value of [x.name,x.kind,x.available?'Available':'On loan']){const td=document.createElement('td');td.textContent=value;tr.append(td);}$('rows').append(tr);}selection();}
$('filters').addEventListener('input',render);$('filters').addEventListener('submit',e=>e.preventDefault());$('filters').addEventListener('reset',()=>setTimeout(render,0));$('sort').addEventListener('click',()=>{ascending=!ascending;$('sort').textContent='Equipment '+(ascending?'↑':'↓');$('sort').parentElement.setAttribute('aria-sort',ascending?'ascending':'descending');render()});$('clear-selection').addEventListener('click',()=>{selected.clear();render()});render();
Questi valori sono scelte originali dell’applicazione, non token ufficiali di Pure.
04
Configurazione dell’agente AI per il sistema di design Pure CSS
Punto di partenza per l’implementazione
Salva gli esempi CSS e JavaScript come style.css e app.js. Le classi media della griglia responsive si trovano in un file separato. L’anteprima offline incorpora entrambi i fogli di stile ufficiali e il codice originale dell’applicazione. Il wrapper HTML include tutto il markup del body; salva gli esempi forniti per le interazioni e CSS usando i nomi di file indicati qui.
html
<!-- npm install [email protected]
mkdir -p assets
cp node_modules/purecss/build/pure-min.css assets/
cp node_modules/purecss/build/grids-responsive-min.css assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Equipment catalog</title>
<link rel="stylesheet" href="assets/pure-min.css">
<link rel="stylesheet" href="assets/grids-responsive-min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
</body></html>
Un prompt per il tuo progetto
Prompt per l’agente
Crea l’interfaccia usando il catalogo di attrezzatura Pure CSS 3.1.0 fornito e carica sia pure-min.css sia grids-responsive-min.css. Mantieni le unità responsive della griglia da un quarto e tre quarti, i filtri con etichetta, una tabella semantica ordinabile e la relativa area di scorrimento orizzontale contenuta. Combina i filtri di ricerca, categoria e disponibilità senza cancellare gli ID selezionati. Mantieni disattivate le caselle di controllo degli articoli in prestito, aggiorna aria-sort quando si inverte l’ordinamento della colonna Attrezzatura e conserva nell’elenco di revisione gli articoli selezionati anche quando i filtri li nascondono. La selezione è locale e non deve essere presentata come una prenotazione.
05
Fonti e ambito del sistema di design Pure CSS
Pure CSS 3.1.0. I valori dei selettori sono quelli ufficiali del pacchetto; tipografia, colori, spaziature e comportamento dell’applicazione del catalogo sono originali. Non viene effettuata alcuna prenotazione.
