Material Design Lite — библиотека шаблонов от Google

Material Design Lite — библиотека шаблонов от Google
09.08.2015 КОММЕНТАРИИ: 0

Отныне создание эффективных, портативных и универсальных сайтов а-ля Google доступно всем! Команда разработчиков интернет-гиганта поделилась с мировым сообществом веб-дизайнеров собственной библиотекой шаблонов Material Design Lite (MDL). Это исчерпывающий набор веб-компонентов в стиле материального дизайна. Библиотека содержит исчерпывающий набор стандартных элементов интерфейса (кнопок, иконок, флажков, форм регистрации, текстовых полей) и специализированных функций (инфокарточек, таблиц, слайдеров, счётчиков, вкладок, шрифтов).

БЕСПЛАТНО скачать набор инструментов Material Design Lite можно на сайте getmdl.io.

Простота технологий реализации MDL

Ключевое преимущество набора элементов Material Design Lite — лёгкость и удобство в использовании. Библиотека MDL выполнена на базе простой разметки vanilla CSS, HTML и Java Script. Она не зависит ни от каких JS фреймворков и изначально оптимизирована для кросс-девайсового и кросс-платформенного использования. Созданные на базе веб-компонентов Google сайты одинаково корректно отображаются и на больших экранах стационарных ПК, и на маленьких дисплеях телефонов, и в ОС Windows для десктопов, и в ОС Android для смартфонов.

Простая структура элементов MDL делает их совместимыми практически со всеми браузерами: последними версиями Chrome, Firefox и даже Microsoft Edge. Кроме того, за счёт изящной деградации компоненты материального дизайна довольно сносно отображаются даже в таких сложных браузерах, как IE9.

Таблица совместимости Material Design Lite с браузерами

Гибкость элементов Material Design Lite, их совместимость со всеми девайсами и браузерами — ключевой принцип разработки библиотеки Google.

Чтобы убедиться в простоте синтаксиса, достаточно взглянуть на фрагмент кода круглой плавающей кнопки.  

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

 

Код кнопки в стиле Material Design Lite

В целях создания блестящего кода элементов библиотеки Google задействовал великие API (интерфейсы программирования приложений):

  • Polymer — для разработки легко загружающихся, красивых и совместимых со всеми браузерами компонентов дизайна;
  • BEM — для создания Saas (абстрагированного кода CSS).

Если вам этого покажется мало, можете воспользоваться специально подготовленным руководством по созданию сайтов на основе Google Material Design Lite или импортировать фрагменты исходного CSS-кода с сайта npm.

API Polymer - основа библиотеки MDL от Google

Удобство использования

Представленные в библиотеке компоненты могут использоваться для разработки современных функциональных сайтов и приложений. Вам достаточно скопировать исходный код любой кнопки / формы / таблицы и добавить его в HTML-версию своей страницы.

Скачать адаптивные макеты, идеально отображающиеся на экранах мобильных телефонов, можно в разделе «Шаблоны».

Скопировать фрагменты кода для бейджей (графических значков для различного рода уведомлений), кнопок, карточек товаров и информационных карточек, адаптивных дизайн-макетов (лейаутов), шкал загрузки, меню, слайдеров, флажков, таблиц, текстовых полей можно в разделе «Компоненты».

Раздел "Компоненты" в библиотеке MDL от Google

Скачать шрифты и наборы иконок, а также подобрать цветовую палитру сайта можно в разделе «Стили».

Поэкспериментировать с созданием цветовой палитры и загрузить понравившийся вариант CSS-стиля можно в разделе «Настройки».

Раздел "Настройки" в библиотеке Material Design Lite

Ложка дёгтя

Размещение в свободном доступе полного инвентаря по созданию интерфейсов в стиле Material Design Lite — это, безусловно, щедрый и благородный поступок со стороны Google. Однако у такого рода благотворительности нашлось множество противников. Одни дизайнеры категорически против того, чтобы их сайты выглядели как приложение Google. Другие и вовсе не приемлют одинаковости веб-интерфейсов. Отсутствие оригинальности, по их мнению, губительно для отрасли веб-дизайна.

Источник: Designmodo.com

Статьи в тему:

«Материальный дизайн — основные постулаты Google»

«Материальный и плоский дизайн: ищем 10 отличий»

 

Добавить комментарий


Защитный код
Обновить