Guida a Pure.CSS, il framework CSS da 4Kb | Coders Italia
Guida a Pure.CSS, il framework CSS da 4Kb | Coders Italia
Lorenzo Campanile
Come usare Pure.CSS
La guida in italiano sul framework CSS di Yahoo!
Bene partiamo da un esempio semplicissimo!
<html>
<head>
<!-- Includo il titolo e il meta tag per la compatibilità con i dispositivi mobili -->
<title>Esempio Pure CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includo la libreria CSS -->
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<style>
.esempio_griglie
{
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<div class="esempio_griglie">
<div class="pure-g">
<div class="pure-u-1-3"><p>Prima colonna</p></div>
<div class="pure-u-1-3"><p>Seconda colonna</p></div>
<div class="pure-u-1-3"><p>Terza colonna</p></div>
</div>
</div>
</body>
</html>
Bene, ora provate a copiare e incollare questo esempio nel vostro editor (oppure nel nostro editor online se volete fare prima) e guardare il risultato.
Vedrete 3 div allineati, che si dividono la lunghezza dello schermo in tre parti esatte. Infatti il sistema a griglie di Pure.CSS può essere usato “a frazioni”. In questo caso viene usata la classe “pure-u-1-3” dunque ciascun div sarà largo 1/3 dello schermo.
Se volessimo dividere la lunghezza dello schermo tra due div allineati per esempio, basterebbe usare invece la classe “pure-u-1-2” ovvero che occuperà 1/2 (la metà) della lunghezza.
Dopo questo breve assaggio del framework, vediamo un attimo i motivi per il quale dovreste usare Pure.CSS
Perché usare Pure.CSS
Le caratteristiche di questo framework sono l’incredibile leggerezza, il fatto che consente di realizzare interfacce responsive (dunque che si adattano a smartphone e tablet) e che è Open-Source!
Delle ottime premesse no?
Inoltre Pure utilizza solo lo standard CSS (dunque niente dipendenze, Sass o simili) e non è dipendente da nessuna libreria esterna (come jQuery).
Si tratta di un framework minimale e che rimane uniforme. La cosa bella è che è stato pensato per semplificare al massimo la vita del designer visto che non avrete mai alcun bisogno di sovrascrivere le regole CSS.
Avanti con la guida!
Vediamo ora come usare Pure per un design responsive.
Prima di tutto spieghiamo le varie classi che Pure usa per creare i design responsive:
- “pure-u- *” imposta il contenitore per avere la lunghezza richiesta sempre, su ogni device
- “pure-u-SM- *” imposta il contenitore per avere la lunghezza richiesta sui device con schermo piccolo (ma comunque maggiore di 568px di larghezza)
- “pure-u-MD- *” imposta il contenitore per avere la lunghezza richiesta sui device con uno di medie dimensioni (maggiore di 768px di larghezza)
- “pure-u-LG- *” imposta il contenitore per avere la lunghezza richiesta sui device con schermo di larghe dimensioni (maggiore di 1024px di larghezza)
- “pure-u-XL- *” imposta il contenitore per avere la lunghezza richiesta sui device con schermo davvero grande (maggiore di 1280px di larghezza)
Bene a questo punto andiamo a vedere un esempio:
<html>
<head>
<!-- Imposto il titolo e il metatag per la compatibilità con i dispositivi mobili -->
<title>Contenitori Pure CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Includo la libreria per Pure.CSS e aggiungo la sua parte per le griglie -->
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<style>
.esempio_griglie
{
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.box_grigio
{
background: rgb(240, 240, 240);
border: 1px solid #ddd;
height: 70px;
}
</style>
</head>
<body>
<!-- Ecco un primo esempio di come funziona il design responsive -->
<div class="esempio_griglie">
<div class="pure-g">
<div class="pure-u-1-1"><div class="box_grigio"><p>Queste quattro colonne dovrebbero adattarsi a tutti gli schermi, dovrebbero essere larghe il 50% su schermi medi e il 25% su schermi larghi.</p></div></div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="box_grigio"><p>Prima colonna</p></div></div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="box_grigio"><p>Seconda colonna</p></div></div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="box_grigio"><p>Terza colonna</p></div></div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="box_grigio"><p>Quarta colonna</p></div></div>
</div>
</div>
<!-- Ecco un esempio di riga che dovrà occupare tutta la lunchezza pagina-->
<div class="esempio_griglie">
<div class="pure-g">
<div class="pure-u-1"><div class="box_grigio"><p>Questa colonna occupa completamente la larghezza della pagina</p></div></div>
</div>
</div>
<!-- In questo caso invece andiamo a occupare solo 2/5 della lunghezza della pagina -->
<div class="esempio_griglie">
<div class="pure-g">
<div class="pure-u-2-5"><div class="box_grigio"><p>Questa colonna invece occupa 2/5 della larghezza della pagina</p></div></div>
</div>
</div>
<!-- In questo caso facciamo 3/5 -->
<div class="esempio_griglie">
<div class="pure-g">
<div class="pure-u-3-5"><div class="box_grigio"><p>Questa invece ne occupa 3/5</p></div></div>
</div>
</div>
<!--Qui ritroviamo l'esempio iniziale di tre div che si dividono in parte uguale 1/3 della pagina -->
<div class="esempio_griglie">
<div class="pure-g">
<div class="pure-u-1-3"><div class="box_grigio"><p>Questa colonna occupa 1/3 dello spazio su tutti i dispositivi.</p></div></div>
<div class="pure-u-1-3"><div class="box_grigio"><p>Questa colonna occupa 1/3 dello spazio su tutti i dispositivi.</p></div></div>
<div class="pure-u-1-3"><div class="box_grigio"><p>Questa colonna occupa 1/3 dello spazio su tutti i dispositivi.</p></div></div>
</div>
</div>
</body>
</html>
Come vedete dal primo div di esempio vengono applicate diverse classi a ciascun div che dovrà adattarsi. La classe “pure-u-lg-1-4” farà in modo che su schermi larghi il div occuperà 1/4 della lunghezza mentre la classe “pure-u-md-1-2″ farà in modo che su schermi medi la lunghezza sarà della metà. Provate a ingrandire e diminuire la finestra per vedere il risultato.
Notate bene che ho dovuto includere un’altra parte della libreria pure per far funzionare le griglie (<link rel=”stylesheet” href=”https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css”>)
Un’altra cosa importante è che le dimensioni dei vari box (o div) responsive di Pure vengono gestite automaticamente, dunque evitate di impostare l’altezza ai div che hanno la classe “pure-u..”. Io infatti ho impostato l’altezza solo di “box_grigio” ovvero del contenuto del div Pure.
Come ultima cosa notate che non potete utilizzare tutte le classi che avete in mente. Dovete usare solo frazioni ridotte ai minimi termini, per esempio la classe “pure-u-2-6” non è disponibile, infatti dovrete in questo caso usare “pure-u-1-3” (2/6 = 1/3 per capirci).
Pure usa un sistema di griglie dove come denominatore potete usare i multipli e i divisori di 5 e 24 (dunque 2, 3, 4, 5, 6, 8, 9, 10, 12…).
Se volete la lista di tutte le classi disponibili la potete trovare sul sito di Pure.
Form, bottoni, menu e tabelle
Pure mette infine a disposizione una bella interfaccia per creare form, menu, bottoni e tabelle.
In questo caso trovate delle classi per indicare l’allineamento degli elementi.
La documentazione ufficiale è davvero semplice, basta guardare il codice per capire come funziona.
Di seguito vi lascio quindi i link agli esempi di codice che parlano letteralmente da soli, visto che sotto gli esempi di codice troverete anche una loro rappresentazione:
Dunque divertitevi! Alla prossima!