Бързо въведение в Материалния дизайн с помощта на Materialize

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

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

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

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

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

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

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

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

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

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

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

Цветове

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

Lorem Ipsum

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

Sample Texт

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

Бутони

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

 Click    Click    Click  

Сянка

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

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

Заключение

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