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