Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Funzionalità avanzate della griglia di Foundation

Ottenere layout complessi con la griglia di Foundation, gestire griglie annidate, creare colonne centrate e blocchi per immagini e altri elementi speciali.
Ottenere layout complessi con la griglia di Foundation, gestire griglie annidate, creare colonne centrate e blocchi per immagini e altri elementi speciali.
Link copiato negli appunti

La griglia di Foundation offre ulteriori funzionalità in grado di farci ottenere layout piuttosto complessi.

Meccanismo di offset

Come in molti framework CSS è disponibile un sistema per il cosiddetto offset delle colonne. Applicando ad una colonna una classe del tipo .large-offset-# o .small-offset-#, possiamo spostare la collocazione della colonna stessa nella riga per uno spazio corrispondente al numero specificato nella definizione della classe.

Figura 1 - Schema del meccanismo dell'offset
screenshot

Pertanto, una colonna così impostata

<div class="large-8 large-offset-3 columns">

occuperà uno spazio pari a 8 colonne (.large-8) e sarà spostata sul lato sinistro per uno spazio pari a 3 colonne (.large-offset-3). Lo spazio risultante non potrà essere occupato da altre colonne o elementi. Di fatto, l'offset è il sistema principale per distanziare le colonne tra di loro o rispetto ai lati esterni della riga. Ecco un esempio.

Annidamento

Anche questa caratteristica, quella di poter creare 'griglie nella griglia', è tipica di tutti i framework CSS. Consente un controllo molto preciso sul layout e la realizzazione di strutture anche molto complesse.

Figura 2 - Schema del meccanismo di annidamento
screenshot

L'implementazione è semplicissima. Per creare una griglia annidata basterà inserire un elemento con classe .row e al suo interno colonne con classe .small-# o .large-# all'interno di una colonna. Il numero di colonne annidate deve corrispondere al massimo, nella somma, a 12. Vediamo anche per questo scenario un esempio e la parte di codice rilevante:

<div class="row">
<div class="large-9 columns">2 - .large-9
 <div class="row">
  <div class="large-6 columns">.large-6 annidata</div>
  <div class="large-6 columns">.large-6 annidata</div>
 </div>
</div>
</div>

Colonne centrate

Possiamo anche centrare una colonna all'interno di una riga aggiungendo alla colonna stessa la classe .large-centered o .small-centered, a seconda che si voglia centrare su schermi grandi e/o piccoli. All'interno di una riga in cui trovi posto una colonna centrata, possiamo inserire solo quest'ultima.

Figura 3 - Colonne centrate
screenshot

Esempio.

Block grid

Strettamente correlato alla griglia e di straordinaria utilità è il componente Block Grid. Consente di strutturare sotto forma di griglia una serie di oggetti, si tratti delle immagini di una galleria o di semplici box con testo. La flessibilità è massima perché anche per questo componente possiamo impostare come meglio è necessario la griglia in base al breakpoint di riferimento.

Per configurare un blocco griglia si usa una lista ul. Ad essa va assegnata una classe del tipo small-block-grid-# o large-block-grid-#. Vediamo di capire come funziona.

Nell'esempio, nel primo layout, abbiamo inserito una serie di sette immagini per una galleria usando questo markup:

<ul class="large-block-grid-4">
  <li><img src="img/es-1.jpg"></li>
  <li><img src="img/es-2.jpg"></li>
  <li><img src="img/es-3.jpg"></li>
  <li><img src="img/es-4.jpg"></li>
  <li><img src="img/es-5.jpg"></li>
  <li><img src="img/es-6.jpg"></li>
  <li><img src="img/es-7.jpg"></li>
</ul>

Avendo usato la classe .large-block-grid-4, le immagini si dispongono su una griglia in cui la prima riga è occupata da 4 oggetti, gli altri si dispongono sotto automaticamente. La griglia mantiene questa struttura solo quando la finestra è larga almeno 768px. Sotto questa soglia, le immagini si dispongono automaticamente in base allo spazio disponibile, fino a quando non si trovano una sopra l'altra in un'unica colonna. Provate ad allargare e restringere la finestra del browser.

Nel secondo layout abbiamo invece usato la classe .small-block-grid-4. Come per la griglia principale, usando le classi .small facciamo sì che la griglia mantenga la stessa struttura su tutti gli schermi e su tutte le larghezze. Se restringete e allargate la finestra noterete che in questo caso la prima riga è occupata sempre da 4 immagini e la seconda da 3.

Nell'ultimo layout dell'esempio abbiamo applicato sia la classe .small sia la classe .large. È il modo per controllare la struttura e la disposizione degli elementi nei diversi breakpoint. Ecco il codice:

<ul class="small-block-grid-2 large-block-grid-4">

Classi per la visibilità degli elementi

Un ultimo strumento utile cui accennare è quello costituito dalle cosiddette 'classi di visibilità'. Si tratta, appunto, di classi definite nel contesto dei breakpoint con cui possiamo decidere di mostrare o nascondere selettivamente una certa sezione o un certo elemento presente sulla pagina in base al dispositivo e alle dimensioni dello schermo. La tabella riassume bene il quadro e i risultati che si ottengono usando questa o quella classe:

Figura 3 - Tabella riassuntiva delle classi di visibilità
screenshot

Ricordiamo comunque che in un contesto di responsive design che miri all'ottimizzazione delle performance e non solo del layout, sarebbe opportuno andare oltre il semplice mostrare/nascondere sezioni ed elementi via CSS, optando per una strategia di caricamento condizionale dei contenuti. Per una panoramica completa su questi aspetti rimandiamo alla Guida Responsive Design - Tecniche avanzate.

Ti consigliamo anche