Al giorno d’oggi gran parte di chi visita internet lo fa da dispositivi mobili quali smartphone e tablet. Il traffico di visitatori che utilizza un computer è sempre in costante decrescita ormai da qualche anno.
Avere un sito web che si veda bene su schermi di piccole dimensioni è diventato di vitale importanza per non essere tagliati fuori e rimanere al passo coi tempi.
Oggi vado a proporvi una libreria CSS che utilizzo spesso quando voglio creare dei siti responsive che si basano su una struttura a griglia e che quindi si adattino perfettamente ad ogni risoluzione di display.
Alla fine dell’articolo trovate il link ad un piccolo template creato da me con l’aiuto di Simple Grid CSS che potete riutilizzare e riadattare per creare una vostra pagina personalizzata.
1. Simple Grid CSS
Simple Grid è una griglia CSS leggera a 12 colonne per aiutarti a creare rapidamente siti Web responsive. Basta aggiungere le classi appropriate al proprio markup ed il gioco è fatto.
Ogni colonna è contenuta all’interno di righe, che sono contenute in un contenitore. Il contenitore è impostato su una larghezza massima di 960 px, ma puoi modificarlo direttamente nel file css della libreria.
Qui di seguito il link al sito ufficiale della libreria dal quale si può effettuare il download e consultare la relativa documentazione.
2. Come funziona
La libreria si basa su un concetto di griglia formata da 12 colonne. Possiamo creare delle righe dove in ogni riga possiamo creare le nostre colonne specificando la dimensione della singola colonna su un totale di 12.
Qui di seguito una immagine per capire al meglio come funziona.
Molto semplicemente noi sviluppatori dobbiamo creare un div con classe “row” dentro il quale creare diversi div con classe “col-<numero>”, è più facile capirlo vedendo un esempio pratico.
<div class="container">
<div class="row">
<div class="col-3">
<!-- This content will take up 3/12 (or 1/4) of the container -->
</div>
<div class="col-3">
<!-- This content will take up 3/12 (or 1/4) of the container -->
</div>
<div class="col-6">
<!-- This content will take up 6/12 (or 1/2) of the container -->
</div>
</div>
</div>3. Template da scaricare
Cliccando il pulsante qui sotto partirà il download di un pacchetto zip contenente un piccolo concept di layout creato proprio utilizzando come base Simple Grid CSS.
4. Conclusioni
In conclusione consiglio questa libreria chiunque si stia affacciando al mondo del responsive e cerca una soluzione semplice e non invasiva che permette di avere strutture anche complesse scrivendo poche righe di codice.
Se hai qualche domanda a riguardo non esitare a lasciare un commento. ciao e alla prossima 🙂
