# Sistema di progettazione Pure CSS

## Anteprima dell’interfaccia del sistema di progettazione sistema di design Pure CSS

Filtra sei kit, ordina per nome, seleziona gli elementi disponibili e mantieni la selezione quando cambiano i filtri.

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

### Valori ufficiali per pulsanti e moduli

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| .pure-button padding | 0.5em 1em | Si adatta alla dimensione del testo ereditata dal pulsante. |
| .pure-button radius | 2px | Forma predefinita degli angoli del pulsante. |
| .pure-button background | #E6E6E6 | Riempimento neutro del pulsante. |
| .pure-button-primary background | rgb(0, 120, 231) | Riempimento primario/di selezione facoltativo. |
| .pure-button disabled opacity | 0.40 | Usa anche l’attributo disabled per il comportamento. |
| .pure-form input padding | 0.5em 0.6em | Spaziatura interna comune dei campi di testo. |
| .pure-form input border | 1px solid #ccc | Bordo predefinito dei campi di input. |
| .pure-form input radius | 4px | La forma del campo di input è diversa dal raggio degli angoli del pulsante. |
### Valori ufficiali della tabella

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| .pure-table border | 1px solid #cbcbcb | Bordo esterno della tabella. |
| .pure-table td / th padding | 0.5em 1em | Spaziatura leggibile delle celle. |
| .pure-table thead background | #e0e0e0 | Sfondo dell’intestazione di colonna. |
| .pure-table-striped odd-row fill | #f2f2f2 | La rigatura è facoltativa; questo esempio usa le linee orizzontali. |
| .pure-table-horizontal | Bottom borders only | Mantiene la struttura delle righe senza separatori verticali. |
### Limiti della griglia responsive

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| sm | 35.5em | 568px con un’impostazione predefinita del browser di 16px. |
| md | 48em | 768px; la barra laterale passa a un quarto della larghezza. |
| lg | 64em | 1024px. |
| xl | 80em | 1280px. |
| xxl | 120em | 1920px nella griglia responsive installata, versione 3.1.0. |
### Stile originale del catalogo

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Body | 16px / 1.5 Arial, Helvetica, sans-serif | Tipografia dell’applicazione definita esplicitamente. |
| Page heading | 34px / 1.15; 28px on mobile | Gerarchia editoriale originale. |
| Section heading | 18px / 1.3 | Barra laterale originale e titolo della selezione. |
| Content gutters | 24px desktop, 16px mobile | Spaziatura esterna originale. |
| Focus outline | 3px solid #0078e7; offset 3px | Miglioramento dell’applicazione rispetto al gradiente predefinito dello stato di focus del pulsante. |
| Table minimum width | 540px | Preserva il significato delle colonne in un’area con scorrimento locale. |
## Guida completa al sistema di design Pure CSS

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

1. Seleziona un registratore o una videocamera disponibili.

2. Applica un filtro a un’altra categoria e verifica che l’elemento selezionato rimanga nell’elenco di riepilogo.

3. Cancella la selezione per rimuovere tutti gli ID selezionati, indipendentemente dai filtri.

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

## sistema di design Pure CSS: installa e riproduci l’intero catalogo

### Installa e riproduci l’intero catalogo

Installa purecss@3.1.0, 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.

Leggi la specifica di supporto

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

Leggi la specifica di supporto

## Esempi di componenti del sistema di design Pure CSS

### Markup del catalogo con moduli Pure

Layout responsive a un quarto e tre quarti, modulo disposto in verticale e tabella con righe orizzontali.

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

Riferimento del codice

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

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

Riferimento del codice

- Il filtraggio non elimina di nascosto gli ID selezionati.

- Il testo di ricerca inserito dall’utente non diventa mai HTML.

### Tipografia dell’applicazione e CSS del focus

Un livello visivo completo che completa la libreria volutamente essenziale.

```
*{box-sizing:border-box}body{font:16px/1.5 Arial,Helvetica,sans-serif;color:#263238;background:#fff}.catalog{max-width:1120px;margin:auto;padding:32px 24px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em;margin:12px 0}h2{font-size:18px;line-height:1.3}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#435c68}header{border-bottom:3px solid #263238;padding-bottom:24px;margin-bottom:24px}.pure-g [class*=pure-u]{font-family:Arial,Helvetica,sans-serif}.sidebar{padding-right:24px}.results{padding-left:24px;border-left:1px solid #d7dfe3}.pure-form input[type=search],.pure-form select{width:100%;max-width:100%}.pure-form label{margin-top:16px}.selection{border-top:1px solid #d7dfe3;margin-top:28px;padding-top:20px;font-size:14px}.table-scroll{overflow:auto}table{width:100%;min-width:540px}.pure-table caption{text-align:left;font-style:normal;color:#52616a}.sort{border:0;background:none;padding:0;color:inherit;text-align:left;font-weight:700;cursor:pointer}.summary{padding:16px 20px;background:#f3f6f7;margin-top:24px}.summary p{font-size:14px;color:#52616a}.pure-button:focus-visible,.sort:focus-visible,.table-scroll:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0078e7;outline-offset:3px}#empty{padding:20px;border:1px dashed #83919a}@media(max-width:767px){.catalog{padding:24px 16px}h1{font-size:28px}.sidebar{padding:0}.results{padding:24px 0 0;border-left:0}.selection{margin-bottom:24px}}
```

Riferimento del codice

- Questi valori sono scelte originali dell’applicazione, non token ufficiali di Pure.

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

```
<!-- npm install purecss@3.1.0
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

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

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

- Repository ufficiale Confini dei moduli, file di build, inclusione della griglia responsive e licenza.

- Implementazione della griglia Contenitore della griglia e gestione del testo nelle unità.

- Origine del pacchetto Origine a livello di selettore, usata per verificare i moduli 3.1.0 installati.

## Risorse correlate al sistema di design Pure CSS

### Quasar

Un flusso guidato nativo Quasar con valori reali di marchio e spaziatura, convalida QForm, un creatore di brief in tre passaggi, opzioni radio per il formato e un’agenda dal vivo di quarantacinque minuti.

### React Native Elements

Crea un compositore completo di piani di concentrazione con React Native Elements 5.0.0: ruoli tema reali, input e selezioni controllati, convalida, conferma locale e build web verificata.

### React Suite

Un calendario di revisione nativo React Suite con variabili CSS v6 verificate, indicatori nelle celle delle date, agenda del giorno selezionato, convalida modale e regole esplicite per la pianificazione locale.


- [Riferimento per l’implementazione](https://github.com/pure-css/pure)
- [Fonte](https://github.com/pure-css/pure)
- [Leggi la specifica di supporto](https://github.com/pure-css/pure)
- [Riferimento del codice](https://github.com/pure-css/pure)
- [Repository ufficiale Confini dei moduli, file di build, inclusione della griglia responsive e licenza.](https://github.com/pure-css/pure)
- [Implementazione della griglia Contenitore della griglia e gestione del testo nelle unità.](https://github.com/pure-css/pure/blob/main/src/grids/css/grids-core.css)
- [Origine del pacchetto Origine a livello di selettore, usata per verificare i moduli 3.1.0 installati.](https://github.com/pure-css/pure/tree/main/src)