Materializza un framework CSS per la progettazione dei materiali

Google Design dei materiali ha lo scopo di funzionare bene sul Web e anche sulle app mobili. Sta guadagnando popolarità con gli sviluppatori e se vuoi adottarlo anche tu, ci sono molti modi per implementare Material Design sul tuo sito. Puoi usare Polimero o Angolare o puoi usare Materializza.

Materializzare è a Framework CSS basato su principi di Material Design con supporto Sass per uno sviluppo migliore. Porta uno stile predefinito per un facile utilizzo e ha una documentazione dettagliata.

Puoi trovare molti componenti utili all'interno di: dialogo, modale, selezione data, pulsanti materiale, parallasse, schede e altro. Dispone inoltre di molte opzioni di navigazione tra cui scegliere, come menu a discesa, menu scorrevole e schede. Materialise usa anche a Sistema a 12 griglia con 3 query media di dimensioni dello schermo predefinite: una larghezza massima di 600px è un dispositivo mobile, dispositivo tablet 992px e più di 992px è considerato un dispositivo desktop.

Iniziare

Ci sono due modi per iniziare con Materialise: use CSS standard o insolenza. Entrambe le fonti possono essere scaricate qui. Puoi anche ottenerli con bower usando il seguente comando:

 l'installazione del bower si materializza 

Dopo aver ottenuto i sorgenti, assicurati di collegarli correttamente al tuo file di progetto o compilare la fonte se stai utilizzando la versione di Sass.

Caratteristiche

In questa sezione, spiegherò alcune funzionalità che offre Materialise.

1. Sass Mixins

Questo framework contiene Sass Mixins che aggiunge automaticamente tutti i prefissi del browser quando si scrivono determinate proprietà CSS. È una grande caratteristica da garantire compatibilità su tutti i browser, con il minor numero possibile e il codice, il più possibile.

Dai un'occhiata alle seguenti proprietà di animazione:

 -webkit-animation: 0.5s; -moz-animation: 0.5s; -o-animazione: 0,5 s; -ms-animation: 0.5s; animazione: 0.5s; 

Queste righe di codice possono essere riscritte con una singola riga di mixin di Sass in questo modo:

 @include animation (.5s); 

Ci sono circa 19 mix principali a disposizione. Per vedere la lista completa, vai alla categoria Sass in mixins linguetta.

2. Testo del flusso

Mentre altri framework di frontend usano un testo fisso, Materialize implementa un testo veramente reattivo. Anche le dimensioni del testo e l'altezza della riga vengono ridimensionate in modo reattivo per mantenere la leggibilità. Quando si tratta di schermi più piccoli, l'altezza della linea è più grande.

Per usare Flow Text, puoi semplicemente aggiungere il flow-text classe sul testo desiderato. Per esempio:

 
Questo è il testo del flusso.
 

Controlla la demo qui nella sezione Flow Text.

3. Effetto a catena con le onde

Anche il Material Design ha un feedback interattivo, un esempio degno di nota è l'effetto a catena. In Materialize, questo effetto viene chiamato Onde. Fondamentalmente quando gli utenti fanno clic o toccano / toccano un pulsante, una scheda o qualsiasi altro elemento, viene visualizzato l'effetto. Le onde possono essere facilmente create aggiungendo onde effetto classe sui tuoi elementi.

Questo frammento ti dà l'effetto delle onde.

 Sottoscrivi 

Le increspature sono grigie di default. Ma in una situazione in cui hai uno sfondo di colore scuro, potresti voler cambiare il colore. Per aggiungere un colore diverso, basta aggiungere waves- (colore) all'elemento Sostituisci "(colore)" con il nome di un colore.

 Sottoscrivi 

Puoi scegliere tra 7 colori: luce, rosso, giallo, arancione, viola, verde e verde acqua. Puoi sempre creare o personalizzare i tuoi colori se questi colori non corrispondono alle tue esigenze.

4. Ombra

Per fornire relazioni tra gli elementi, Material Design consiglia di utilizzare l'elevazione sulle superfici. Materialise offre questo principio con il suo z-depth (numero) classe. Puoi determinare la profondità dell'ombra cambiando il (numero) da 1 a 5:

 
 
Profondità dell'ombra 3
  
 

Tutte le profondità dell'ombra sono dimostrate con l'immagine sottostante.

5. Pulsanti e icone

In Material Design ci sono tre tipi di pulsanti principali: pulsante alzato, fab (tasto azione mobile) e pulsante piatto.

(1) Pulsante alzato

Il pulsante sollevato è il pulsante predefinito. Per creare questo pulsante, basta aggiungere un btn classe ai tuoi elementi. Se vuoi dargli l'effetto onda quando si fa clic o si preme, vai con questo:

 Pulsante 

In alternativa, puoi anche dare al pulsante un'icona a sinistra oa destra del testo. Per l'icona, è necessario aggiungere personalizzato tag con il nome della classe e la posizione dell'icona. Per esempio:

 Scaricare 

Nel frammento di cui sopra che usiamo mdi file file-download classe per l'icona di download. Ci sono circa 740 icone differenti Puoi usare. Per vederli, vai alla pagina Sass nella scheda Icone.

(2) Pulsante fluttuante

Un pulsante mobile può essere creato aggiungendo btn-galleggiante classe e l'icona desiderata. Per esempio:

In Material Design, il pulsante piatto viene spesso utilizzato all'interno della finestra di dialogo. Per crearlo, basta aggiungere btn-flat al tuo elemento in questo modo:

 Declino 

Inoltre, i pulsanti possono essere disabilitati con Disabilitato classe e reso più grande usando btn-large classe.

6. Griglia

Materialise utilizza uno standard Griglia reattiva a 12 colonne sistema. La reattività è divisa in tre parti: piccolo (s) per cellulari, medio (m) per tablet e grande (l) per desktop.

Per creare colonne, utilizzare s, me l per indicare la dimensione, seguito dal numero di griglia. Ad esempio, quando si desidera creare un layout di dimensioni ridotte per dispositivo mobile, è necessario includere un s6 classe nel tuo layout. s6 sta per piccolo-6 che significa 6 colonne su dispositivo di piccole dimensioni.

Devi anche includere a col classe nel layout che crei e inseriscilo in un elemento che ha il riga classe. Questo è così il layout potrebbe essere inserito correttamente nelle colonne. Ecco un esempio:

 
 
Ho 12 colonne o larghezza completa qui
 
4 colonne (un terzo) qui
 
4 colonne (un terzo) qui
 
4 colonne (un terzo) qui
 
 

Ecco i risultati:

Di default, col s12 è di dimensioni fisse e ottimizzato per tutte le dimensioni dello schermo, praticamente uguale a col s12 m12 l12. Ma se vuoi specificare la dimensione delle colonne per dispositivi diversi. Tutto quello che devi fare è elencare le dimensioni aggiuntive in questo modo:

 
 
La mia larghezza ha sempre 12 colonne ovunque
 
Ho 12 colonne su mobile, 6 su tablet e 9 su desktop
 
 

Ecco come si presenta:

Queste sono solo alcune caratteristiche di Materialise. Per saperne di più sulle loro altre funzionalità, vai alla pagina della documentazione.