Бързо въведение в Material Design с помощта на Materialize

Какво е материал дизайн?

Material Design е език за дизайн, създаден от Google. Според material.io, Material Design цели да комбинира:

... класически принципи на добрия дизайн с иновациите и възможността за технологии и наука. Тя има за цел да разработи единна основна система, която дава възможност за обединено преживяване в различни платформи и устройства. Мобилните предписания са основни, но докосването, гласът, мишката и клавиатурата са всички първокласни методи за въвеждане.

Защо да използвате Material Design?

Material Design осигурява безпроблемно потребителско изживяване на всички устройства. Отзивчивите преходи и анимация, заедно с подплънките и дълбочините, като сенки и светкавици, я правят елегантна и удобна за потребителя. Google използва Material Design в почти всички свои приложения (като Keep и Calendar).

Как можете да използвате Material Design във вашите уеб приложения?

Materialize е отзивчива библиотека с компоненти от предния край, подобна на Bootstrap. Той предлага всичко, което Bootstrap може да предложи, но разликата е, че Materialize следва принципите на материалния дизайн. Ето примерен шаблон.

Ето списък с функции, които Materialize предлага:

  • решетка
  • Маси
  • Значки, копчета, галета
  • Карти, чипове, колекции
  • Footer, форми
  • Navbar
  • И много повече!

Как да започнем

За разлика от Bootstrap, Materialize не изисква popper.js. Това изисква само jQuery. Това е всичко, което трябва да започнете. Добавете това към вашия HTML и ще бъдете добри!




Цветове

Използвайки Materialize, можете да промените цвета на всеки HTML елемент, като просто му дадете име на клас на желания цвят. Например, ако искате да присвоите маркера на абзаца червения цвят, направете следното:

Lorem Ipsum

Освен това можете също да изсветлите или потъмните цвят, като му дадете друго име на клас lighten-1 или darken-1. Например,

Примерен текст

. 1 може да бъде заменен с числа до 5 за изсветляване и до 4 за потъмняване. По-големите числа биха приложили по-светли или по-тъмни нюанси на цвета.

Бутони

За да материализирате бутон, просто му дайте името на клас btn. Можете също да добавите готина анимация към нея, като й дадете друг клас вълнов ефект. Ако имате нужда от по-голям бутон, може да се използва btn-голям клас. Например:

<бутон клас = „btn“>
  Кликнете
 
 
 

сянка

В материалния дизайн всичко трябва да има определена дълбочина z, която определя колко далеч е повдигнат или близо до страницата.

За да приложите ефект на сянка към елемент, може да се използва клас z-дълбочина-2 (2 могат да бъдат заменени с числа 1–5). Например:

заключение

Само тук съм надраскал повърхността. Има много повече налични в Materialize (като преходи, карти, въртележка и модали). Можете да научите как да използвате всички компоненти от документите. Имената на класовете са много прости и решетката е наистина полезна за бързо създаване на отзивчиви колони. Желая ви късмет!