Share
Recent am analizat noul cadru de dezvoltare Google, Material Design Lite (MDL). Am descoperit că MDL vine cu o mână de componente UI pentru a construi site-uri web folosind principiile și principiile de proiectare a materialelor.
În această serie, vom examina componentele MDL individuale cu puțin mai multe detalii, începând cu sistemul Grid care formează baza oricărui cadru front-end. Sa incepem!
Înainte de a putea folosi Gridul sau orice alte componente în MDL, trebuie mai întâi să implementăm bibliotecile MDL - foile de stil și JavaScript. Există o serie de moduri în care putem face acest lucru, dar probabil cel mai direct este prin conectarea la fișierele găzduite în Google CDN. Aceste fișiere includ:
Odată ce le-am adăugat, putem începe să construim interfața utilizator cu culori conform definiției din numele principal al foii de stil. Foaia principală de stil este denumită în conformitate cu următoarea convenție: . Material primar - accent .min.css. Culoarea noastră primară este aici Turcoaz in timp ce roșu este culoarea accentului. Aceste culori sunt aplicate componentelor precum navigația și butoanele, dar ele nu vor influența grila decât dacă adăugăm clase speciale cum ar fi .mdl-culoare - primar și .mdl-culoare - de accent.
Puteți schimba combinația de culori cu orice doriți, referindu-vă la specificația de culoare Material Design, de exemplu: material.purple-pink.min.css,material.blue_grey-pink.min.css, și material.blue-orange.min.css.
Cu toate acestea, dacă găsiți o combinație de culori în fișierul css unintuitiv, puteți folosi întotdeauna instrumentul Personalizare. Selectați oricare dintre culorile dorite, apoi înlocuiți legătura principală a foii de stil cu cea generată prin instrument.
Copiați foaia de stilGrila, împreună cu Navigația și subsolul în MDL, fac parte din Layoutcomponentă. Gridul din MDL este construit folosind Flexbox, ceea ce îl face mai versatilă decât cadrele tradiționale care se bazează încă pe flotoare. Grilă cuprinde coloane; douăsprezece coloane pentru dimensiunea desktopului, opt coloane pentru dimensiunea tabletei (800px și mai jos) și patru coloane pentru porturile de vizualizare a dimensiunii telefonului (sub 500 pixeli).
Începem o grilă cu un gol div. Apoi adăugați un mdl-grid clasă și, opțional, o clasă personalizată care să înlocuiască sau să definească mai târziu stilurile personalizate pentru grilă:
A se gandi la mdl-grid ca echivalent al rând sau recipient dacă veniți din Bootstrap. Dar, în loc de a fi predefinite, MDL lasă lărgimea în întregime până la noi. Astfel, în foaia dvs. de stil, poate fi necesar să specificați lățimea maximă din grilă la cerința dvs.:
.conținut-grilă max-width: 960px;
Pentru a construi coloanele, adăugați unul sau mai multe div elemente (sau oricare elemente se potrivesc nevoilor dvs.) cu o clasă de mdl-celulă în cadrul mdl-grid.
În acest moment, am făcut efectiv o rețea. Am adăugat trei coloane. Fiecare coloană este aliniată corespunzător și setată la o lățime egală pentru 33.3333333333%. MDL presupune că, în general, adăugăm trei coloane într-un rând.
Pentru a suprascrie dimensiunea implicită a coloanei, trebuie să adăugăm un mdl-cell - număr COL clasa cu număr variază de la 1 la 12. Adăugați clasa pentru fiecare div:
Bacsis: Această clasă este un spațiu de nume BEM pentru a Modificatorul. Pentru mai multe detalii, consultați postul nostru anterior Introducere în Metodologia BEM unde Josh Medeski a acoperit inscrierile BEM.
Prima coloană ar trebui acum să fie mai mare.
MDL încearcă să se potrivească în coloanele din fereastra de vizualizare disponibilă prin redimensionarea coloanelor într-o manieră logică. Pe măsură ce vă restrângeți la tabletă și pe mobil (faceți clic pe pictograme), veți observa că prima coloană rămâne mai mare. Ultimele două coloane sunt acum stivuite în partea de jos, totuși acestea sunt mai mici la jumătate din prima coloană.
Adesea, este posibil să avem nevoie de control asupra dimensiunilor coloanelor atunci când sunt vizionate într-o anumită dimensiune a ferestrei de vizualizare. După cum am menționat mai devreme, MDL are 8 coloane la dimensiunea tabletei și 4 coloane la portul de vizualizare pentru dimensiunile mobile. Coloanele ar trebui să adauge până la maximum 8 și 4, când vizează tabletele și mobile.
Având în vedere exemplul de mai sus: prima coloană ar trebui să fie acum mai mare decât prima din desktop. A doua coloană va fi mai mare atunci când este văzută în tabletă. Pe un telefon mobil, primele două coloane vor fi afișate una lângă alta în mod egal, în timp ce ultima coloană va include lățimea părintelui.
MDL furnizează, de asemenea, grila cu un număr de utilitate clase sau modificator clase. Acestea includ un set de clase pentru a ascunde coloanele la anumite dimensiuni ale ferestrelor de vizualizare:
Accentsconagua
mdl-celulă - ascunde-desktop; ascunde coloana în dimensiunea spațiului de vizualizare pentru dimensiunea desktop (> 840px)mdl-celulă - ascunde-tabletă; ascunde coloana în mărimea ferestrei de vizualizare a dimensiunii tabletei (> 480 px)mdl-celulă - ascunde-telefon; ascunde coloana în mărimea ferestrei de vizualizare a dimensiunii mobile (< 480px)Un alt set pentru alinierea coloanei:
mdl-celulă - întindere; întinde coloana pentru a umple elementul părinte, în acest caz, mdl-grid.mdl-celulă - top; aliniază coloana în partea de sus a părintelui.mdl-cell - bottom; aliniază coloana la partea inferioară sau la părinte.Aceste clase sunt opționale, dar există în cazul în care aveți nevoie de ele. Adăugați una sau două dintre ele la div coloana, de exemplu:
Acest exemplu aliniază a treia coloană la partea de jos a rândului pentru desktopuri, ascunde a doua coloană pe tablete, în timp ce pe mobil este ascunsă a treia coloană. Încearcă:
Grilele MDL sunt construite cu grijă. Având în vedere că utilizează Flexbox în loc de flotoare, este mai ușor să aliniezi, să ordonezi și să redimensionezi coloanele fără a te îngrijora de ruperea aspectului sau de afectarea elementelor învecinate.
Deși nu este necesar, vă încurajez să vă obișnuiți cu CSS calc () precum și metodologia BEM - structura utilizată de MDL pentru a desemna clasele. Acest lucru vă va ajuta să obțineți personalizarea rețelei în linie cu structurile pre-construite MDL.
În următorul tutorial, vom examina o altă componentă MDL. Rămâneți aproape!
