Layout: righe e colonne

Dopo avere analizzato le funzionalità di base offerte da w3.css, possiamo passare finalmente allo studio delle funzionalità avanzate. Una di queste, fondamentale, riguarda la costruzione di layout. Il framework w3.css offre svariate opzioni per realizzare layout fluidi, responsive e con un uso di codice sempre minimale. La prima opzione riguarda la realizzazione di layout tramite griglie di righe e colonne.

Il concetto è molto semplice: la pagina viene concettualmente suddivisa in righe, e queste saranno costituite da un numero variabile di colonne che andranno a rappresentare le differenti sezioni di una pagina. La logica di base è simile a quella utilizzata nei primi periodi dell'HTML 4, quando i layout venivano prodotti facendo largo uso del tag "table". Nel nostro caso utilizzeremo il tag div (o i tag semantici dell'HTML5). Con questa strategia è possibile realizzare qualsiasi tipo di layout HTML desiderato.

Costruire le righe

Come abbiamo detto, ogni sezione della pagina appartiene ad una riga. Una "riga" è un contenitore di sezioni, e si produce applicando le seguenti classi:

• w3-row: produce un contenitore responsive per le sezioni della pagina (colonne) senza l'aggiunta di padding
• w3-row-padding: produce un contenitore responsive per le sezioni della pagina (colonne) con l'aggiunta di padding orizzontale (a sinistra e a destra) di 8px

<div class="w3-row">
... contenuto della righa
</div>
<div class="w3-row-padding">
... contenuto della righa
</div>

Aggiungere le colonne

Dopo aver inserito una riga, passiamo allo step successivo: l'introduzione nelle righe stesse di colonne. Le colonne sono delle divisioni del container riga in cui le dimensioni orizzontali possono essere impostate attraverso le classi dinamiche di w3.css. Ne esistono di molti tipi:

• w3-half: produce una colonna le cui dimensioni coprono 1/2 delle dimensioni della riga che le contiene
• w3-third: produce una colonna le cui dimensioni coprono 1/3 delle dimensioni della riga che le contiene
• w3-twothird: produce una colonna le cui dimensioni coprono 2/3 delle dimensioni della riga che le contiene
• w3-quarter: produce una colonna le cui dimensioni coprono 1/4 delle dimensioni della riga che le contiene
• w3-threequarter: produce una colonna le cui dimensioni coprono 3/4 delle dimensioni della riga che le contiene
• w3-rest: produce una colonna le cui dimensioni coprono lo spazio rimanente in base alle colonne presenti ed alle dimensioni della riga che le contiene
• w3-col: produce una colonna di dimensioni variabili

Nota: le dimensioni di ogni colonna sono calcolati dinamicamente in base alla presenza di altre colonne ed in base alle dimensioni della riga contenitrice. La struttura del layout si compone, nella versione standard, come una serie di 12 colonne per ogni riga.

Con l'utilizzo di queste classi è possibile ottenere una moltitudine di effetti combinati per produrre ogni tipologia di layout desiderata. Vediamoli.

1/2 - 1/2

Divisione di una riga in due colonne di uguali dimensioni:

<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>

1/3 - 1/3 - 1/3

Divisione di una riga in tre colonne di uguali dimensioni:

<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>

2/3 - 1/3

Divisione di una riga in due colonne, una con dimensioni pari a 2/3 della riga, una con dimensioni pari a 1/3 della riga:

<div class="w3-row">
<div class="w3-green w3-container w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>

1/4 - 1/4 - 1/4 - 1/4

Divisione di una riga in quattro colonne di uguali dimensioni:

<div class="w3-row">
<div class="w3-green w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>

3/4

Divisione di una riga in due colonne, una con dimensioni pari a 3/4 della riga, una con dimensioni pari a 1/4 della riga:

<div class="w3-row">
<div class="w3-green w3-container w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>

Combo

Come abbiamo detto, possiamo prenderci la libertà di produrre tutte le combinazioni possibili per generare strutture differenti:

• 1/4 - 1/2 - 1/4
• 1/4 - 1/4 - 1/2
• 1/2 - 1/4 - 1/4
• 1/3 - 2/3
• 1/4 - 3/4

<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a paragraph.</p>
</div>
</div>
</div>
</div>

Spazio rimanente

Se le classi precedenti producevano una dimensione dinamica basandosi su stesse, la classe w3-rest produce una colonna di dimensioni dinamiche basandosi sulle altre colonne. Un div con questa classe collocato in una riga andrà infatti ad occupare tutto lo spazio rimanente:

<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest w3-green"><p>rest</p></div>
</div>

Anche in questo caso lo spazio rimanente può essere calcolato in ognuna delle combinazioni possibili:

<div class="w3-row">
<div class="w3-col w3-container w3-blue" style="width:150px"><p>150px</p></div>
<div class="w3-rest w3-container w3-green"><p>w3-rest</p></div>
</div>
<br>
<div class="w3-row">
<div class="w3-col w3-right w3-container w3-blue" style="width:75px"><p>75px</p></div>
<div class="w3-rest w3-container w3-green"><p>w3-rest</p></div>
</div>
<br>
<div class="w3-row">
<div class="w3-col w3-left w3-container w3-blue" style="width:100px"><p>100px</p></div>
<div class="w3-col w3-right w3-container w3-blue" style="width:100px"><p>100px</p></div>
<div class="w3-rest w3-container w3-green"><p>w3-rest</p></div>
</div>
<br>
<div class="w3-row">
<div class="w3-quarter w3-container w3-red"><p>quarter</p></div>
<div class="w3-half">
<div class="w3-row">
<div class="w3-col w3-container w3-blue" style="width:80px"><p>80px</p></div>
<div class="w3-rest w3-container w3-green"><p>w3-rest</p></div>
</div>
</div>
<div class="w3-quarter w3-container w3-purple"><p>quarter</p></div>
</div>
<br>
<div class="w3-row">
<div class="w3-quarter w3-container w3-red"><p>quarter</p></div>
<div class="w3-quarter w3-container w3-purple"><p>quarter</p></div>
<div class="w3-half">
<div class="w3-row">
<div class="w3-col w3-container w3-blue" style="width:35%"><p>35%</p></div>
<div class="w3-rest w3-container w3-green"><p>w3-rest</p></div>
</div>
</div>
</div>

Utilizzare le percentuali

All'interno di una riga, oltre alle classi prefornite da w3.css, possiamo impostare le dimensioni delle colonne anche tramite l'attributo HTML style, impostando la proprietà CSS width al valore percentuale desiderato:

<div class="w3-row">
<div class="w3-col" style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div class="w3-col" style="width:20%"><p>20%</p></div>
</div>

Contenuto centrato

w3.css ci offre una classe molto utile per la costruzione di un particolare tipo di layout: il container di colonne centrato orizzontalmente nella pagina. Di default, w3.css imposta la larghezza del suddetto container a 980px, ma è possibile cambiare questo valore tramite l'attributo CSS max-width settandolo alle dimensioni desiderate.

Dimensioni standard (centrato e largo 980px):

<div class="w3-content">
<div class="w3-green w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>

Con dimensione personalizzata:

<div class="w3-content" style="max-width:500px">
<div class="w3-green w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>

Impostare la centratura a tutta la pagina:

<body class="w3-content" style="max-width:500px">
<div class="w3-container w3-card w3-indigo">
<h1>Titolo</h1>
</div>
</body>

Rendere ogni elemento responsive

Tutte la classi che abbiamo presentato finora, rendono il layout perfettamente responsive. Ciò significa che se la pagina viene ridimensionata ad una certa misura (ad esempio a quelle che identificano i dispositivi mobile) le colonne trasformano la loro dimensione per copire il 100% delle dimensioni della riga andando a collocarsi una sotto l'altra. Se vogliamo impostare questo comportamento a qualsiasi altro elemento, basta aggiungere la classe w3-mobile e l'elemento stesso si comporterà nella maniera appena descritta:

<div class="w3-container">
<h2>The w3-mobile Class</h2>
<p>Menù di link classico che diventa responsive al variare delle dimensioni della pagina o del dispositivo.</p>
<button class="w3-button w3-black w3-mobile">Home</button>
<button class="w3-button w3-black w3-mobile">Link 1</button>
<button class="w3-button w3-black w3-mobile">Link 2</button>
<button class="w3-button w3-black w3-mobile">Link 3</button>
</div>

Per vedere come il layout si dispone, prova ad utilizzare questo codice e ridimensionare la pagina.

Usare il sistema a 12 colonne

Un'altra fondamentale caratteristica fornita dal sistema di layout a griglie di righe e colonne da parte di w3.css riguarda la collocazione di colonne nel "sistema a righe di 12 colonne". Per fare questo useremo la classe w3-col che imposta una colonna responsive la cui dimensione sarà data dalla combinazione con le seguenti classi:

• l1 - l2 - ... - l12: produce colonne che occupano da 1 a 12 spazi su 12 sui dispositivi di grandi dimensioni (l = large)
• m1 - m2 - ... - m12: produce colonne che occupano da 1 a 12 spazi su 12 sui dispositivi di dimensioni medie (m = medium)
• s1 - s2 - ... - s12: produce colonne che occupano da 1 a 12 spazi su 12 sui dispositivi di dimensioni piccole, come i dispostivi mobile (s = small)

Ad esempio, con il seguente snippet di codice, verrà prodotta una riga con 12 colonne di dimensioni identiche visualizzabili sui dispositivi di media grandezza:

<div class="w3-row">
<div class="w3-col m1 w3-center w3-grey">1</div>
<div class="w3-col m1 w3-center">2</div>
<div class="w3-col m1 w3-center w3-grey">3</div>
<div class="w3-col m1 w3-center">4</div>
<div class="w3-col m1 w3-center w3-grey">5</div>
<div class="w3-col m1 w3-center">6</div>
<div class="w3-col m1 w3-center w3-grey">7</div>
<div class="w3-col m1 w3-center">8</div>
<div class="w3-col m1 w3-center w3-grey">9</div>
<div class="w3-col m1 w3-center">10</div>
<div class="w3-col m1 w3-center w3-grey">11</div>
<div class="w3-col m1 w3-center">12</div>
</div>

Mentre nel seguente caso impostiamo dimensioni dinamiche che variano a seconda del tipo di dispositivo che sta visualizzando la pagina, combinando più classi responsive contemporaneamente:

<div class="w3-row">
<div class="w3-col w3-container m4 l3 w3-yellow">
<p>Questa parte occupa 12 colonne su schermi piccoli, 4 su schermi medi, e 3 su schermi grandi.</p>
</div>
<div class="w3-col w3-container m8 l9">
<p>Questa parte occupa 12 colonne su schermi piccoli, 8 su schermi medi, e 9 su schermi grandi.</p>
</div>
</div>

Nota: le classi responsive di w3.css hanno una priorità ascendente: se ad esempio impostiamo solo le classi s, le dimensioni m e l si comporteranno nella maniera standard, mentre se impostiamo le classi s e le classi m, le dimensioni large non saranno modificate. Contrariamente, le classi small mantengono le feature responsive in ogni caso, producendo una dimensione del 100% (che slitta le colonne orizzontalmente) nel caso in cui la pagina raggiunga determinate dimensioni.

Nascondere contenuti in base alle dimensioni

L'ultima feature del layout a griglie riguarda la possibilità di "nascondere" dinamicamente determinati elementi in base alle dimensioni della pagina o del dispositivo. Questo è attuabile tramite le seguenti classi:

• w3-hide-small: nasconde l'elemento se le dimensioni della pagina sono minori di 601px (mobile)
• w3-hide-medium: nasconde l'elemento se le dimensioni della pagina sono "medie" (tablet)
• w3-hide-large: nasconde l'elemento se le dimensioni della pagina sono maggiori di 901px (laptop, PC)

Ad esempio, ammettiamo che abbiamo tre elementi HTML, che però vogliamo mostrare solo nel caso si verifichino determinate condizioni:

<div class="w3-container w3-hide-small w3-red">
<p>nascondi su schemi piccoli (phones)</p>
</div>
<div class="w3-container w3-hide-medium w3-green">
<p>nascondi su schemi medi (tablets)</p>
</div>
<div class="w3-container w3-hide-large w3-blue">
<p>nascondi su schermi larghi (laptops/desktop)</p>
</div>

Il primo elemento verrà nascosto sui dispotivi mobile o se la pagina visualizzata dal pc viene ridimensionata abbastanza. Il secondo elemento viene nascosto su schermi medi e sui dispositivi mobile. Il terzo elemento verrà nascosto solo se le dimensioni della pagina superano una certa grandezza, che rappresenta quella di schermi di laptop e pc.

A questo punto possiamo dire che avvalendoci di w3.css ed utilizzando pochissimo codice HTML abbiamo la possibilità di produrre qualsiasi tipo di layout di nuova generazione completamente responsive: il suo contenuto e la sua struttura si adatteranno automaticamente alle dimensioni ed alla tipologia del dispositivo in uso!