() translation by (you can also view the original English article)
Мне кажется, что CodePen скоро будет полностью забит Material Design в ближайшие месяцы. Почему? Потому что Google только что выпустил их долгожданный Material Design Lite (MDL). Это библиотека фронт-энд компонентов которая позволяет использовать Google Material Design с помощью vanilla HTML, CSS и JavaScript. Это облегченная реализация спецификаций Material Design, следовательно именуемая «Lite».
При выпуске на рынок MDL, Google руководствовался очевидным спросом. Они приняли к сведению тот факт, что интернет сообществом были предприняты попытки по созданию фреймворков вдохновленных Material Design, таких как: Bootstrap Material Design, Materialize, и Material UI, и других подобных. При помощи MDL, разработанным в плотном сотрудничестве с командой Chrome UX, Google закрепил стандарты для применения Material Design в веб сайтах.
Давайте посмотрим на то что MDL принесло в мир, после своего появления!
Элементы Material Design
В отличие от элементов Polymer Material Design (также известных как Paper Elements) разработанных для высоко интерактивных, работающих с массивами данных веб сайтов и приложений, MDL основное внимание уделяет веб-сайтам с простым контентом, таких как: блоги, интернет магазины и посадочные страницы.
В этом первом выпуске MDL включало в себя такие полезные компоненты как:
Макет
Макет включат в себя ряд строительных блоков для построения страницы. К примеру сетку, основой элемент фронтенд любого фреймворка. Сетка MDL построена на Flexbox и немного на CSS calc(). Она включает в себя 12 колонок для больших экранов, восемь колонок для средних экранов (планшетов) и 4 колонки для маленьких экранов (телефонов).
В Макет MDL также входят такие элементы как: навигация, закладки и нижние колонтитулы, все эти элементы оптимизированы для под различные расширения экрана.
Кнопки
Согласно принципам Materilal Design, существует несколько видов кнопок, таких как:
- Обычная кнопка: прямоугольная кнопка с цветом фона отличным от цвета текста.
- Плоская кнопка: кнопка без фона.
- Отличительная для Material Design плавающая кнопка действия (или FAB): круглая кнопка свободно плавающая в интерфейсе, обычно носящая основное действие текущего экрана или как в данном случае, страницы.
Каждая кнопка может быть анимирована с знакомым нам эффектом ряби.
Карточки
Карточка — это контейнер для вывода контента, такого как текст и изображения, который обычно стимулирует выполнение некоторого действия. Например: картинка с кнопкой «like» или «поделиться», список музыки с кнопкой «Воспроизведение», или к примеру записку с кнопкой «Сохранить».
Значки (Badges)
Значок это маленький кружок расположенный возле определенного UI элемента, включающий число (скорее всего отображающее наличие непрочитанных сообщений или входящих переписок) или иконку. В наше время, бесконечного потока информации через наши устройства, «badge» претендует на важное место в любом UI дизайне.
И это еще не все
Другие неотъемлемые элементы MDL: поля ввода, ползунки, переключатели, меню, подсказки и иконки Material Design.
Кроме того Google также предоставляет несколько готовых шаблонов, для быстрого старта с правильной компоновкой структуры макета. В этом первом релизе существуют пять типов шаблонов:
- Блог
- Статья
- Посадочная страница для приложения или маркетинговых целей
- Панель управления
- Веб-страница с большим количеством теста
Настройка
Стили MDL структурированы с Sass и БЭМ-методологией. Стили можно настраивать различными способами, даже до того, как вы загрузите файлы фреймворка. Один из таких способов это колесо цвета на странице настройки. Колесо цвета позволяет Вам выбрать цветовые акценты, на основе основного цвета. Настройщик генерирует таблицу стилей, которую можно скачать, или ссылку напрямую на Google CDN.
Получаемый в результате файл material.min.css занимает очень мало места (17,6 kB в сжатом виде), но для тех, кому нужен полный контроль, для правок по максимуму, исходный код доступен в хранилище Github.
Поддержка браузера
Так как большинство компонентов MDL построены по передовым техникам, например calc(), Flexbox, querySelector и classList, MDL будет корректно работать отлично только в современных браузерах: Chrome, Firefox, Opera, Microsoft Edge. В старых браузерах, таких как IE9, MDL сможет работать только в CSS версии. Интерактивные элементы (например, эффект ряби на кнопках) не будет работать.
Нужно сказать что UI тем не менее удивительно презентабельно смотрится в IE8. К примеру взгляните на кнопки и табличные элементы:
В заключение
Не будет вины сказать что теперь у нас есть новый фреймворк в арсенале, который можно поставить в один ряд с Bootstrap и Foundation. Тем не менее MDL не стремится заменить, или стать преемником Bootstrap. Material Design это часть миссии Google по обеспечению единства, постоянства и последовательности UI и UХ, во всей линейке продуктов Google.
Давайте на секунду вернемся к ключевой идеи:
«Мы взяли вызов разработать визуальный язык для наших пользователей, который синтезирует классические принципы хорошего инновационного дизайна и возможности науки и технологии». – Введение в Google Material Design
Так что учтите что MDL созданный хорошо сочетаться с продуктами Google, может оказаться неуместным в случае разработки сайта который не имеет ничего общего с Google. Тем не менее, как мы только что узнали, Google предоставляет полный контроль над исходным кодом, что позволяет нам настраивать его до мельчайших деталей. Но об этом мы будем говорить в следующей статье. Следите за обновлениями!
Также почитайте
