Гугл не перестаёт удивлять… Я периодически натыкался на упоминания о Материальном Дизайне, но считал, что речь идет о ещё одном CSS Framework. Их и так довольно много, ещё один, пусть даже от Гугл, что с того?
Плотнее познакомиться пришлось в ходе работы, нужно было перенести и перепрограммировать шаблон сайта, использующего MD + Angular. В определенный момент кол-во скриптов, анимаций и плагинов стало неприлично большим — я взял за основу Bootstrap и пичкал шаблон js плагинами и собственными скриптами. И тут я подумал, что было бы проще взять тот же фреймворк, что на сайте-источнике.
Но не тут было. MD оказался не готовым решением от Гугл, а спецификацией, описывающей дизайн. Реализации этой спецификации для разных фреймворков и платформ, очевидно, имеют отличия.
Многоликий Material
Реализаций насчитываются десятки. Только для веб-фреймворков их не менее дюжины. В реализации для Android можно даже было не сомневаться, поскольку это продукт Гугл. Но и для iOS уже разработаны компоненты и шаблоны по спецификации MD.
На практике Material — это стили, скрипты, наборы иконок и шаблонов. А также готовые цветовые решения. Авторы реализаций либо дополняют компоненты существующего фреймворка, либо предлагают вариант реализации Material Design как отдельный фреймворк.
Давайте посмотрим, что уже сделано.
Реализации Material Design для web
Material Design Light
Этот FW можно считать официальной версией MD для web. Так как разработкой занимается компания Google. Но слово «Light» в названии ясно даёт нам понять, что это не исчерпывающее решение спецификации.
Это не плохой старт для веб-приложения, т.к. реализованы основные идеи MD, компоненты, скрипты, элементы форм и различные анимационные эффекты.
Material UI
Реализация интерфейса пользователя в виде набора компонентов для React. Да, детище facebook не осталось в стороне. Это очень детальная проработка спецификации и мне кажется даже немного больше, чем закладывали Гугл :)
Essence
Эссенция также сделана на React. Скачать файлы можно с GitHub, а вот доки периодически не доступны.
Angular Material
Ангулярщикам повезло, они имеют возможность работать с полноценным MD благодаря проекту Angular Material без всяких там Light.
Компоненты, материал иконки и скрипты — все вплетается в канву angular.
LUMX
Ещё одна качественная реализация MD и снова на Angular. Дополнительно требуется jQuery, Velocity и Momentum. Авторы явно не стремились изобретать велосипед и пользуются привычными для себя инструментами, чтобы воплотить заветы Гугла.
Material Design для Bootstrap CSS Framework
Для бутстрапа известно множество проектов (тем), которые воплощают принципы материал в этом популярном фреймворке. Часть из них распространяется бесплатно только в урезанной версии (этакая замануха).
Давайте попробуем сравнить их хотя бы точки зрения цены.
| BMD – Bootstrap + Material Design | Стоимость обычной лицензии — 10$ (использование только в одном проекте). |
| Bootstrap Material | Бесплатно, можно поддержать проект через paypal, реализованы многие элементы спецификации, работа продолжается. Из бесплатных, наверное, наиболее «юзабельна». |
| MD Bootstrap | PRO версия стоит на 1 проект — 79$, есть среди прочего и неограниченная лицензия — 799$. Сравнить преимущества PRO и Free версий можно на сайте. |
| Paper Bootswatch for Bootstrap | Бесплатно. Это фактически тема для bootstrap с элементами MD, но очень поверхностно. |
| Daemonite’s Material UI | Бесплатно, но сыро. Отличия от базового Bootstrap видны лишь искушенному глазу, а до реализации всех фишек MD — как до Луны. |
Materialize
Идеи MD воплотила группа студентов из Carnegie Mellon University. Китайцы решили потягаться с командой гугл (проект MDL) и «запилили» свою реализацию.
Они не только не упустили ничего из концепции, но и добавили от себя кучу скриптов, очень часто используемых для верстки сайта как различные плагины js и jQuery. Т.е. мы получаем очень широкий инструментарий как в плане шаблона, так и в плане анимации.
Сложно сказать насколько качественный продукт у них получился (вопросы кросс-браузерной совместимости, адаптивности и т.п. можно выяснить только путем тестирования). Все таки настораживает, что команда состоит из студентов. :)
Material Foundation
Этот проект после китайцев смотрится весьма скромно. Реализованы лишь некоторые элементы MD, никаких дополнительных скриптов и плюшек. Не тот размах :). Но проект заслуживает внимания, т.к. бесплатен и самодостаточен.
Leaf BETA
Leaf находится в состоянии beta, так что придираться особо не приходится. Сделано далеко не всё и не так хорошо, как в том же Material Foundation. Проект содержит кое какие скрипты, значит автор не собирается ограничиваться только компонентами. Но до китайцев автору пока очень далеко.