Краткое введение в дизайн материалов с использованием Materialize

Что такое материальный дизайн?

Material Design - это язык дизайна, созданный Google. Согласно материалу Material.io, Material Design стремится объединить:

… Классические принципы хорошего дизайна с инновациями и возможностями технологий и науки. Он нацелен на разработку единой базовой системы, которая обеспечивает унифицированную работу для разных платформ и размеров устройств. Мобильные заповеди являются основополагающими, но сенсорный ввод, голос, мышь и клавиатура - это методы ввода первого класса.

Зачем использовать дизайн материалов?

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

Как вы можете использовать Material Design в своих веб-приложениях?

Materialize - это отзывчивая библиотека компонентов интерфейса, похожая на Bootstrap. Он предлагает все, что может предложить Bootstrap, но разница в том, что Materialise следует принципам материального дизайна. Вот пример шаблона.

Вот список функций, которые предлагает Materialise:

  • сетка
  • таблицы
  • Значки, пуговицы, сухари
  • Открытки, фишки, коллекции
  • Нижний колонтитул, формы
  • Navbar
  • И многое другое!

С чего начать

В отличие от Bootstrap, Materialize не требует popper.js. Требуется только jQuery. Это все, что вам нужно для начала. Добавьте это в свой HTML, и все будет хорошо!