Ce este proiectarea materialelor?

Material Design este un limbaj de proiectare creat de Google. Conform material.io, Material Design își propune să combine:

… Principiile clasice ale unui bun design, cu inovația și posibilitatea tehnologiei și științei. Acesta își propune să dezvolte un singur sistem de bază care să permită o experiență unificată pe platforme și dimensiuni de dispozitive. Preceptele mobile sunt fundamentale, dar atingerea, vocea, mouse-ul și tastatura sunt toate metode de primă clasă.

De ce să folosești Material Design?

Designul materialelor oferă o experiență de utilizare perfectă pe toate dispozitivele. Tranzițiile și animațiile responsive, împreună cu efectele de umplere și adâncime, cum ar fi umbrele și fulgerele, îl fac să se simtă elegant și ușor de utilizat. Google folosește Material Design în aproape toate aplicațiile sale (cum ar fi Keep și Calendar).

Cum puteți utiliza Material Design în aplicațiile dvs. web?

Materialize este o bibliotecă de componente front-end receptivă similară cu Bootstrap. Oferă tot ceea ce Bootstrap are de oferit, dar diferența este că Materialize respectă principiile de proiectare a materialelor. Iată un exemplu de șablon.

O introducere rapida la proiectarea materialelor folosind Materialize

Iată o listă de caracteristici pe care le oferă Materialize:

  • Grilă
  • Mese
  • Insigne, butoane, pesmet
  • Carduri, jetoane, colecții
  • Footer, forme
  • Navbar
  • Si mult mai mult!

Cum să începeți

Spre deosebire de Bootstrap, Materialize nu necesită popper.js. Necesită doar jQuery. Acesta este tot ce aveți nevoie pentru a începe. Adăugați acest lucru la HTML și veți fi bine să plecați!

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Compiled and minifed jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

Culori

Folosind Materialize, puteți schimba culoarea oricărui element HTML, oferindu-i pur și simplu un nume de clasă al culorii dorite. De exemplu, dacă doriți să dați etichetei de paragraf culoarea roșie, faceți următoarele:

<p class=”red”>Lorem Ipsum</p>

În plus, puteți, de asemenea, să luminați sau să întunecați o culoare, oferindu-i un alt nume de clasă lighten-1 sau darken-1. De exemplu, <h1 class=”blue lighten-1”>Sample Text

. 1 poate fi înlocuit cu numere de până la 5 pentru iluminare și până la 4 pentru întunecare. Numerele mai mari ar aplica nuanțe mai deschise sau mai întunecate ale culorii.

Butoane

Pentru a materializa un buton, pur și simplu dați-i numele clasei btn. De asemenea, puteți adăuga o animație interesantă oferindu-i o altă clasă waves-effect. Dacă aveți nevoie de un buton mai mare, btn-large se poate folosi clasa. De exemplu:

<button class=”btn”>
  Click
</button> <!-- Materialized button without click animation -->
<button class="btn waves-effect">
  Click
</button> <!-- Materialized button with click animation -->
<button class="btn-large">
  Click
</button> <!-- Large Button -->

Umbră

În proiectarea materialelor, totul ar trebui să aibă o anumită adâncime Z care să determine cât de departe este ridicat sau aproape de pagină elementul.

Pentru a aplica un efect de umbră unui element, z-depth-2 clasa poate fi utilizată (2 pot fi înlocuite cu numerele 1-5). De exemplu:

<div class="z-depth-2"><!-- Really cool stuff --></div>

Concluzie

Am zgâriat doar suprafața aici. Există mult mai multe disponibile în Materialize (cum ar fi tranziții, cărți, carusel și moduri). Puteți afla cum să utilizați toate componentele din documente. Numele claselor sunt foarte simple, iar grila este foarte utilă pentru a crea rapid coloane receptive. Iti urez noroc!