In questa guida avremo modo di analizzare il framework CSS w3.css, che negli ultimi tempi sta prendendo sempre più spazio nelle scelte degli sviluppatori front-end per realizzare applicazioni di ultima generazione, facendo una concreta concorrenza a nomi altisonanti quali Bootstrap e Foundation. Analizzeremo nel dettaglio tutti gli strumenti forniti da questo framework, con le loro logiche di programmazione specifiche e demo che le mostrano in azione. Inoltre, vedremo come realizzare un'applicazione front-end compelta di un layout dalla struttura molto diffusa, unicamente avvalendoci di w3.css.
In questa prima lezione vedremo quali sono i vantaggi che derivano dall'utilizzo di un framework CSS, quali sono le principali caratteristiche offferte dai maggiori framework CSS disponibili in circolazione, ed infine quali carattetistiche offre nello specifico w3.css.
I vantaggi di un framwork CSS
Quando si parla di framework CSS, si intende un foglio di stile o un insieme di fogli stile (file con estensione .css) costruiti da terze parti, il cui scopo è semplificare il processo di sviluppo del front-end nella realizzazione di siti web, layout e interfacce utente. Così come accade nel caso di qualsiasi altro framework professionale (ad esempio jQuery per la gestione cross-browser del DOM e le animazioni, o Zend Framework per la realizzazione di complesse applicazioni back-end in PHP), anche nel caso dei framework CSS i principali vantaggi si riscontrano:
- nella gestione intrinseca delle differenze sintattiche che intercorrono tra browser
- nella community
- nel notevole risparmio di tempo
- nell’utilizzo e nella gestione di strutture di codice
- nell’utilizzo di codice standard
- nel supporto cross-browser
La struttura di un framework CSS
Un framework CSS si presenta di solito fornito da altri applicativi che coadiuvano le sue funzionalità. Ad esempio, nel caso di Bootstrap, oltre ai file .css troviamo diversi file Javascript (peraltro basati su jQuery) che assolvono a svariate funzioni di controllo all'interno del framework, nonché plugin, file per template e file .scss (generati tramite compilatore CSS Sass).
Le funzionalità principali offerte da un framework CSS sono generalmente le seguenti:
- classi per la realizzazione di layout
- classi per i controlli tipografici
- classi per la gestione dei colori
- classi per la formattazione testuale
- classi per la formattazione e lo stile di elementi HTML form
- classi per la gestione degli pseudo-elementi pseudo-selettori
- classi per la formattazione di pulsanti
- set di icone
- controlli avanzati
- classi “helper
Le caratteristiche principali di w3.css
w3.css è un framework CSS realizzato dal w3 Schools, che possiede alcune caratteristiche molto interessanti. A differenza di Bootstrap o altri framework CSS simili, w3.css risulta essere molto più leggero e compatto. Inoltre, esso possiede le seguenti caratteristiche principali:
- è stato ideato al fine di fornire una tra le migliori curve di apprendimento
- è molto facile da utilizzare
- è totalmente conforme agli standard w3c
- utilizza unicamente fogli di stile CSS puri .scss standalone
- offre un supporto completo per la responsiveness mobile-first
- fornisce un sistema fluido di grid a 12 colonne
- fornisce un supporto totalmente cross-browser
- fornisce un supporto totalmente cross-device
- contiene helper praticamente per qualsiasi operazione CSS
- possiede una raccolta di template
- è gratuito
Nelle prossime lezioni vedremo da vicino come installare ed utilizzare w3.css.