Material Design Lite

В июле 2015 Google представил Material Design Lite, front-end библиотеку для использования нового стиля Material Design, который сейчас используется на Android.

Домашняя страница: http://getmdl.io/index.html

Есть два варианта использования:

Локальная установка на вашем сервере. Вам нужно загрузить файлы material.{primary}-{accent}.min.css и material.min.js, которые следует присоединить к вашему html-коду. Скачайе архив из домашней страницы и разместите файлы в ваших папках.

Удалённое использование через CDN - вы указываете адреса material.{primary}-{accent}.min.css и material.min.js, которые находятся на серверах Content Delivery Network (CDN). В этом случае код будет следующим.


<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>

Простейший пример для первого знакомства

Примеры с разметкой (Layout)

Примеры с сеткой (Grid)

Примеры с вкладками (Tab)

Примеры с подвалом (Footer)

Примеры с бейджами (Badge)

Примеры с кнопками (Button)

Примеры с карточками (Card)

Примеры с индикаторами (Progress bar, Spinner)

Примеры с меню (Menu)

Примеры с ползунками (Slider)

Примеры с переключателями