Share
Fino ad ora abbiamo esaminato come implementare i componenti MDL. Rimane la domanda: come personalizzare questi componenti in modo che si adattino al contesto del nostro design e del nostro marchio?
Per molti di voi, la risposta a questa domanda potrebbe sembrare ovvia: creiamo un nuovo foglio di stile, quindi scriviamo le regole di stile per sovrascrivere i valori predefiniti. Tuttavia, fare questo non è sempre il modo migliore quando si ha a che fare con un quadro di questo calibro.
Per non gonfiare il sito Web con stili che potrebbero essere sostituiti, dobbiamo prima determinare quali parti dei nostri componenti vogliamo personalizzare; il colore, le dimensioni, le forme o forse le posizioni? Questo ci porterà a capire come possiamo iniziare a personalizzare.
Proprio all'inizio della serie, abbiamo appreso che è possibile personalizzare la combinazione di colori tramite lo strumento Personalizza. È possibile selezionare il colore primario e secondario che verrà applicato ai componenti dell'interfaccia utente MDL, in base all'impostazione predefinita o aggiungendo una classe Modificatore come MDL-button - colorato.
MDL customizerTuttavia, spesso accade che due colori non siano sufficienti per produrre il risultato desiderato, o forse il colore secondario applicato in un particolare elemento dell'interfaccia utente non corrisponde al design generale del sito web.
Material Design viene fornito con le specifiche per una vasta gamma di colori che includono rosso, blu, rosa, viola e giallo. Se il colore richiesto o il colore del testo rientrano nell'intervallo di questi colori, non sarà necessario scrivere regole di stile personalizzate per sostituire gli originali. Puoi invece aggiungere le seguenti classi:
Accentsconagua
MDL-color - color-name - ombra: sostituisce il colore di sfondo dell'elemento come specificato in Color-name e Ombra.MDL-color-text - color-name - ombra: sostituisce il colore del testo come specificato in Color-name e Ombra Quanto segue è un componente MDL di una precedente esercitazione, che mostra un post sul blog con il titolo del post, l'estratto del post e un paio di pulsanti. Questa volta i pulsanti sono nel loro colore predefinito.
Supponendo che vogliamo cambiare il piace così come il Condividere pulsante per illuminare in grigio, mentre il titolo e Leggi di più pulsante viene dato un azzurro, potremmo aggiungere il MDL-color-text - blu-grigio-300 classe al pulsante e aggiungi il MDL-color-text - light-blue-900 al titolo.
... ...
Questo risulta in:
Ancora una volta, si prega di fare riferimento alle specifiche del colore di Material Design per i colori e le sfumature di supporto.
Un'altra cosa che possiamo aggiustare aggiungendo una "classe modificatore" è l'ombra. Aggiungi le seguenti classi per applicare le ombre esterne a un elemento dell'interfaccia utente:
MDL-shadow - 2DPMDL-shadow - 3DPMDL-shadow - 4DPMDL-shadow - 6DPMDL-shadow - 8DPMDL-shadow - 16dpPiù grande è il numero, più forte è la profondità dell'ombra e si diffonde, accentuando il sollevato effetto sull'elemento in questione. Con la nostra carta precedente, potremmo aggiungere il MDL-shadow - 16dp per levitare ulteriormente la carta.
...
Questo risulta in:
Alla fine della documentazione di ciascun componente, Google fornisce un elenco di classi che possono essere applicate. Prima di scrivere qualsiasi regola di stile personalizzata, esamina ciascun componente per queste classi per scoprire se è stato effettivamente coperto. Il componente di navigazione, ad esempio, ha una grande varietà di classi di modifica, come ad esempio:
MDL layout - grande schermo solo; per mostrare l'elemento solo nella dimensione grande della finestra e nasconderlo quando si passa a una finestra di dimensioni di tabella o telefono.MDL layout --header fisso; rende la barra di navigazione appiccicoso quindi è sempre visibile nel viewport mentre l'utente scorre.MDL-layout__header - scroll; rende l'intestazione scollare e scorrere insieme al contenuto.MDL-layout__header - trasparente; rende l'intestazione trasparente in modo che possiamo aggiungere, per esempio, un'immagine di sfondo.MDL layout - cassetti fissa; rende sempre visibile la navigazione fuori dalla tela.L'applicazione di queste classi evita righe di codice di personalizzazione non necessario.
Se la tua personalizzazione richiesta va al di là delle specifiche, non abbiamo altra scelta che iniziare un foglio di stile personalizzato e scrivere le nostre regole di stile personalizzate. Possiamo creare un nuovo .css file, collegalo ad esso nel documento sotto il foglio di stile MDL (o compila tutto insieme usando uno strumento di costruzione), ed esegui il file con le nostre regole di stile.
Ma, per quanto facile possa sembrare, prima o poi incontrerai problemi di specificità. Poiché il componente potrebbe essere utilizzato più volte in diversi livelli della gerarchia DOM, lo stile potrebbe risultare simile al seguente:
.mdl-header .mdl-button // lo stile va qui .mdl-card .mdl-button // lo stile va qui .mdl-card__actions .mdl-button - icon // style goes here
Pertanto, anziché selezionare direttamente il selettore nativo di MDL, sarebbe meglio separare le regole di stile personalizzate in un selettore personalizzato. Ciò significa assegnare una nuova classe per l'elemento che si intende personalizzare e scrivere gli stili con il nuovo selettore:
.acme-post-share // style goes here .acme-post-like // style goes here
Questo ci consente di mantenere bassa la nostra specificità di stile. Ci consente inoltre di identificare quale elemento viene applicato con stili personalizzati. Nel caso in cui si desidera disabilitare gli stili personalizzati, è possibile rimuovere la nuova classe.
E il seguente è un esempio di come fare per personalizzare la nostra carta precedente:
Suggerimento: controlla la scheda CSS.
Un altro modo per eseguire la personalizzazione completa sugli stili di default MDL è attraverso il codice sorgente. MDL è disponibile attraverso più canali: Github, NPM e Bower.
Esegui quanto segue idiota comando per scaricare MDL da Github, utilizzandolo come modulo Git che ci consente di abbattere commit e aggiornamenti:
git submodule aggiungi [email protected]: google / material-design-lite mdl
Eseguire il seguente comando per ottenere MDL da NPM e distribuirlo, forse, come applicazione NodeJS:
npm installa material-design-lite --save
Esegui questo comando per distribuire MDL nel tuo sito web come dipendenza con Bower:
bower installa material-design-lite --save
In tutti i casi, questo ci dà il src cartella che contiene i codici sorgente MDL.
Avendo i file raw-non compilato codice: siamo in grado di personalizzare i componenti MDL nei minimi dettagli. Potremmo compilare un foglio di stile principale più leggero escludendo componenti superflui. Potremmo anche cambiare e riutilizzare le variabili e i mixin per scrivere gli stili personalizzati.
La modifica dei file sorgente è la strada da percorrere per coloro che richiedono il controllo totale sull'output. Nella parte finale di questa serie "Suggerimento rapido: scegli" Combina MDL Components with Gulp "esamineremo il processo di prendere solo le parti MDL che vogliamo nella nostra build.
In questo tutorial, abbiamo visto vari modi per personalizzare i componenti MDL. E come abbiamo scoperto, l'approccio dipende in larga misura dall'output che immaginiamo. A volte potrebbe essere diretto come aggiungere un modificatore classe, ma a volte potrebbe anche essere necessario tirare giù e modificare l'intero file sorgente.
Se ti interessa un po 'di ispirazione generale per la tua personalizzazione MDL, c'è una vasta collezione di diversi modelli di design dei materiali e grafica sul mercato Envato.
