10 fragmente utile de cod de proiectare a materialelor

Nebunia designului de materiale ia cu asalt lumea web. În fiecare lună, găsesc site-uri noi care rulează pe stilul materialului folosind cadre sau kituri personalizate de UI.

Dar acesta nu este un lucru rău, dimpotrivă! Aceasta este o modalitate de a vă simplifica procesul de proiectare lucrând cu tendințe dovedite pe care Google le recunoaște drept propriul limbaj de design preferat.

Dacă sunteți pasionat de stilul de design al materialelor, atunci aceste fragmente de cod sunt pentru dvs. Acestea sunt doar 10 dintre preferatele mele, care oferă o varietate de modele și componente de ales.

Tabel receptiv

Iată un fragment de design de material cu o răsucire unică. Acest tabel receptiv creat de Sergey Kupletsky găzduiește de fapt și alte link -uri către fragmente de design material. Destul de la moda!

Acest lucru este creat în mod natural folosind tehnici de proiectare a materialelor, de asemenea, astfel încât masa ar trebui să se potrivească perfect în propriul aspect. Dar cea mai dificilă parte a designului mobil este realizarea de mese care funcționează pe ecrane mai mici.

Cred că această metodă este una dintre cele mai bune modalități de a o gestiona. De asemenea, codul dvs. rămâne curat, ceea ce face foarte ușor să codați, să curățați și să gestionați, indiferent de dimensiunea tabelului.

Tranziții ale interfeței cardului

Dezvoltatorul Ivan Villamil a construit acest design unic al interfeței de utilizare a cardului, cu niște animații destul de nebunești.

Aruncă o privire pe pagină și încearcă să dai clic pe oricare dintre carduri. Veți obține un efect animat unic în care conținutul cardului se anime peste container și apare în vedere. Este ca ceva ce v-ați aștepta să găsiți într-o aplicație mobilă, dar portat pe web!

Efectele de animație sunt impecabile și arată cât de mult poți face astăzi pe web. Ca să nu mai vorbim că stilul materialului este potrivit pentru această interfață de utilizare combo web/mobil.

Conectare compactă

De-a lungul anilor mei ca designer, am văzut niște formulare de conectare foarte interesante. Dar acest design nebun ar putea să ia prajitura pentru caracteristicile sale interactive și stilurile unice.

Când faceți clic pe pictograma roz aprins din colțul din dreapta sus, veți primi un câmp de înregistrare care apare deasupra paginii. Este destul de unic și creează o interfață cu adevărat utilizabilă.

Deci, care este captura? Acest lucru folosește foarte mult JavaScript, deci nu este cea mai bună soluție din punct de vedere al codului. Dar încă un exemplu excelent de proiectare cu caracteristici compacte.

Populați animație

Scott Kellum a dezvoltat acest aspect interesant al cardului de materiale care se completează automat odată ce pagina se încarcă. Aceasta se dezvoltă într-o grilă în care puteți trece cu mouse-ul pe fiecare card pentru a vedea caracteristicile de design material în acțiune.

Nu pot spune cât de util este acest lucru într-un proiect direct sau cât de mult ai putea obține din el. Dar acesta este un fragment distractiv care arată design off-grid pentru web, amestecând o notă de material cu animații de tip hover.

Material BS4 Butoane

Din multele șabloane Bootstrap disponibile online, mai bine credeți că unele dintre ele folosesc designul materialului. Și acest stilou prezintă toate lucrurile interesante pe care le puteți face cu designul materialului în Bootstrap 4.

Într-adevăr, aceasta este doar o colecție de butoane remodelate în limbajul material al Google. Dar totul rulează pe cel mai nou cadru BS4, astfel încât să le puteți adăuga pe orice pagină alimentată de Bootstrap.

Dacă sunteți serios despre Bootstrap, aruncați o privire la cea mai nouă versiune pentru a vedea ce părere aveți. Funcționează grozav ca fundație pentru orice, iar acest lucru este valabil mai ales pentru site-urile materiale.

Material Design Select Menu

Meniurile de selectare drop-down sunt un element de bază în designul formularelor. Acestea permit utilizatorilor să aleagă dintr-o mână de răspunsuri pe subiecte relevante precum state, țări, limbi și așa mai departe.

Această selecție a designului materialului ridică meniul de selectare HTML comun la un nivel cu totul nou.

Nu se bazează pe stilul tipic de document pentru a alege o opțiune. În schimb, aceasta utilizează o listă neordonată cu jQuery care gestionează animațiile și procesul de selecție. Și trebuie să spun că chestia asta dă în cuie stilul material.

Umbre materiale

Google chiar împinge umbre pentru profunzime în documentația materială. Acesta este ceea ce veți vedea în acest stilou în care cercurile au propriile lor efecte distincte de umbră.

Cu umbre puteți desemna ierarhie elementelor paginii, astfel încât unele să apară deasupra, altele mai jos. Creează o iluzie de spațiu pe ecran, care este utilă în special pe ecranele tactile.

Un efect destul de grozav și cu siguranță ceva ce ai putea copia în propriile proiecte.

Interfața de utilizare a cardului meteo

Dezvoltatorul Thomas Vallez a creat această placă meteo minunată care rulează pe HTML și CSS pur. Folosește un simplu efect de fade-in la încărcarea paginii, dar adevărata frumusețe aici este stilul de design al materialului.

Totul, de la culori la fonturi și chiar și pictograma vreme, toate se bazează pe stiluri de materiale naturale.

Puteți lua acest șablon și îl puteți folosi pentru aproape orice tip de aspect de card. Este fenomenal și cu siguranță unul dintre cele mai simple proiecte din această listă.

Filele de material

Iată un proiect interesant care se bazează pe ideea filelor de design material. Michael Richins a creat acest stilou cu niște JavaScript de bază și cunoștințe despre regulile de proiectare ale Google.

Filele funcționează exact așa cum v-ați aștepta pe alte dispozitive similare, cum ar fi smartphone-uri sau tablete Android. Ca să nu mai vorbim că acest lucru rulează pe JavaScript simplu , așa că nu trebuie să vă faceți niciodată griji cu privire la jQuery sau oricare dintre acele lucruri.

Un efect destul de grozav dacă cauți file pe site-ul tău. Asigurați-vă că testați stilurile pentru a vedea dacă se îmbină în mod natural cu pagina dvs.

Faceți clic pe Animație de răspuns

Dezvoltatorul Emmanuel Pilande a creat acest efect de răspuns cool ca o modalitate simplă de a replica microinteracțiunile materiale ale Google.

Faceți clic oriunde pe cărțile de material pentru a vedea efectul. Și puteți aplica acest lucru la aproape orice, de la butoane la containere de pagină sau câmpuri de introducere.

Se bazează pe ceva JavaScript, dar este și simplu de adăugat la orice proiect. Așa că, dacă te îndrepți pentru acel aspect de material au naturale , acesta este un fragment grozav de salvat.