CSS Tutorial

I migliori Framework CSS basati sul Material Design

Articolo a cura di: Davide Copelli {ing}

Facebook

Il colosso Google, ha investito molto nell'imporre un "linguaggio universale" per la realizzazione di interfacce per ambienti desktop e mobile, il cosidetto "Material Design". Non da stupirsi se il settore "mobile", stia diventando l'ambiente su cui Google sta investendo di più, non solo in termini di servizio per le ricerche (vedi AMP, Siti Web Responsive, indice SEO distinto per siti mobile), ma anche per quanto riguarda lo stile delle interfacce con cui l'utente dovrà interagire una volta arrivato all'interno di un sito web o app ibrida. Ecco allora una carrellata dei framework CSS, che potresti usare per dare vita al tuo nuovo sito web o applicazione ibrida, con lo stile "Google" ossia con lo stile "Material Design".

Consocere infatti i CSS, ti permette di avere il pieno controllo sulla disposizione e sull'aspetto di ogni elemento di una pagina web o web app. Se poi ci aggiungiamo la possibilità di animare i diversi elementi con le tecniche base di animazione CSS, il quadro si completa e i CSS diventano il fulcro su cui iniziare a costruire le proprie competenze a livello di sviluppo interfacce UI.

Questo indipendentemente dal fatto, che tu stia progettando il tuo sito da zero, senza alcun framework, che nel caso tu stia utilizzando software come il popolare WordPress.

Vediamo allora quali sono i principali framework CSS che potresti sfruttare per il tuo prossimo progetto in stile responsive e material.

Framework "Materialize"

Materialize, è forse uno dei framework CSS più popolari tra gli addetti ai lavori e quello che più si avvicina in modo fedele alle regole dettate dal Material Design. Ha una documentazione online molto semplice e intuitiva, oltre che essere ben dettagliata e questo è forse uno dei motivi per cui è diventato così popolare. In uno dei nostri corsi per lo sviluppo di applicazioni ibride con Cordova, vedremo proprio come può essere sfruttato per lo sviluppo di un'intera APP.

Framework "Material UI"

Altro framework CSS molto usato dagli sviluppatori è sicuramente "Material UI". A differenza del precedente che sfrutta al 100% i CSS senza altri framework, questo si base su React, ossia su una libreria JavaScript per la costruzione di interfacce utente, focalizzata allo sviluppo semplificato di siti web basati sul Material Design. Anche questo presenta una buona documentazione di supporto, che permette un'agevole integrazione dei diversi elementi.

Framework "Material Design Lite"

Come dice lo stesso nome, "Material Design Lite" è un molto leggero e semplice da utilizzare. Non bisogna però farsi ingannare dal nome, in quanto anch'esso offre una discreta tipologia di funzionalità da usare per lo sviluppo di propri siti web e applicazioni ibride. La libreria dei componenti infatti è abbastanza ampia e include le classiche funzionalità per realizzare cards, pannelli a scorrimento, pulsanti on/off e molto altro ancora. La documentazione è ampia, anche se la struttura dei nomi di classe usati nel file CSS, è decisamente prolissa e si corre il rischio di fare confusione nella stesura del proprio codice, soprattutto in fase di aggiornamento pagine.

Framework "Material Design Lite"

"MUI" è anch'esso un framework CSS molto leggere da includere nei propri progetti e che è abbastanza fedele ai principi del "Material Design". Esattamente come "Material UI", si basa sulla libreria React JS, quindi se hai già della basi sull'uso di questa, non avrai problemi ad usarlo.

Framework "Angular Material"

Per tutti coloro appassionati a JavaScript e ai framework emergenti come Angular, consiglio vivamente "Angular Material". Offre il completo controllo su un grande quantità di componenti da integrare nelle interfacce utente di siti web e applicazioni ibride, perfettamente allineate con le linee guida dettate da Google sul material Design.

Framework "Polymer"

Polymer è un progetto Google dedicato allo sviluppo di "Web Component", ossia alla creazione di propri tag HTML, che estendono l'HTML classico che tutti noi conosciamo molto bene. Grazie alle nuove specifiche Shadow DOM and Custom Elements, i componenti web, stanno diventando ampiamente supportati da quasi tutti i browser. Anche Polimer è orientato allo sviluppo di componenti con lo stile Material ed è sicuramente un progetto interessante da tenere sotto osservazione, visto che può essere sfruttato anche per la realizzazione di Web APP.

Esistono poi decine di altri progetti opensource, più o meno validi dal punto di vista della fedeltà ai principi del Material Design, ma il cui limite maggiore è dato dallla presenza di una documentazione spesso limitata. La speranza è che nel tempo, questi progetti godano di sempre maggior successo, al fine di incentivare i diversi sviluppatori a progredire in questo senso. Eccone alcuni degni di nota:

Framework open source "Material Foundation"

Il concorrente diretto di Bootstrap, ZURB Foundation, da tempo anticipa quest'ultimo sulle ultime novità in materia di web design. Ecco allora una versione Material del popolare framework CSS responsive: si chiama "Material Foundation" e sfrutta la stessa infrastruttua su cui è sviluppato il padre, anche se la documetazione è un pò scarsa e il numero di componenti ancora limitato.

Material Design for Bootstrap

Che BootStrap sia uno dei framework responsive più utilizzati al mondo, non è da stupirsi, quindi non vi stupirete se qualcuno ha deciso di realizzare anche la relativa versione "material". Questa si basa sulla versione 3.0 del popolare framework, e anche in questo caso, abbiamo una documentazione un pò ridotta. Si chiama "Material Design for Bootstrap"

Framework "Ionic Material"

Ionic è un noto framework per lo sviluppo di siti e web app, che deve la sua popolarità all'aver abbracciato il framework Angular a partire dalla versione 2.0. Chi sviluppa con quest'ultimo framework infatti, troverà in "Ionic Material" una valida libreria per la creazione di interfacce Material.Anche in questo caso siamo in presenza di un progetto open source, gestito da Zach Fitzgerald, che allo stato attuale non presenta una documentazione.

Concludendo, non è difficile trovare delle risorse per sviluppare progetti di siti e/o web app che siano compatibili con le linee guida del material design introdotto da Google. Forse la difficoltà maggiore sta nello scegliere quello più semplice da implementare per il proprio progetto, ma in questo caso dipende molto dalle competenze che ognuno ha sviluppato.


Davide Copelli {ing}ing. Davide Copelli - Si occupa di Web Marketing e tecnologie Web dal 2001, e tramite la società DCOP, offre consulenza di web marketing, email marketing, pubblicità online e posizionamento sui motori di ricerca. Nel 2003 ha fondato il primo portale in Italia per la formazione online con VideoCorsi. E' attualmente impegnato come "Chief Digital Media Planner" di GreeniTop.com, di cui è co-fondatore, il primo sistema di rating italiano per prodotti Green e Made in Italy!

Accedi per primo a Tutorial, Corsi e Offerte!

La tua email è al sicuro. Potrai cancellarti definitivamente con un click e in ogni istante. Odiamo lo spam!

×