Il Mondo è mobile, questo è un dato di fatto.
Il primo dato da ricordare quando realizziamo i nostri siti web è che gli utenti che vi accederanno da smartphone saranno molto più di quelli che lo faranno da desktop. Diventa, quindi un obbligo, tenere in alta considerazione la visualizzazione dai device mobile.
Tra i framework più famosi per aiutarci a controllare questo aspetto c’è Bootstrap di Twitter, arrivato, in questo momento, alla versione stabile 3.3.7 con la 4 alle porte, ma state tranquilli, ci vorrà ancora un pò per la release definitiva.
Installare Bootstrap è semplicissimo e richiede veramente pochissimi passaggi, indicati direttamente nel sito ufficiale, ma non è questo di cui ci occuperemo oggi, quindi partiamo dal presupposto di aver già eseguito l’installazione.
Nei prossimi mesi torneremo spesso a parlare di questo strumento quindi rimanete connessi al nostro blog perché ci saranno delle sorprese.
Parliamo subito della famosissima e ben nota griglia fluida (o grid system che dir si voglia). Tranquilli se non la conoscete ancora. La guida è qui a posta per voi.
Notiamo subito, dalla sezione CSS del sito ufficiale, quale utilizzo faccia questo CSS precompilato delle media queries.
Mentre, nella seconda figura, possiamo farci un idea di come vengano gestite le classi corrispondenti agli elementi che vogliamo mantenere in linea, nelle varie risoluzioni.
In parole povere Bootstrap assegna 4 valori possibili alla gestione responsive delle classi, applicabili tenendo sempre conto che la griglia, sia questa definita in container-fluid (fullsize), o container (vedi misure sopra), lavora su un massimo di 12 colonne.
Abbiamo quindi:
- una classe col-lg (large) che porterà tutto di blocco sotto i 1200px di larghezza;
- una classe col-md (medium) che porterà tutto di blocco sotto i 992px di larghezza;
- una classe col-sm (small) che porterà tutto di blocco sotto i 768px di larghezza;
- una classe col-xs (extra small) che non porterà mai la situazione di blocco ma manterrà sempre in linea.
Partiamo dalla versione desktop ovvero dai 1200px in sù.
Dalle figure qui sotto, si può subito notare che tutti gli elementi sono distribuiti su 3 colonne.
Ecco degli esempi chiarificatori del funzionamento di queste classi sul campo.
Vediamo quindi come si comportano le classi lg una volta scesi sotto i 1200px di larghezza. Mentre tutte le altre rimangono allineate le prime modificano la loro struttura in block andando di fatto una sotto l’altra.
Stesso comportamento avranno le classi md ma questa volta solamente una volta scesi sotto i 992px.
Idem, come sopra per le sm, una volta scesi sotto i 768px. Vediamo sempre in figura come rimangono e rimarranno invariate le dinamiche relative alle xs che si mantengono in linea anche negli step successivi.
A questo punto l’unica difficoltà è decidere quali utilizzare a seconda del progetto che stiamo realizzando.
Nell’ultima figura riassuntiva vediamo come le media queries di Bootstrap vadano a gestire la definizione delle classi da noi utilizzate, ovvero quelle da 4 per ottenere 3 colonne (4 + 4 + 4 = 12).
Notiamo, infine, come non venga definita una queries per le xs, mentre per tutte le altre, una volta superata la risoluzione richiesta, i parametri portano questi elementi ad occupare tutto lo spazio disponibile all’interno della riga.
Non è stato troppo complicato.
A presto con moltissime info su come sfruttare al meglio questo diffusissimo framework.
Intanto, se volete, potete lasciarci un vostro commento.
Ancora nessun commento