I container

I container (o elementi container) sono, proprio come indica la parola, elementi la cui funzione principale è quella di contenere altri elementi. I container sono elementi fondamentali ed imprescindibili di ogni tipologia di layout, ed a seconda delle loro caratteristiche, il design assumerà volti specifici. Prima dell'avvento di HTML5, gli elementi container per eccellenza erano identificati quasi esclusivamente dai div, mentre ora, con il termine container, possiamo intendere una collezione di elementi più nutrita: <div>, <article>, <section>, <header>, <footer>, <form>. Oltre ai comuni elementi di blocco, come div e form, abbiamo quindi a disposizione tutti gli elementi semantici.

Le classi dedicate ai container

Il framework w3.css fornisce 2 classi principali per lavorare con gli elementi contenitori:

• w3-container
• w3-panel

La classe w3-container imposta un padding sinistro ed un padding destro pari a 16px (il valore considerato ottimale per un layout moderno) a tutti gli elementi a cui viene applicata. Applicando questa classe, nel contesto del lavoro di reset e reimpostazione svolto dal core del framework w3.css, otterremo dunque i seguenti risultati:

• margini comuni
• padding comuni
• allineamenti comuni
• font comuni

Vediamo dunque come utilizzarla:

<div class="w3-container">
  il mio elemento
</div>

Se vogliamo colorare lo sfondo di un container, possiamo unire le potenzialità delle classi "color" viste nella lezione precedente con le classi dei contenitori:

<div class="w3-container w3-red">
  il mio elemento
</div>
<div class="w3-container w3-teal">
  il mio elemento
</div>
<div class="w3-container w3-blue">
  il mio elemento
</div>

Non c'è differenza tra un contenitore w3.css applicato ad un div, o applicato ad un elemento sematico, come header, footer, article o section. Possiamo dunque ottenere risultati più inclini alle specifiche HTML5 utilizzando questi elementi:

<header class="w3-container w3-red"> <h1>Header</h1></header>
<footer class="w3-container w3-teal">
<h1>Footer</h1>
</footer>
<article class="w3-container w3-green">
<h1>Articolo</h1></article>
<section class="w3-container w3-blue">  
<h1>Sezione</h1>
</section>

Un layout di base, comprensivo di un header, di un'immagine descrittiva, di un elemento semantico e di un footer, potrebbe essere definito nel modo seguente:

<header class="w3-container w3-teal">
	<h1>Header</h1>
</header>
<img src="house.jpg" alt="Car" style="width:100%">
<article class="w3-container">
	<p>Descrizione dell'immobile.</p>
</article>
<footer class="w3-container w3-teal">
	<h5>Footer</h5>
</footer>

Una nota importante relativa alla classe w3-container: nel contesto dei padding, solo le dimensioni orizzontali vengono impostate (entrambe a 16px), non quelle verticali. Questo meccanismo è utile in un layout moderno perchè gli elementi heading (h1, h2, h3, h4, h5, h6) ed i paragrafi (p) hanno di default un margine verticale che, all'interno di un contenitore, simula il padding verticale:

<div class="w3-container w3-blue">  <h1>Intestazione</h1>  <p>Paragrafo</p>
</div>

I pannelli

La seconda classe dedicata appositamente agli elementi contenitori è la classe w3-panel.

Oltre ad aggiungere un padding sinistro ed un padding destro di 16px, in w3.css un "pannello" possiede un margine superiore di 16px ed un margine inferiore di 16px. Dunque, a differenza dei container, i pannelli distanziano gli elementi contigui/adiacenti.

Vediamo la differenza nella pratica:

<div class="w3-panel w3-red">
    <h2>Pannello</h2>
	<p>Sono un pannello</p>
</div>
<div class="w3-panel w3-red">
    <h2>Pannello</h2>
	<p>Sono un pannello</p>
</div>
<div class="w3-panel w3-red">
    <h2>Pannello</h2>
	<p>Sono un pannello</p>
</div> 
<hr />
<div class="w3-container w3-red">
    <h2>Container</h2>
	<p>Sono un container</p>
</div>
<div class="w3-container w3-red">
    <h2>Container</h2>
	<p>Sono un container</p>
</div>
<div class="w3-container w3-red">
    <h2>Container</h2>
	<p>Sono un container</p>
</div>

Come consigliato dagli autori, la classe w3-panel è ottima per elementi che definiscono delle note:

<div class="w3-panel w3-pale-green">
	    <p>Londra è la capitale del Regno Unito,
		nonchè meta ambita da visitatori proveniente da tutto il mondo.</p>
 </div>

per il layout delle citazioni:

<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">  <p><i>"Make it as simple as possible, but not simpler."</i></p></div>

e soprattutto per i pannelli di avertimento, suggerimento o notifica:

<div class="w3-panel w3-red">
	    <h3>Danger!</h3>
	    <p>Il colore di sfondo rosso di solito è indicativo di un
avvertimento.</p>
</div>

Stilizzare i contenitori ed i pannelli

Con la potenza offerta dal CSS3, è ovviamente possibile aggiungere un tocco di stile in più ai semplici stili CSS di base, come ad esempio, ombreggiature e bordi arrotondati.

Per ottenere un effetto con ombreggiatura (assolutamente cross-browser!) molto accattivante, è possibile utilizzare la classe w3-card in combinazione con w3-container o w3-panel. Questa classe è disponbile in 2 versioni: w3-card (o w3-card-2), per un'ombreggiatura contenuta, e w3-card-4 per un'ombreggiatura più "espansa":

<div class="w3-panel w3-blue w3-card-4">
	 <p>Londra è la capitale del Regno Unito,
		nonchè meta ambita da visitatori proveniente da tutto il mondo.</p>
</div>
<section class="w3-container w3-blue w3-card">
	 <p>Londra è la capitale del Regno Unito,
		nonchè meta ambita da visitatori proveniente da tutto il mondo.</p>
</section>

Per aggiungere bordi arrotondati, occorre usare le classi w3-round con le dimensioni specifiche, che sono:

• w3-round, con arrotondamento pari a 4px
• w3-round-small, con arrotondamento pari a 2px
• w3-round-medium, con arrotondamento pari a 4px (alias di w3-round)
• w3-round-large, con arrotondamento pari a 8px
• w3-round-xlarge, con arrotondamento pari a 16px
• w3-round-xxlarge, con arrotondamento pari a 32px

<div class="w3-panel w3-blue w3-round-xlarge">
	 <p>Londra è la capitale del Regno Unito,
		nonchè meta ambita da visitatori proveniente da tutto il mondo.</p>
</div>

In questo esempio abbiamo impostato un arrotondamento molto pronunciato.

Aprire e chiudere un pannello via Javascript

Senza l'occorrenza di usare un framework Javascript, possiamo facilmente riprodurre il classico esempio di apertura e chiusura di un pannello (o di un contenitore) aggiungendo un bottone ed un elemento span, che fungeranno da trigger per i nostri eventi:

<button class="w3-btn" onclick="document.getElementById('mydiv').style.display='block'">Show panel
</button>
<div id="mydiv" class="w3-panel w3-green w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright">X</span>
<p>
Click on the X to close this panel.
</p>
<p>Click on the X to close this panel.</p>
</div>

Le possibilità offerte dalle classi container e panel sono dunque illimitate.