Come scegliere la giusta griglia di fondazione

Nel video di oggi parleremo dei tre sistemi di rete che sono attualmente presenti nel framework della Fondazione ZURB. Più in particolare, esamineremo quale di questi dovremmo usare in varie situazioni. Saltiamo dentro!

Abbiamo creato una guida completa per aiutarti a imparare Foundation, sia che tu stia appena iniziando o che desideri esplorare argomenti più avanzati Scopri la Fondazione.

Scegliere una griglia di fondazione

1. La griglia galleggiante

La prima e più lunga porzione delle griglie della Fondazione è la griglia mobile. Come suggerisce il nome, utilizza colonne flottate per creare layout.

Il markup ti sarà probabilmente familiare; usa la stessa struttura di righe e colonne trovata su altri sistemi:

 
2
 
10
 
 
 
3
 
9
 

2. La griglia flessibile

Il secondo esempio è stato introdotto in Foundation 6 e si chiama "la rete flessibile". È alimentato dalla CSSbox CSS e, sebbene si comporti in modo molto simile alla griglia piatta, ha alcune caratteristiche uniche come l'allineamento verticale e orizzontale e il dimensionamento automatico.

Il markup è esattamente uguale alla griglia float; definisci righe e colonne e, utilizzando le classi speciali, puoi determinare la dimensione di tali colonne. Tuttavia, poiché questa griglia è basata su Flexbox, abbiamo accesso ad alcune funzionalità più avanzate. L'autosizing è una di queste funzionalità; se omettiamo una classe di dimensionamento su una colonna, essa si espanderà per riempire lo spazio disponibile:

 
2
 
nessun dimensionamento
 
 
 
3
 
nessun dimensionamento
 

In alternativa, utilizzando a contrarsi la classe ridurrà la colonna alla dimensione minima richiesta dal suo contenuto:

 
2
 
contrarsi
 
 
 
3
 
contrarsi
 

Per ulteriori esempi, controlla lo screencast qui sopra.

3. La griglia XY

Il nostro terzo esempio è la griglia più recente (e secondo me la più impressionante); la griglia XY, introdotta in Foundation 6.4. Pur essendo alimentato dalla flexbox, presenta alcune analogie con la rete flessibile, ma ci sono anche alcune grandi differenze.

La prima differenza significativa è che la griglia XY può rendere gli oggetti sia orizzontalmente che verticalmente.

La seconda differenza è il markup. Qui definiamo un elemento contenitore (con una classe di grid-x o grid-y) e poi riempirlo con cellula elementi:

 
4
 
2
 
6
 

Di default non c'è nessuna grondaia, quindi tutte le celle si posizionano a filo con le celle circostanti. Invece, definiamo la grondaia sul grid-x elemento: grid-margin-x o grid-padding-x (sostituendo il X per un y se abbiamo a che fare con una griglia verticale). I valori che portano possono essere impostati usando le variabili Sass $ grid-margin-grondaie e $ grid-padding-grondaie rispettivamente. 

Quale griglia di base dovresti scegliere?

Quando si sceglie la griglia da utilizzare, la decisione deve essere presa sulla base di alcuni fattori.

1. Il supporto del browser è il più importante, in quanto il flexbox non ha il supporto universale (in questo caso IE è il browser discutibile). La griglia mobile non è influenzata dal supporto di Flexbox nei browser.
2. In secondo luogo, hai bisogno di un layout di griglia verticale? Se è così, devi andare per la griglia XY.
3. Infine, quanto è importante la velocità e la manutenzione della scrittura del codice? La griglia XY utilizza una sintassi molto più semplice rispetto ai suoi predecessori, quindi sarà molto più facile lavorare con.

Per maggiori dettagli, guarda lo screencast qui sopra, o dai uno sguardo ai miei corsi più recenti!

• Conoscere la Fondazione XY Grid Tuts + Corso
• Advanced Foundation: utilizzo del tutorial ZURB Stack Tuts +
• Guida introduttiva con Foundation Building Blocks Tuts + Corso