La logica di w3.css è molto semplice: permette di formattare e dare uno stile alla struttura HTML tramite l’utilizzo di classi helper o controlli pre-forniti, senza dare preoccupazioni allo sviluppatore riguardo controlli di compatibilità o conformità agli standard.
Ad esempio, se vogliamo dare un colore di sfondo rosso (background-color: red;) ad un particolare div, utilizzando CSS in modo tradizionale dovremmo creare una classe (o un ID) ed applicarla all’elemento, oppure impostare lo stile inline (attributo HTML style), come nel seguente caso:
<style>
.red {
background-color: red;
}
</style>
<html>
<head>
<title>w3.css demo</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class=”red”>contenuto</div>
<div style=”background-color: red;”></div>
</body>
</html>Nel caso di w3.css invece, non è necessario dichiarare alcuna classe o stile inline nel nostro CSS, ma è sufficiente utilizzare le classi helper pre-fornite:
<html>
<body>
<div class=”w3-red”>contenuto</div>
</body>
</html>
Nell'esempio precedente, applicando la classe w3-red, lo sfondo dell'elemento assumerà colore "rosso".
Nel caso specifico delle proprietà CSS riguardanti i colori, w3.css utilizza una scala di valori di default che è ispirata a Material Design Colors, che identifica i colori usati tendenzialmente nel marketing, nelle segnaletiche stradali, nei design pubblicitari.
In questo caso, dunque, lo sfondo non assumerà valore "red" (#ff0000) ma assumerà il valore che w3.css identifica come "red", ovvero #f44336
Tutte le classi di w3.css dispongono del prefisso w3-*, dove * identifica la funzionalità specifica della classe stessa.
Ad esempio, per creare una logica ed una struttura specifiche ad un div, occorre dichiarare la collezione di classi che producono gli effetti desiderati, come fatto di seguito:
<html>
<head>
<title>w3.css demo</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container w3-orange w3-hover-yellow w3-border-top">
contenuto
</div>
</body>
</html>Il codice precedente produce un contenitore w3.css (avremo modo di analizzare nel dettaglio la struttura dei contenitori nelle prossime lezioni), dal colore di sfondo orange, che varia a yellow quando l’utente passa il mouse sopra all’elemento indicato (classe w3-hove-*) e con un bordo superiore impostato (classe w3-border-top).
Tutto questo utilizzando unicamente la dichiarazione delle classi via HTML, senza nessun tipo di codice CSS da parte dello sviluppatore.
È evidente, quindi, il risparmio in termini di gestione e scrittura di codice, così come la facilità di apprendimento ed utilizzo della logica di base.
Le funzionalità di w3.css
Nelle prossime lezioni vedremo nel dettaglio come utilizzare tutte le classi helper fornite dal framework w3.css per generare layout complessi, senza l’ausilio di alcun codice CSS aggiuntivo. Esistono controlli per praticamente qualsiasi caratteristica:
- per i colori
- per i gradienti
- per i bordi
- per i contenitori
- per le griglie
- per i flexbox
- per i bottoni/pulsanti
- per i form e gli input
- per le tabelle
- per le liste
- per i link
- per la formattazione
- per il codice
- per le immagini
- per i menu
- per gli input
- per le ombreggiature
- per gli elementi semantici
- e per molto, molto altro ancora
Vedremo inoltre come utilizzare i controlli avanzati per generare effetti moderni come dropdown, accordion e contextmenu, ed infine vedremo come creare un layout completo utilizzando unicamente w3.css.