Da quanto si è visto finora, si sarà potuta apprezzare la potenza di questo framework per la strutturazione di layout a griglia. Ma come la mettiamo quando la griglia dovrà adattarsi in una prospettiva responsive?
L'approccio di inuit.css ci pare sotto questo aspetto uno dei più efficaci. Va solo spiegato nei dettagli.
Breakpoint e media query in inuit.css
Nel foglio di stile, subito dopo il blocco con la definizione delle classi per le varie proporzioni, quelle con il prefisso span-, troviamo tre sezioni racchiuse ciascuna in una media query. Queste media query rappresentano i breakpoint primari del nostro layout, i punti in cui potremmo avere necessità di modificare il layout perché si adatti al device di riferimento.
Possiamo impostarle come meglio crediamo, dipende solo dall'approccio che intendiamo seguire.
Noi le abbiamo settate così:
/* Mobile in modalità landscape */
@media only screen and (min-width: 480px) and (max-width: 599px) {
[...]
}
/* Tablet */
@media only screen and (min-width: 600px) and (max-width: 1024px) {
[...]
}
/* Desktop */
@media only screen and (min-width: 1025px) {
[...]
}Avendo seguito un approccio mobile first, nel nostro CSS le classi di base, quelle con il prefisso span- sono valide fino a una larghezza di 479px.
Tra i 480px e i 599px fissiamo un primo breakpoint: è rivolto genericamente agli schermi di smartphone in modalità landscape. Le classi hanno come prefisso mobile-.
Tra i 600px e i 1024px un secondo breakpoint, genericamente per i tablet. E il prefisso è in effetti tablet-.
Infine l'ultimo breakpoint, da 1025px in su, per gli schermi ad alta risoluzione: il prefisso delle classi è desktop-.
Come noterete, le classi impostate nelle tre media query sono di fatto identiche, nella sostanza, a quelle di base, cambia solo il prefisso! Può sembrare strano, ma capirete ben presto che è la chiave della semplicità di questo framework. Per adattare i CSS alle varie dimensioni degli schermi, infatti, non dovremo mettere mai mano alle regole CSS, niente annullamento di float, niente clear, niente di niente. Ci basterà usare nel modo più accorto i nomi delle classi.
Vediamo subito la quinta demo.
Nella prima riga vogliamo un unico blocco e vogliamo che si estenda per il 100% su tutti i dispositivi (meglio: per tutti i breakpoint). Scriveremo così nel codice HTML:
<div class="gc">
<div class="grid span-1 mobile-1 tablet-1 desktop-1">
[...]
</div>
</div>Dovrebbe essere chiaro: con la prima classe (span-1) diciamo 'estenditi per il 100% sugli smartphone'; con la terza (tablet-1), diciamo 'su tablet estenditi pure per il 100% della larghezza', e così via. In realtà, in questi casi basta usare solo span-1, perché non dobbiamo modificare il comportamento sugli altri breakpoint. Usiamo questa sintassi lunga solo per finalità didattiche.
Veniamo alla seconda riga. Tre elementi. Vogliamo che il primo occupi il 100% su mobile e tablet, il 33.333% su desktop:
<div class="grid span-1 tablet-1 desktop-1-3">Il secondo elemento. Su mobile sempre il 100% perché di fatto linearizziamo il layout e ciascun elemento occupa il 100% in larghezza. Ma su tablet (tra 600px e 1024px) vogliamo che occupi il 50% e su desktop (da 1025px in su) 1/3 della larghezza:
<div class="grid span-1 tablet-1-2 desktop-1-3">Non ci dilunghiamo ulteriormente. Lo studio della demo e della home page de 'Il Viaggio' dovrebbero essere sufficienti per una comprensione globale del meccanismo. Piuttosto, è bene spendere due parole sul metodo da seguire.
Se userete inuit.css per creare un layout a griglia non responsivo e adattabile, basterà usare le classi span-, senza preoccuparsi delle media query.
Se invece vorrete un sito responsivo, allora l'unica cosa che dovrete fare sarà impostare le media query e i breakpoint in base all'approccio che preferite. Quello da noi proposto è mobile first, per cui: classi di base e dimensioni a crescere con media query basate su min-width.
Ma potreste anche seguire un approccio desktop down, ovvero stili di base per il desktop e dimensioni a scendere con max-width:
/* Classi di base per il desktop */
/* Tablet */
@media only screen and (min-width: 600px) and (max-width: 1024px) {
[...]
}
/* Mobile */
@media only screen and (max-width: 600px) {
[...]
}A voi la scelta.