Share
Până acum am analizat modul de implementare a componentelor MDL. Întrebarea rămâne: cum să personalizăm aceste componente astfel încât să se potrivească în contextul designului și al mărcii noastre?
Pentru mulți dintre dvs., răspunsul la această întrebare poate părea evident: creați o foaie de stil nouă, apoi scrieți regulile de stil pentru a suprascrie setările implicite. Cu toate acestea, acest lucru nu este întotdeauna cel mai bun mod de abordare a unui cadru de acest calibru.
Pentru a nu umfla site-ul web cu stiluri care pot fi în cele din urmă suprasolicitate, trebuie mai întâi să determinăm care sunt componentele componentelor pe care le vom personaliza; culoarea, dimensiunile, formele sau, probabil, pozițiile? Aceasta ne va conduce să înțelegem cum putem începe personalizarea.
Chiar la începutul seriei, am aflat că puteți personaliza schema de culori prin intermediul instrumentului Personalizare. Puteți selecta culoarea primară și cea secundară care vor fi aplicate componentelor UI MDL fie prin implicit, fie prin adăugarea unei clase de Modificator mdl-buton - colorat.
MDL customizerCu toate acestea, este adesea cazul în care două culori nu sunt suficiente pentru a produce rezultatul dorit, sau poate culoarea secundară aplicată într-un anumit element UI nu se potrivește cu designul general al site-ului web.
Material Design vine cu specificațiile pentru o paletă largă de culori care includ roșu, albastru, roz, violet și galben. Dacă culoarea de fundal sau culoarea textului cerută - se încadrează în limitele acestor culori, nu va trebui să scrieți reguli de stil personalizat pentru a înlocui originalele. Puteți adăuga următoarele clase:
Accentsconagua
mdl-color - color-name - umbra: suprascrie culoarea de fund element așa cum este specificat în Color-name și umbră.mdl-color-text - color-name - umbra: suprascrie culoarea textului așa cum este specificată în Color-name și umbră Următoarea este o componentă a cărții MDL dintr-un tutorial anterior, care afișează un post pe blog cu titlul postului, extrasul de post și câteva butoane. De această dată butoanele sunt în culoarea lor implicită.
Presupunând că vrem să schimbăm ca la fel de bine ca acțiune buton pentru a lumina gri, în timp ce titlul și Citeste mai mult butonul este dat un albastru deschis, am putea adăuga mdl-color-text - albastru-gri-300 clasă la buton și adăugați mdl-color text - light-blue-900 la titlu.
... ...
Acest lucru are ca rezultat:
Încă o dată, vă rugăm să consultați specificația de culoare Material Design pentru culorile și nuanțele de suport.
Un alt lucru pe care îl putem adapta prin adăugarea unei "clase de modificatori" este umbra. Adăugați următoarele clase pentru a aplica umbrele de cădere la un element UI:
mdl-umbra - 2DPmdl-umbra - 3DPmdl-umbra - 4DPmdl-umbra - 6DPmdl-umbra - 8dpmdl-umbra - 16dpCu cât este mai mare numărul, cu atât este mai puternic adâncimea și răspândirea umbrei, accentuând ridicat efect asupra elementului în cauză. Cu cardul nostru anterior, putem adăuga mdl-umbra - 16dp pentru a levita cardul în continuare.
...
Acest lucru are ca rezultat:
La sfârșitul documentației pentru fiecare componentă, Google furnizează o listă de clase care pot fi aplicate. Înainte de a scrie orice reguli personalizate de stil, examinați fiecare componentă pentru aceste clase pentru a afla dacă a fost efectiv acoperită. Componenta de navigație, de exemplu, vine cu o multitudine de clase de modificatori, cum ar fi:
mdl-layout - mare ecran numai; pentru a afișa elementul numai în dimensiunea mare a ferestrei de vizualizare și pentru a-l ascunde atunci când acesta merge în fereastra de vizualizare în format tabel sau telefon.mdl-layout - antet fix; face navbar lipicios astfel încât este întotdeauna vizibil în portul de vizualizare pe măsură ce utilizatorul scroll.mdl-layout__header - parcurgere; face antetul dezlipi și parcurgeți conținutul.mdl-layout__header - transparent; face ca antetul să fie transparent, astfel încât să putem adăuga, de exemplu, o imagine de fundal.mdl-aspect - fix-sertar; face navigarea în afara panoului întotdeauna vizibilă.Aplicarea acestor clase evită liniile de cod de personalizare inutile.
Dacă personalizarea dorită depășește ceea ce există în caietul de sarcini, nu avem de ales decât să lansăm o foaie de stil personalizată și să scriem regulile personalizate ale stilului nostru. Putem crea un nou .css fișier, conectați-l la acesta în documentul de sub foaia de stil MDL (sau compilați totul împreună folosind un instrument de construcție) și rulați fișierul cu propriile reguli de stil.
Dar, la fel de ușor cum s-ar părea, veți întâlni mai devreme sau mai târziu probleme specifice. Deoarece componenta ar putea fi folosită de mai multe ori în mai multe nivele ale ierarhiei DOM, stilul tău poate să se termine cu ceva asemănător:
.mdl-header .mdl-button // stil merge aici .mdl-card .mdl-button // stil merge aici .mdl-card__actions .mdl -button - icon // style goes here
Deci, în loc să direcționăm selectorul nativ MDL direct, ar fi mai bine să separăm regulile personalizate de stil într-un selector personalizat, de asemenea. Aceasta înseamnă atribuirea unei noi clase pentru elementul pe care îl veți personaliza și scrie stilurile sub noul selector:
.acme-post-share // stil merge aici .acme-post-like // stil merge aici
Acest lucru ne permite să păstrăm specificitatea stilului scăzut. De asemenea, ne permite să identificăm ce element este aplicat cu stiluri personalizate. În cazul în care doriți să dezactivați stilurile personalizate, puteți elimina noua clasă.
Iar următorul exemplu este de a face acest lucru pentru a personaliza cartea noastră anterioară:
Aluzie: verificați fila CSS.
Un alt mod de a face personalizarea completă peste stilurile implicite MDL este prin codul sursă. MDL este disponibil prin mai multe canale: Github, NPM și Bower.
Rulați următoarele git comanda pentru a descărca MDL de la Github, folosind-o ca un modul Git care ne permite să tragem în jos comitete și actualizări:
git submodule adăugați [email protected]: google / material-design-lite mdl
Rulați următoarea comandă pentru a obține MDL de la NPM și ao implementa, probabil, ca aplicație NodeJS:
npm instalare material-design-lite -save
Rulați această comandă pentru a implementa MDL în site-ul dvs. ca o dependență cu Bower:
bower instalați material-design-lite - salvați
În toate cazurile, acest lucru ne oferă src care conține codurile sursă MDL.
Având fișierele brute-necompilat codul-putem personaliza componentele MDL la cele mai fine detalii. Am putea compila o foaie de stil principală mai ușoară, excluzând componentele inutile. De asemenea, am putea schimba și reutiliza variabilele și mixurile pentru a scrie stilurile personalizate.
Modificarea fișierelor sursă este calea de urmat pentru cei care solicită un control total asupra ieșirii. În partea finală a acestei serii "Quick Tip: Pick 'n' Mix MDL Components cu Gulp" vom examina procesul de preluare a pieselor MDL pe care le dorim în construirea noastră.
În acest tutorial, am văzut diferite modalități de personalizare a componentelor MDL. Și așa cum am descoperit, abordarea depinde în mare măsură de rezultatele pe care le imaginăm. Uneori ar putea fi la fel de direct ca adăugarea unui modificator clasa, dar, uneori, poate fi necesar să trageți și să editați întregul fișier sursă.
Dacă sunteți interesat de o inspirație generală pentru personalizarea dvs. MDL, există o colecție extinsă de diferite materiale de design template-uri și grafică pe piața Envato.
