Share
Am sentimentul că CodePen va fi absolut umplute cu Material Design în lunile următoare. De ce? Deoarece Google tocmai și-a dezvăluit proiectul Lite Material Lite (MDL). Această bibliotecă de componente front-end permite utilizatorilor web să implementeze specificația de proiectare Google folosind HTML, CSS și JavaScript de la vanilla. Este o implementare ușoară a spec. Material Design (puține dependențe, low overhead, foarte concentrat), prin urmare, numindu-l "Lite".
În lansarea MDL, Google a răspuns cererii foarte evidente. Ei au luat act de faptul că s-au depus eforturi din partea comunității pentru a construi cadre de inspirație pentru designul materialelor, cum ar fi designul materialelor de tip Bootstrap, materialul și materialul UI, pentru a numi doar câteva. Cu MDL, construit în strânsă colaborare cu echipa Chrome UX, Google a stabilit un standard pentru modul în care materialul de proiectare ar trebui implementat pe site-uri web.
Să ne uităm la ceea ce MDL a adus la masa cu prima sa eliberare!
Spre deosebire de elementele de design al materialelor polimerice (cunoscute și sub denumirea de Elemente de hârtie), care sunt dezvoltate pentru site-uri și aplicații extrem de interactive, bazate pe date, MDL se concentrează în principal pe site-uri cu conținut mai simplu, cum ar fi blogurile,.
În această versiune inițială, MDL vine cu o mână de componente, printre care:
Componenta de aspect are un număr de blocuri pentru construirea de pagini. De exemplu, grila: o caracteristică fundamentală a oricărui cadru frontal. Rețeaua MDL este construită cu Flexbox și un pic de ajutor de la CSS calc (). Are douăsprezece coloane pentru porturi de vizualizare mari, opt coloane pentru ceea ce ați putea numi ferestrele de vizualizare în format table și patru coloane pentru ferestrele de vizualizare mai mici.
Componenta Layout a MDL cuprinde, de asemenea, navigare, tab-uri și subsoluri - fiecare dintre acestea fiind optimizate pentru diferite dimensiuni ale ferestrelor de vizualizare.
În conformitate cu principiile de proiectare a materialelor, există mai multe tipuri vizuale diferite de buton, dintre care unele sunt:
Fiecare buton poate fi imbunatatit cu efectul de infasurare familiar.
Un card este un container pentru afișarea conținutului, cum ar fi textul și imaginile, care de obicei promovează un fel de acțiune. De exemplu, o imagine cu un buton "similar" sau "partajați", o listă de muzică cu butonul "redare" sau poate o notă cu butonul "Salvați".
O insignă este un cerc mic, poziționat în apropierea unui element UI, care conține, de obicei, un număr (probabil pentru a indica mesaje noi necitite sau chaturi primite) sau o pictogramă. În zilele noastre, în cazul în care informațiile se strecoară fără sfârșit peste dispozitivele noastre, o "insigna" poate fi considerată un element UI foarte important în orice design.
Altele esențiale pe care le veți găsi în MDL includ câmpurile de introducere, glisoarele, comutatoarele, meniurile, tooltipurile și pictogramele de design material.
Faceți cunoștință cu componenteleMai mult decât atât, Google oferă și câteva template-uri pentru a vă ajuta să vă faceți rapid și să aveți o structură adecvată. Există cinci tipuri de șabloane în această versiune inițială:
Modelul șablonului de aspect al blogului MDL destul de gustosModelele MDL sunt structurate cu Sass și metodologia BEM. Stilurile pot fi personalizate în mai multe moduri, chiar înainte de a descărca pachetul cadru. Un astfel de mod este cu roata de culori de pe pagina Particularizare. Rotița de culoare vă permite să selectați accente color pe baza selecției primare a culorii. Instrumentul personalizat va genera apoi foaia de stil, pe care o puteți descărca sau link-ul direct de la Google CDN.
Previzualizarea builderului temelor MDLFișierul material.min.css rezultat este destul de mic (17,6kB gzipped), dar pentru cei care au nevoie de un control complet pentru a le distruge până la maxim, codul sursă este disponibil în depozitul Github.
Deoarece majoritatea componentelor din MDL sunt construite cu ajutorul tehnicilor web de ultimă oră, cum ar fi calc (), flexbox, querySelector, și classList, MDL va funcționa perfect în browserele moderne veșnic verzi: Chrome, Firefox, Opera, Microsoft Edge. MDL se va degrada cu grație în browserele mai vechi, cum ar fi IE9, servind doar versiunea CSS. Elementele interactive (cum ar fi efectul de rupere în buton, de exemplu) nu vor fi prezente.
Spunând asta, UI este încă remarcabil de prezentat în IE8. De exemplu, aruncați o privire asupra butoanelor și a elementelor de tabele:
Ați fi iertat că vă gândiți că acum avem un cadru suplimentar pentru a pune în setul de instrumente împreună cu Bootstrap și Fundația. Cu toate acestea, MDL nu intenționează să înlocuiască sau să devină un succesor Bootstrap. Designul materialelor face parte din misiunea Google de a se asigura că interfețele utilizatorilor, precum și experiențele din gama lor de produse sunt consecvente, uniforme și luate în considerare.
Să ne reamintim de o clipă ideea de bază:
"Ne-am provocat să creăm o limbă vizuală pentru utilizatorii noștri, care sintetizează principiile clasice de design bun, cu inovația și posibilitățile tehnologiei și științei".
Așadar, amintiți-vă, în timp ce MDL se potrivește bine cu produsele Google, este posibil să fie în afara contextului atunci când este implementat într-un site care nu are nimic de-a face cu Google. Cu toate acestea, așa cum tocmai am descoperit, Google oferă controlul deplin asupra codului sursă, permițându-ne să-l personalizăm cu cel mai mic detaliu. Și despre asta vom vorbi în următorul articol. Stați așa!
Accentsconagua