Material Design — манифест дизайна от Гугл

Гугл не перестаёт удивлять… Я периодически натыкался на упоминания о Материальном Дизайне, но считал, что речь идет о ещё одном 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, компоненты, скрипты, элементы форм и различные анимационные эффекты.

Сайт проекта MDL .

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

Мало букафф? Читайте есчо !

Поиск выхода из лабиринта

Июнь 3, 2023 г.

Продолжаем разбор классических задач по программированию. На этот раз лабиринтовая задача, которая формулируется так - дан плоский лабиринт в виде двумерного массива, где стенка отмечена 1, а свободный участок как 0. Также дана начальная позиция игрока, ...

Читать

Cannot find implementation for Database. Database_Impl does not exist (Room)

Февраль 11, 2025 г.

Данная ошибка при работе c Room обычно связана с неполным или неверным описанием в gradle файлах, связанных с обработчиком аннотаций. Т.е. суть ошибки в том, что он просто не может прочитать аннотации, которые вы сделали к классу базы данных, и по умолчанию ...

Читать

Рихтуем вывод полей во flamingo CF7

Апрель 12, 2023 г.

Пользуюсь flamingo для протоколирования отправленных данных через Contact Form 7. Очень не удобно, что ссылки и сохраненные файлы выводятся как plain text. Но, мы это сейчас исправим! Поля flamingo выводит через функцию форматирования, которая ...

Читать

Добавляем настройки к js плагину CKEditor 5 в Drupal

Март 19, 2024 г.

Когда вы настраиваете форматы текстов, то кроме добавления иконок в toolbar wysiwyg, вы можете видеть набор настроек для разных плагинов CKEditor. Посмотрим ...

Читать
 

Комментарии к «Material Design — манифест дизайна от Гугл»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: