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

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

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

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

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

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

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

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

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

С чего начать

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

<!-- 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>

"Цвета"

Используя Materialize, вы можете изменить цвет любого элемента HTML, просто присвоив ему имя класса желаемого цвета. Например, если вы хотите присвоить тегу абзаца красный цвет, выполните следующие действия:

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

Кроме того, вы также можете осветлить или затемнить цвет, присвоив ему другое имя класса lighten-1 или darken-1. Например, <h1 class=”blue lighten-1”>Sample Text</h1>. Цифру 1 можно заменить цифрами до 5 для осветления и до 4 для затемнения. Чем больше число, тем светлее или темнее оттенок цвета.

Кнопки

Чтобы материализовать кнопку, просто дайте ей имя класса btn. Вы также можете добавить к нему классную анимацию, присвоив ему другой класс waves-effect. Если вам нужна кнопка большего размера, можно использовать класс btn-large. Например:

<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 -->

"Тень"

В материальном дизайне все должно иметь определенную глубину по оси Z, которая определяет, насколько высоко или близко к странице находится элемент.

Чтобы применить эффект тени к элементу, можно использовать класс z-depth-2 (2 можно заменить числами 1–5). Например:

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

Заключение

Я здесь только поцарапал поверхность. В Materialize доступно гораздо больше (например, переходы, карточки, карусель и модальные окна). Вы можете узнать, как использовать все компоненты, из документации. Имена классов очень простые, а сетка действительно полезна для быстрого создания адаптивных столбцов. Желаю тебе удачи!