Una rapida introduzione al Material Design usando Materialise

Cos'è il Material Design?

Material Design è un linguaggio di design creato da Google. Secondo material.io, Material Design mira a combinare:

... principi classici di un buon design con l'innovazione e la possibilità della tecnologia e della scienza. Mira a sviluppare un unico sistema sottostante che consenta un'esperienza unificata su piattaforme e dimensioni di dispositivi. I precetti mobili sono fondamentali, ma il tocco, la voce, il mouse e la tastiera sono tutti metodi di input di prima classe.

Perché usare Material Design?

Material Design offre un'esperienza utente senza soluzione di continuità su tutti i dispositivi. Transizioni e animazioni reattive, insieme a effetti di riempimento e profondità come ombre e lampi, la rendono elegante e intuitiva. Google utilizza Material Design su quasi tutte le sue app (come Keep e Calendar).

Come puoi utilizzare Material Design nelle tue app Web?

Materialise è una libreria di componenti front-end reattiva simile a Bootstrap. Offre tutto ciò che Bootstrap ha da offrire, ma la differenza è che Materialise segue i principi di progettazione dei materiali. Ecco un modello di esempio.

Ecco un elenco di funzionalità che Materialise offre:

  • Griglia
  • tabelle
  • Distintivi, bottoni, pangrattato
  • Carte, fiches, collezioni
  • Piè di pagina, forme
  • Navbar
  • E molto di più!

Come iniziare

A differenza di Bootstrap, Materialise non richiede popper.js. Richiede solo jQuery. Questo è tutto ciò che serve per iniziare. Aggiungi questo al tuo HTML e sarai a posto!




Colori

Usando Materialise, puoi cambiare il colore di qualsiasi elemento HTML semplicemente assegnandogli un nome di classe del colore che desideri. Ad esempio, se si desidera dare al tag di paragrafo il colore rosso, si procede come segue:

Lorem Ipsum

Inoltre, puoi anche schiarire o scurire un colore assegnandogli un altro nome di classe lighten-1 o darken-1. Ad esempio,

Testo di esempio

. L'1 può essere sostituito con numeri fino a 5 per schiarire e fino a 4 per scurire. Numeri più alti applicherebbero tonalità più chiare o più scure del colore.

pulsanti

Per materializzare un pulsante, basta dargli il nome della classe btn. Puoi anche aggiungere un'animazione interessante ad essa dandogli un altro effetto di onde di classe. Se hai bisogno di un pulsante più grande, puoi usare una classe btn-large. Per esempio:

 
 
 

Ombra

Nella progettazione del materiale, tutto dovrebbe avere una certa profondità z che determina quanto è sollevato o vicino alla pagina dell'elemento.

Per applicare un effetto ombra a un elemento, è possibile utilizzare la classe z-depth-2 (2 può essere sostituito con i numeri 1–5). Per esempio:

Conclusione

Ho solo graffiato la superficie qui. C'è molto di più disponibile in Materialise (come transizioni, carte, carosello e modali). Puoi imparare come utilizzare tutti i componenti dai documenti. I nomi delle classi sono molto semplici e la griglia è davvero utile per creare rapidamente colonne reattive. Ti auguro buona fortuna!