Share
Ho la sensazione che CodePen sarà assolutamente pieno di Material Design nei prossimi mesi. Perché? Perché Google ha appena rivelato il loro attesissimo Material Design Lite (MDL). Questa libreria di componenti front-end consente alle persone del web di implementare le specifiche di Google Material Design usando vanilla HTML, CSS e JavaScript. Si tratta di un'implementazione leggera delle specifiche di Material Design (poche dipendenze, overhead basso, molto focalizzato) quindi chiamandolo "Lite".
Nel rilasciare MDL, Google ha risposto a una richiesta molto ovvia. Hanno preso atto del fatto che ci sono stati sforzi da parte della comunità per costruire strutture ispirate al Material Design, come Bootstrap Material Design, Materialize e Material UI, per citarne solo alcune. Con MDL, costruito in stretta collaborazione con il team di Chrome UX, Google ha definito uno standard per l'implementazione del Material Design nei siti Web.
Diamo un'occhiata a ciò che MDL ha portato in tavola con la sua prima versione!
A differenza degli elementi di design dei materiali polimerici (noti anche come elementi di carta) sviluppati per siti Web e app altamente interattivi basati sui dati, MDL si concentra principalmente su siti Web con contenuti più semplici come blog, marketing e pagine di destinazione.
In questa versione iniziale, MDL viene fornito con una manciata di componenti, tra cui:
Il componente di layout presenta un numero di elementi costitutivi per la costruzione di pagine. Ad esempio, la griglia: una caratteristica fondamentale di qualsiasi framework di front-end. La griglia di MDL è costruita con Flexbox e un piccolo aiuto dai CSS Calc (). Dispone di dodici colonne impostate per finestre di grandi dimensioni, otto colonne per quelle che potresti chiamare finestre di dimensioni tablet e quattro colonne per finestre più piccole.
Il componente Layout di MDL comprende anche la navigazione, le schede e i piè di pagina, ognuno dei quali è stato ottimizzato per le diverse dimensioni del viewport.
Come da principi di Material Design, ci sono diversi tipi di pulsanti visivi, alcuni dei quali sono:
Ogni pulsante può essere migliorato con il familiare effetto a catena.
Una carta è un contenitore per la visualizzazione di contenuti, come testo e immagini, che di solito promuove un qualche tipo di azione. Ad esempio, un'immagine con un pulsante "Mi piace" o "Condividi", un elenco di musica con il pulsante "Riproduci" o forse una nota con un pulsante "Salva".
Un badge è un piccolo cerchio, posizionato vicino a un elemento dell'interfaccia utente, che in genere contiene un numero (forse per indicare nuovi messaggi non letti o chat in arrivo) o un'icona. Al giorno d'oggi, dove l'informazione scorre infinitamente attraverso i nostri dispositivi, un "badge" può essere considerato un elemento dell'interfaccia utente molto importante in qualsiasi progetto.
Altri elementi essenziali che troverai in MDL includono campi di input, cursori, levette, menu, descrizioni comandi e icone di design dei materiali.
Incontra i componentiInoltre, Google fornisce anche un paio di modelli per aiutarti a metterti subito in funzione, con una struttura di layout adeguata. Esistono cinque tipi di modelli in questa versione iniziale:
Il modello di layout del blog MDL piuttosto gustosoGli stili MDL sono strutturati con Sass e la metodologia BEM. Gli stili possono essere personalizzati in molti modi, anche prima di scaricare il pacchetto framework. Un tale modo è con la ruota dei colori nella pagina Personalizza. La ruota dei colori consente di selezionare gli accenti di colore in base alla selezione del colore principale. Il customizer genererà quindi il foglio di stile, che potrai scaricare, o collegarlo direttamente da Google CDN.
L'anteprima del generatore di temi MDLIl file material.min.css risultante è piuttosto piccolo (17,6kB gzip), ma per coloro che necessitano di controllo completo per crunchare tutto al massimo, il codice sorgente è disponibile nel repository Github.
Poiché la maggior parte dei componenti in MDL sono costruiti con le tecniche web all'avanguardia, come Calc (), Flexbox, querySelector, e classList, MDL funzionerà solo perfettamente nei moderni browser sempreverdi: Chrome, Firefox, Opera, Microsoft Edge. MDL si degraderà con garbo nei browser più vecchi, come ad esempio IE9, servendo solo la versione CSS. Gli elementi interattivi (ad esempio l'effetto di ripple nel pulsante, ad esempio) non saranno presenti.
Detto questo, l'interfaccia utente è ancora notevolmente presentabile in IE8. Ad esempio, dai un'occhiata ai pulsanti e all'elemento tabelle:
Ti verrebbe perdonato il fatto di pensare che ora disponiamo di un ulteriore framework di front-end da inserire nella nostra casella degli strumenti insieme a Bootstrap e Foundation. Tuttavia, MDL non intende sostituire o diventare un successore di Bootstrap. Material Design fa parte della missione di Google per garantire che le interfacce utente, così come le esperienze nelle loro linee di prodotto siano coerenti, uniformi e considerate.
Ricordiamoci l'idea centrale per un momento:
"Ci siamo sfidati a creare un linguaggio visivo per i nostri utenti che sintetizzasse i principi classici del buon design con l'innovazione e le possibilità di tecnologia e scienza." - Google Material Design Introduzione
Quindi ricorda, mentre MDL si adatta bene ai prodotti Google, potrebbe essere fuori dal contesto se implementato in un sito web che non ha nulla a che fare con Google. Tuttavia, come abbiamo appena scoperto, Google offre il pieno controllo del codice sorgente, consentendoci di personalizzarlo nei minimi dettagli. E questo è ciò di cui parleremo nel prossimo articolo. Quindi rimanete sintonizzati!
Accentsconagua