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

Material Design – это язык дизайна, созданный Google. Согласно material.io, Material Design преследует цель:

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

Зачем использовать Material Design?

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

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

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

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

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

Как начать

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

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="
<!--Compiled and minifed jQuery -->
<script type="text/javascript" src="
<!-- 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

. 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 доступно многое другое (например, переходы, карточки, карусель и моды). Вы можете узнать, как использовать все компоненты из документов. Названия классов очень просты, а сетка действительно помогает быстро создавать адаптивные столбцы. Я желаю вам успеха!