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 differenti e tra differenti versioni dello stesso browser;
- nella community attiva che contribuisce al miglioramento del framework ed all'identificazione dei bug;
- nel notevole risparmio di tempo richiesto per la scrittura del codice;
- nell’utilizzo e nella gestione di strutture di codice consistenti, solide e riusabili;
- nell’utilizzo di codice standard e conforme alle più moderne specifiche W3C;
- nel supporto cross-browser, realizzato anche tramite il reset degli stili di default e dalla costruzione di una base comune.
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, utilizzando varie tecniche quali Flex, Grid e Float;
- 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, e classi specifiche per i form;
- classi per la gestione degli pseudo-elementi e pseudo-selettori;
- classi per la formattazione di pulsanti e tooltip;
- set di icone e/o supporto alla gestione di set di icone esterni;
- controlli avanzati per la creazione di interfacce accordion, tabs, finestre modali, menu dropdown, context menu;
- classi “helper” per la gestione di una moltitudine di stili e dettagli relativi al front-end.
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 tra i maggiori framework CSS;
- è molto facile da utilizzare;
- è totalmente conforme agli standard w3c;
- utilizza unicamente fogli di stile CSS puri, senza la necessità di file .scss, plugin esterni o librerie Javascript esterne. È quindi totalmente standalone;
- offre un supporto completo per la responsiveness, utilizzando il paradigma mobile-first;
- fornisce un sistema fluido di grid a 12 colonne (mobile-first), che supporta classi responsive per device di ogni dimensione;
- fornisce un supporto totalmente cross-browser, supportando Google Chrome, Mozilla Firefox, Opera, Safari, Edge ed Internet Explorer;
- fornisce un supporto totalmente cross-device (desktop, laptop, tablet, mobile);
- contiene helper praticamente per qualsiasi operazione CSS;
- possiede una raccolta di template, creati direttamente dagli autori, che è opzionalmente possibile scaricare ed utilizzare come base nei propri progetti;
- è gratuito e non necessita di alcuna licenza d'uso.
Nelle prossime lezioni vedremo da vicino come installare ed utilizzare w3.css.