Share
Di recente abbiamo esaminato il nuovo framework di sviluppo front-end di Google, Material Design Lite (MDL). Abbiamo scoperto che MDL viene fornito con una manciata di componenti dell'interfaccia utente per creare siti Web utilizzando le linee guida e i principi di Material Design.
In questa serie, esamineremo i singoli componenti MDL in modo un po 'più dettagliato, iniziando dal sistema Grid che costituisce la base di ogni framework front-end. Cominciamo!
Prima di poter utilizzare la griglia o qualsiasi altro componente in MDL, è necessario innanzitutto distribuire le librerie MDL: i fogli di stile e il codice JavaScript. Ci sono diversi modi in cui possiamo farlo, ma probabilmente il più semplice è il collegamento ai file ospitati in Google CDN. E questi file includono:
Una volta aggiunti, possiamo iniziare a costruire l'interfaccia utente con i colori definiti nel nome del foglio di stile principale. Il foglio di stile principale è denominato in base alla seguente convenzione: . Materiale primario - accento .min.css. Il nostro colore principale qui è alzavola mentre rosso è il colore dell'accento. Questi colori sono applicati a componenti come la navigazione e i pulsanti, ma non influenzeranno la griglia a meno che non aggiungiamo classi speciali come .MDL-color - primario e .MDL-color - accento.
È possibile modificare la combinazione di colori in base alle proprie preferenze facendo riferimento alle specifiche del colore del disegno del materiale, ad esempio: material.purple-pink.min.css,material.blue_grey-pink.min.css, e material.blue-orange.min.css.
Tuttavia, se trovi che la combinazione di colori all'interno del file css non è intuitiva, puoi sempre utilizzare lo strumento Personalizza. Seleziona i colori che desideri, quindi sostituisci il link del foglio di stile principale con uno generato tramite lo strumento.
Copia il foglio di stileLa griglia, insieme alla navigazione e al piè di pagina in MDL, fa parte del layoutcomponente. Grid in MDL è stato creato utilizzando Flexbox, che lo rende più versatile rispetto ai framework tradizionali che fanno ancora affidamento sui float. La griglia comprende colonne; dodici colonne per "dimensione del desktop", otto colonne per "tablet" di dimensioni (800px e inferiori) e quattro colonne per le finestre di dimensioni "phone" (sotto 500px).
Iniziamo una griglia con un vuoto div. Quindi aggiungere un MDL-grid classe e facoltativamente una classe personalizzata per sovrascrivere o definire stili personalizzati per la griglia in un secondo momento:
Pensa a MDL-grid come equivalente del riga o contenitore classe se vieni da Bootstrap. Ma, invece di essere predefinito, MDL lascia interamente la larghezza a noi. Pertanto, nel foglio di stile, potrebbe essere necessario specificare il larghezza massima della griglia secondo il tuo fabbisogno:
.content-grid max-width: 960px;
Per creare le colonne, aggiungere uno o più div elementi (o qualsiasi elemento si adatti alle tue esigenze) con una classe di MDL-cell all'interno del MDL-grid.
A questo punto, abbiamo effettivamente realizzato una griglia. Abbiamo aggiunto tre colonne. Ogni colonna è allineata correttamente e impostata su una larghezza uguale per 33,3333,333333 millions%. MDL presuppone che, in generale, aggiungeremo tre colonne all'interno di una riga.
Per sovrascrivere la dimensione della colonna predefinita, dobbiamo aggiungere un MDL-cell - numero -Col classe con il numero intervallo da 1 a 12. Aggiungi la classe per ciascuno div:
Mancia: Questa classe è uno spazio dei nomi BEM per a Modificatore. Per ulteriori dettagli, fare riferimento al nostro post precedente Un'introduzione alla metodologia BEM in cui Josh Medeski ha coperto i dettagli del BEM.
La prima colonna dovrebbe ora essere più grande.
MDL tenta di adattarsi alle colonne all'interno della finestra di visualizzazione ridimensionando le colonne in modo logico. Mentre ti riduci a tablet e mobile (procedi, fai clic sulle icone), troverai che la prima colonna rimane più grande. Le ultime due colonne sono ora impilate in basso, tuttavia sono più piccole della metà della prima colonna.
Spesso, potremmo aver bisogno di avere il controllo sulle dimensioni delle colonne per quando sono visualizzate in una dimensione specifica della finestra. Come accennato in precedenza, MDL occupa 8 colonne nella dimensione del tablet e 4 colonne nella finestra delle dimensioni del dispositivo mobile. Le colonne dovrebbero aggiungere fino a un massimo di 8 e 4 rispettivamente per il targeting di tablet e dispositivi mobili.
Dato l'esempio precedente: la prima colonna dovrebbe ora essere più grande della prima in desktop. La seconda colonna sarà più grande se visualizzata nel tablet. Su un telefono cellulare, le prime due colonne verranno visualizzate parallelamente, mentre l'ultima colonna occuperà la larghezza del genitore.
MDL equipaggia anche la griglia con un numero di utilità classi o modificatore classi. Questi includono un set di classi per nascondere le colonne in alcune dimensioni della vista:
Accentsconagua
MDL-cell - nascondere-desktop; nasconde la colonna in dimensioni viewport di dimensioni desktop (> 840px)MDL-cell - nascondino tablet; nasconde la colonna in dimensioni viewport tablet-size (> 480px)MDL-cell - nascondere-phone; nasconde la colonna nella dimensione della finestra di dimensioni mobile (< 480px)Un altro set per allineare la colonna:
MDL-cell - stirata; allunga la colonna per riempire l'elemento genitore, in questo caso, MDL-grid.MDL-cell - top; allinea la colonna alla cima del genitore.MDL-cell - bottom; allinea la colonna al fondo o al genitore.Queste classi sono tutte opzionali, ma ci sono nel caso in cui ne hai bisogno. Aggiungi uno o due di essi al div colonna, ad esempio:
Questo esempio allinea la terza colonna alla fine della riga per i desktop, nasconde la seconda colonna sui tablet, mentre sul cellulare la terza colonna è nascosta. Provaci:
MDL Grid è stato progettato con cura. Dato che usa Flexbox invece di float, è più facile allineare, ordinare e ridimensionare le colonne senza preoccuparsi di rompere il layout o di influenzare gli elementi adiacenti.
Anche se non richiesto, ti incoraggio ad abituarti al CSS Calc () funzione così come la metodologia BEM, la struttura che MDL usa per nominare le classi. Ciò ti aiuterà a ottenere la personalizzazione della tua griglia in linea con le strutture prefabbricate MDL.
Nel prossimo tutorial, daremo un'occhiata a un altro componente MDL. Rimanete sintonizzati!
