CONFIGURAZIONE – 1
Come per tutti i componenti di uikit, anche in questo caso per poter utilizzare una Griglia all’interno del nostro sito le operazioni da fare, di base, sono due:
- replicare il markup HTML previsto da questo componente
- assegnare ai diversi elementi del suddetto markup le classi e/o gli attributi corretti secondo quanto indicato nella documentazione ufficiale del framework
A livello di markup la Griglia è costituita da un elemento contenitore (es. un < div >) più esterno, che individua il contenitore della Griglia, all’interno del quale andranno poi inseriti tanti elementi contenitore (es. tanti < div >) quanti sono i blocchi di contenuti e quindi le colonne che si desidera inserire nella griglia stessa
Per quel che riguarda invece le classi da assegnare ai diversi elementi di questo markup:
- al contenitore più esterno dovrà essere assegnata la classe .uk-grid,
- ai contenitori interni alla griglia dovrà essere assegnata una classe .uk-width-* dove il carattere * dovrà essere sostituito da un sistema di due numeri il primo dei quali indica quante colonne dovranno essere effettivamente occupate da quello specifico componente rispetto al totale in cui si è pensato di suddividere la griglia, mentre il secondo indica proprio questo totale.
ATTENZIONE! La classe .uk-width-* è quella che determina l’effettiva larghezza che andrà ad assumere all’interno della griglia un blocco di contenuti
Supponendo dunque di assegnare ad un blocco di contenuti interno alla griglia la classe .uk-width-1-3, ciò starà a significare che si è pensato di suddividere la griglia in 3 distinte colonne e il blocco di contenuti in oggetto andrà ad occupare una sola di queste colonne.
Seguendo questa logica sulla stessa riga potranno quindi essere inseriti:
- altri due distinti blocchi di contenuti a ciascuno dei quali dovrà essere assegnata la classe .uk-width-1-3 in maniera tale che ciascuno di essi occupi una delle restanti due colonne
- un solo altro blocco di contenuti al quale assegnare la classe .uk-width-2-3 in maniera tale che occupi tutte e due le restanti colonne
Nel primo caso (tre distinte colonne di contenuti ciascuna delle quali occuperà 1/3 dello spazio disponibile) dovremo quindi avere, complessivamente, un markup di questo tipo
<div class="uk-grid">
<div class="uk-width-1-3">
.../*Contenuti della prima colonna*/
</div>
<div class="uk-width-1-3">
.../*Contenuti della seconda colonna*/
</div>
<div class="uk-width-1-3">
.../*Contenuti della terza colonna*/
</div>
</div>
Nel secondo caso (due distinte colonne di contenuti, la prima che occupa 1/3 dello spazio disponibile e la secondo i restanti 2/3) dovremo invece avere, complessivamente, un markup di questo tipo
<div class="uk-grid">
<div class="uk-width-1-3">
.../*Contenuti della prima colonna*/
</div>
<div class="uk-width-2-3">
.../*Contenuti della seconda colonna*/
</div>
</div>
Considerando che, come precedentemente evidenziato, la Griglia è in grado di supportare 1,2,3,4,5,6 o 10 colonne, la tabella seguente mostra l’insieme di classi che, in generale, possono essere applicate ai blocchi di contenuti interni ad essa.
CLASSE | DESCRIZIONE |
.uk-width-1-1 | La griglia è suddivisa in una sola colonna. Può ospitare un solo blocco di contenuti che occuperà il 100% della sua larghezza |
.uk-width-1-2 | La griglia è suddivisa in 2 colonne. Può ospitare due distinti blocchi di contenuti ciascuno dei quali occuperà il 50% della sua larghezza |
Da .uk-width-1-3 a .uk-width-2-3 | La griglia è suddivisa in 3 colonne. Può ospitare: -) tre distinti blocchi di contenuti ciascuno dei quali occuperà 1/3 della sua larghezza -) due distinti blocchi di contenuti uno che occupi 1/3 della larghezza e l’altro i restanti 2/3 |
Da .uk-width-1-4 a .uk-width-3-4 | La griglia è suddivisa in 4 colonne. Può ospitare: -) quattro distinti blocchi di contenuti ciascuno dei quali occuperà 1/4 della sua larghezza -) due distinti blocchi di contenuti uno che occupi 1/4 della larghezza e l’altro i restanti 3/4 -) due distinti blocchi di contenuti uno che occupi 2/4 della larghezza e l’altro i restanti 2/4 |
Da .uk-width-1-5 a .uk-width-4-5 | La griglia è suddivisa in 5 colonne. Può ospitare: -) cinque distinti blocchi di contenuti ciascuno dei quali occuperà 1/5 della sua larghezza -) due distinti blocchi di contenuti uno che occupi 1/5 della larghezza e l’altro i restanti 4/5 -) due distinti blocchi di contenuti uno che occupi 2/5 della larghezza e l’altro i restanti 3/5 -) tre distinti blocchi di contenuti due che occupino 2/5 della larghezza e l’altro i restanti 1/5 |
Da .uk-width-1-6 a .uk-width-5-6 | La griglia è suddivisa in 6 colonne. Può ospitare: -) sei distinti blocchi di contenuti ciascuno dei quali occuperà 1/6 della sua larghezza -) due distinti blocchi di contenuti uno che occupi 1/6 della larghezza e l’altro i restanti 5/6 -) due distinti blocchi di contenuti uno che occupi 2/6 della larghezza e l’altro i restanti 4/6 -) tre distinti blocchi di contenuti ciascuno dei quali occuperà 2/6 della sua larghezza -) …. |
Da .uk-width-1-10 a .uk-width-9-10 | La griglia è suddivisa in 10 colonne. Può ospitare: -) dieci distinti blocchi di contenuti ciascuno dei quali occuperà 1/10 della sua larghezza -) due distinti blocchi di contenuti uno che occupi 1/10 della larghezza e l’altro i restanti 9/10 -) due distinti blocchi di contenuti uno che occupi 2/10 della larghezza e l’altro i restanti 8/10 -) …. |
ATTENZIONE! Come è semplice comprendere il sistema appena descritto, ed utilizzato per dimensionare in larghezza i blocchi di contenuti interni alla griglia, è ridondante nel senso che, ad esempio, le classi .uk-width-1-2, .uk-width-2-4, .uk-width-3-6 e .uk-width-5-10 portano tutte a fare in modo che il blocco di contenuti al quale vengono applicate occupi, in larghezza, il 50% dello spazio complessivo a disposizione della griglia.
Un’ultima considerazione estremamente importante da fare, in relazione soprattutto al fatto di voler poi implementare questa componente all’interno del proprio sito Passweb, è quella che riguarda il valore della proprietà float assegnato agli elementi “strutturali” della Griglia.
In questo senso è bene chiarire che:
- uikit non assegna gli elementi strutturali della griglia (ne al contenitore esterno ne tanto meno ai singoli blocchi di contenuto in esso inseriti) uno specifico valore per la proprietà float, il che equivale esattamente, come noto, ad impostare per questi stessi elementi la proprietà float sul valore none