Brzi uvod u Dizajn materijala pomoću materijala

Što je dizajn materijala?

Material Design jezik je dizajna koji je stvorio Google. Prema material.io, Material Design ima za cilj kombinirati:

... klasična načela dobrog dizajna s inovacijom i mogućnošću tehnologije i znanosti. Cilj mu je razviti jedinstveni temeljni sustav koji omogućava jedinstveno iskustvo preko platformi i veličina uređaja. Propisi za mobilne uređaje su temeljni, ali dodir, glas, miš i tipkovnica su prve metode unosa.

Zašto koristiti dizajn materijala?

Material Design pruža besprijekorno korisničko iskustvo na svim uređajima. Osjetljivi prijelazi i animacije, zajedno s efektima podmetanja i dubine, poput sjenki i munje, čine da se osjećate elegantno i prilagođeno korisniku. Google koristi Material Design u gotovo svim svojim aplikacijama (kao što su Keep i Calendar).

Kako možete upotrebljavati dizajn materijala u svojim web-aplikacijama?

Materialize je odgovarajuća knjižnica sa prednjim komponentama slična Bootstrap-u. Nudi sve što Bootstrap može ponuditi, ali razlika je u tome što Materialize slijede materijalne principe dizajna. Evo primjera predloška.

Evo popisa značajki koje Materialize nude:

  • rešetka
  • stolovi
  • Značke, gumbi, krušne mrvice
  • Karte, čips, zbirke
  • Podnožje, obrasci
  • Navbara
  • I još puno toga!

Kako započeti

Za razliku od Bootstrapa, za materijalizaciju nije potreban popper.js. Zahtijeva samo jQuery. Ovo je sve što je potrebno za početak. Dodajte to svom HTML-u i dobro ćete ići!




boje

Pomoću Materialize možete promijeniti boju bilo kojeg HTML elementa tako da mu jednostavno date naziv klase boje koju želite. Na primjer, ako oznaci paragrafa želite dati crvenu boju, učinite sljedeće:

Lorem Ipsum

Pored toga, možete također svijetliti ili potamniti boju tako što ćete joj dati naziv druge klase svjetliji-1 ili potamniti-1. Na primjer,

Uzorak teksta

. 1 se može zamijeniti brojevima do 5 za osvjetljenje i do 4 za potamnjenje. Veći brojevi primijenili bi svjetlije ili tamnije nijanse boje.

tipke

Za materijalizaciju gumba samo navedite naziv klase btn. U njega možete dodati i cool animaciju dajući joj efekt valova druge klase. Ako trebate veći gumb, može se koristiti btn-velika klasa. Na primjer:


  Klik
 

  Klik
 

  Klik
 

Sjena

U dizajnu materijala sve bi trebalo imati određenu z-dubinu koja određuje koliko je element uzdignut ili blizu stranice.

Za primjenu efekta sjene na element, može se koristiti klasa z-dubina-2 (2 se mogu zamijeniti brojevima 1-5). Na primjer:

Zaključak

Ovdje sam samo ogrebao površinu. U materijalu je mnogo više dostupno (poput prijelaza, kartica, vrtiljaka i modaliteta). Možete naučiti kako koristiti sve komponente iz dokumenata. Nazivi klasa su vrlo jednostavni i mreža je stvarno korisna za brzo stvaranje brzih stupaca. Želim vam sreću!