Pure CSS · Marco Consiglio

🗺️ Cos'è Pure CSS — un set di piccoli moduli indipendenti

Pure CSS (di Yahoo) è un framework senza JavaScript: a differenza di Bootstrap o Materialize, che includono componenti interattivi (modal, dropdown, carousel) con script dedicato, Pure fornisce solo regole CSS per grid, form, tabelle, menu e pulsanti — la logica JavaScript, se serve, va scritta separatamente dallo sviluppatore.

Il vantaggio principale è il peso ridotto: l'intero framework pesa pochi KB, ed è pensato per essere modulare — si può includere solo il modulo grid, o solo quello form, senza scaricare l'intero pacchetto.

⚙️ Setup — includere solo i moduli necessari

<head> // il bundle completo, tutti i moduli insieme <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css"> // oppure, SOLO il modulo grid (più leggero): <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-min.css"> </head>

💡 Questa modularità è la differenza filosofica principale rispetto a Bootstrap: invece di un unico file CSS con tutto incluso, si sceglie ESPLICITAMENTE quali moduli caricare (grid, form, tabelle, menu, pulsanti), riducendo il peso della pagina a ciò che viene effettivamente usato.

⚠️ Nessuno script JS è richiesto per il funzionamento base di Pure — questo significa anche che componenti "attivi" come un menu a tendina che si apre al click NON funzionano automaticamente: va scritto JavaScript personalizzato per quella interattività, Pure fornisce solo lo stile.

🔢 Grid responsive — unità invece di colonne numerate

A differenza di Bootstrap/Materialize (grid a 12 colonne con classi come col-4), Pure usa il concetto di "unità" con frazioni esplicite nel nome della classe.

<div class="pure-g"> <div class="pure-u-1-3">Un terzo</div> <div class="pure-u-1-3">Un terzo</div> <div class="pure-u-1-3">Un terzo</div> </div> <div class="pure-g"> <div class="pure-u-1 pure-u-md-1-2"> Piena larghezza su mobile, metà su tablet </div> </div>

Anteprima pure-u-1-3 × 3

1-3

💡 pure-u-1-3 significa letteralmente "1 unità su 3 totali" (un terzo), pure-u-1-4 significa "1 su 4" (un quarto) — la frazione è esplicita nel nome, a differenza del sistema sempre-su-12 di Bootstrap; pure-u-1 (senza frazione) significa "intero" (100%).

⚠️ Bootstrap e Pure NON sono direttamente intercambiabili: col-4 presuppone sempre un totale di 12, mentre pure-u-1-3 è una frazione autosufficiente — mescolare le sintassi dei due framework nello stesso progetto produce risultati inattesi.

🧭 Menu — barra di navigazione

<div class="pure-menu pure-menu-horizontal"> <a href="#" class="pure-menu-heading">Marchio</a> <ul class="pure-menu-list"> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Chi siamo</a></li> </ul> </div>

Anteprima

⚠️ A differenza della navbar di Bootstrap, il menu Pure NON si comprime automaticamente in un'icona hamburger su mobile — quel comportamento va implementato manualmente con media query e/o JavaScript personalizzato, coerentemente con la filosofia "solo CSS, nessun JS incluso" del framework.

📊 Tabelle — stile pulito senza JavaScript

<table class="pure-table pure-table-striped"> <thead> <tr><th>Nome</th><th>Ruolo</th></tr> </thead> <tbody> <tr><td>Marco</td><td>Formatore</td></tr> </tbody> </table>

Anteprima

Nome	Ruolo
Marco	Formatore
Anna	Studente

💡 pure-table-striped alterna automaticamente lo sfondo delle righe (zebra striping) per migliorare la leggibilità di tabelle con molti dati — puro CSS con selettori :nth-child, nessun JavaScript necessario.

📝 Form minimal — stile essenziale, nessuna validazione integrata

<form class="pure-form pure-form-stacked"> <label for="nome">Nome</label> <input id="nome" type="text"> <label for="email">Email</label> <input id="email" type="email"> <button type="submit" class="pure-button pure-button-primary">Invia</button> </form>

⚠️ A differenza di Bootstrap (guida Forms/Validazione, con classe needs-validation e feedback visivo integrato), Pure NON fornisce alcun meccanismo di validazione visiva pronto: gli attributi HTML5 come required funzionano nativamente nel browser, ma il feedback stilizzato (bordi rossi/verdi) va scritto manualmente in CSS personalizzato.

✅ pure-form-stacked dispone label sopra il rispettivo input (impilati verticalmente); l'alternativa pure-form-aligned allinea le label a sinistra degli input, in colonna — due varianti di layout per esigenze diverse.

🧩 Applicazioni tipiche

Tipologia	Uso tipico
Siti a basso peso	Pagine dove le prestazioni di caricamento sono prioritarie (connessioni lente, dispositivi datati)
Componenti embed	Widget o iframe integrati in altri siti, dove un framework leggero riduce conflitti di stile
Prototipi minimal	Layout essenziali senza l'estetica specifica di Material Design o Bootstrap
Progetti con JS custom	Quando si vuole controllo JavaScript completo, senza comportamenti "già decisi" da un framework

🎓 Esercitazioni pratiche

Griglia a quarti con pure-u-1-4

Crea una riga pure-g con 4 elementi pure-u-1-4, poi rendila responsive con pure-u-1 pure-u-md-1-4 (piena larghezza su mobile, un quarto da tablet in su).

⏱ 20 min📦 1 file HTML💻 Individuale

Tabella dati con zebra striping

Costruisci una tabella con almeno 5 righe di dati usando pure-table-striped, verificando l'alternanza automatica dei colori di sfondo.

⏱ 15 min📦 1 file HTML💻 Individuale

Form stacked con pulsante primario

Crea un form pure-form-stacked con 3 campi (nome, email, messaggio) e un pulsante pure-button-primary, confrontandolo visivamente con la variante pure-form-aligned.

⏱ 20 min📦 1 file HTML💻 Individuale

Pure CSS — Framework modulare e leggero

Report Quiz

🎓 Attestato di Competenze sbloccato!