Google Developers, команда Google, которая создает инструменты и учебные материалы для разработчиков, выпустила фронтенд-веб-фреймворк для создания сайтов по спецификации Material Design.
Новый фреймворк, Material Design Lite (MDL), включает компоненты в стиле Material Design — такие как кнопки, флажки, поля ввода, пользовательскую типографику и многое другое — а также адаптивную сетку и контрольные точки (то есть, что происходит, когда окно становится слишком узким, чтобы отображать все элементы рядом друг с другом), которые соответствуют рекомендациям Google по адаптивному пользовательскому интерфейсу. Рекомендации Google о том, как приложение или веб-сайт, использующий Material Design, перестраивает контент при различных размерах экрана и в режиме реального времени, обеспечивают визуальную согласованность на различных устройствах всех форм и размеров. Компания заявляет, что MDL ориентирован на сайты с большим количеством текста, такие как блоги и маркетинговые страницы.
Любой, кто пользовался веб-фреймворком Bootstrap, сразу поймет MDL. Bootstrap — это аналогичный фреймворк инструментов дизайна и пользовательского интерфейса, который изначально был создан разработчиками Twitter, стремившимися к единообразию интерфейса продукта, разработанного различными командами внутри компании.
У Google уже есть набор компонентов Material Design, доступных для разработчиков в ее веб-библиотеке Polymer, но отличие MDL в том, что это полный пакет, ориентированный на привнесение нового красивого дизайна и языка пользовательского интерфейса компании в веб. В то время как Polymer просто добавляет компоненты Material Design в свою более крупную библиотеку, которые можно использовать индивидуально или вместе для создания сайта в стиле Material Design, MDL — это набор всей специфической типографики, ширин контрольных точек, анимаций и многого другого для создания веб-сайтов, соответствующих спецификации. Polymer — это гораздо более крупный фреймворк, предназначенный для расширения веб-языка HTML путем упрощения создания многократно используемых компонентов — подобно тому, как существуют теги, специально разработанные для форматирования текста как крупного и жирного.
Те, кому не нужна вся дополнительная функциональность Polymer, а просто нужен сайт в стиле Material Design, будут очень комфортно себя чувствовать с MDL. Компания в своем посте в Medium, анонсирующем фреймворк, говорит, что «Lite» в MDL связано с несколькими целями, включая цель MDL иметь «мало зависимостей, что упрощает установку и использование». В этом свете другие цели Google с MDL заключались в том, чтобы сделать его легким — он весит около 27 КБ в сжатом виде — и узкоспециализированным. MDL обеспечивает стилизацию Material Design для веб-сайтов. И всё, ничего больше. На случай, если вам понадобится вдохновение, компания разместила страницу с шаблонами, созданными с использованием MDL.