От автора: в 2014 Google опубликовали спецификацию Material Design, визуального языка, цель которого свести вместе устоявшиеся принципы дизайна, бесшовный пользовательский опыт на различных платформах и устройствах, а также технологические и научные инновации.
В июле 2015 свет увидел Material Design Lite, front-end библиотеку, спроектированную для того, чтобы облегчить переход на material design. В этой статье я сосредоточусь на следующих фундаментальных принципах и компонентах материального дизайна и на том, как можно их задействовать с помощью библиотеки Material Design Lite (MDL):
Типографика
Цвет
Слой
Карточка
Демо проект
Демо проект для этой статьи называется Kaptain Kitty. Это HTML шаблон, цель которого проиллюстрировать концепцию материального дизайна и его компоненты, о которых я расскажу в этой статье. Если по мере прочтения статьи вы хотите разобраться в Material Design Lite, вам нужно подобрать хороший редактор и современный браузер. Посмотреть демо и его исходники можно на CodePen:
Как подключить Material Design Lite в ваш проект
Если вы хотите подключить MDL в свой проект, вам необходимо:
Загрузить необходимые CSS и JavaScript файлы с помощью CDN (Content Delivery Network).
Загрузить минифицированные CSS и JavaScript файлы и разместить их на вашем сервере.
Загрузить и создать исходный код с MDL на GitHub.
Если вы используете Bower в качестве менеджера, для установки MDL в папку bower_components можно набрать следующую команду: bower install material-design-lite –save
Если же вы используете npm, для установки MDL в папку node_modules необходимо вбить следующую команду: npm install material-design-lite –save
Google рекомендует использовать CSS и JS файлы, расположенные на CDN. Данный метод мы и использовали в демо. Прежде всего, в шапке head HTML документа необходимо подключить CSS файл MDL, иконки Material Design и стили проекта, в которых можно будет вносить собственные изменения:
|
1 2 3 4 5 |
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="css/styles.css"> |
Далее, перед закрывающим тегом body необходимо добавить ссылку на JS файл MDL:
|
1 2 |
<script src="//storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> |
Типографика в Material Design Lite
Для английского языка и похожих на него (латинские, греческие и кириллические символы) в материальном дизайне были выбраны шрифты Roboto и Noto.
Noto также поддерживает «плотные» скрипты типа китайского, японского и корейского, а также «высокие» скрипты типа языков юго-восточной Азии и ближнего востока, т.е. арабский, хинди и т.д. Чтобы подключить шрифт Roboto в свой проект, добавьте тег link в верхушку head HTML документа:
|
1 2 |
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300"> |
Для латинских, греческих и кириллических символов спецификация материального дизайна рекомендует типографский масштаб 12, 14, 16, 20 и 34. Применить типографские принципы MDL можно, добавив набор специальных классов в разметку. К примеру, .mdl-typography—display-2 для h1 и .mdl-typography—display-1 для <p> сделает шрифт размером 45px и 34px соответственно:
|
1 2 3 4 |
<h1 class="mdl-typography--display-2">Title</h1> <p class="mdl-typography--display-1"> Sub-title </p> |
В MDL довольно много классов с типографскими масштабами, доступностью и читаемостью. Классы облегчают отображение текстового контента, который после этого приятно читать независимо от устройства, с которого просматривается сайт.
Как выбрать цвет для вашего проекта в MDL
Взгляните на файл MDL библиотеки material.indigo-pink.min.css. Название файла отсылает нас к цветовой палитре Material Design в стилях. В цветовой палитре по умолчанию используется цвет indigo в качестве основного, а розовый как акцентный. Но вы ни в коем случае не ограничиваетесь этими цветами. Ниже представлены рекомендации материального дизайна о том, как разработать собственную цветовую палитру и как использовать ее в MDL.
Принципы по подбору цвета в Material Design
Материальный дизайн любит сочетать яркие и приглушенные цвета, тени и подсветки: «Цвет должен быть неожиданным и ярким
Спецификация Google Material Design»
Тем не менее, это не означает, что можно использовать произвольные цвета на веб-странице. Все совсем наоборот.
Материальный дизайн предлагает широкий выбор красивых гармоничных цветовых палитр. Для облегчения подбора цветов, каждый цвет в палитре имеет несколько уровней и значений в шестнадцатеричной системе. В рекомендациях к материальному дизайну насчитывается 500 основных цветов. Остальные цвета лучше использовать для акцента.
При разработке собственной палитры материальный дизайн рекомендует использовать три оттенка основной палитры и один акцентный цвет из вторичной палитры. Пример:
Используйте акцентный цвет только на ссылках, основных кнопках и еще парочке компонентов типа переключателей и слайдеров. Не используйте акцентный цвет для основного текста:
Также в рекомендациях не поощряется использование акцентных цветов на больших областях веб-страницы или баров в приложениях. Крайне важно не использовать одинаковые цвета для плавающих кнопок и фона:
После того, как вы поняли принципы применения цветов в материальном дизайне, самое время подобрать крутую цветовую палитру для своего MDL проекта. Ниже я расскажу, как это сделать.
Как настроить цветовую палитру по умолчанию в Material Design Lite
Переключиться с родной цветовой палитры индиго-розовый на свою можно одним из способов. Если вы использовали Google CDN, как в демо выше, вам необходимо:
Задать URL к файлу стилей MDL в атрибуте href ссылки link в шапке header вашего HTML документа.
Заменить indigo и pink на свои первичный и акцентный цвета соответственно.
К примеру, вы выбрали бирюзовый как основной, а желтый как акцентный цвета в палитре. Ниже показано, как будет выглядеть URL к MDL стилям на CDN:
|
1 2 |
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css"> |
Вот и все! Если же вы храните скомпилированные и минифицированные MDL файлы на своем сервере, тогда вам поможет сайт MDL. Там вы найдете Customize and Preview tool, с помощью которого можно выбрать основной и акцентный цвета на интерактивном колесе палитры. Затем можно загрузить CSS файл с выбранной темой и вставить его напрямую в проект:
В HTML демо к этой статье используется палитра по умолчанию indigo-pink, но вы вольны экспериментировать с различными цветами одним из двух способов.
MDL компонент слой
MDL предлагает множество широко используемых веб-компонентов, среди которых слои, кнопки, карточки, переключатели и т.д. Начните создавать структура вашего HTML шаблона с помощью слоев Material Design Lite. MDL слой распространяется на весь контейнер с классами .mdl-layout .mdl-js-layout. Начните с кода ниже, вставьте его сразу после открывающего тега body:
|
1 2 3 |
<div class="mdl-layout mdl-js-layout"> <!—вся разметка шаблона --> </div> |
Для создания слоев в MDL используется CSS flexbox. Тег с классом .mdl-layout является flex контейнером со свойством flex-direction property: column. Слой состоит из следующих подкомпонентов:
Слой навигации
Сетка
Вкладки
Футер
Как использовать вкладки для навигации
Создать меню можно одним из следующих способов:
Прозрачный хедер
Фиксированная боковая панель без хедера
Фиксированный хедер
Фиксированные хедер и боковая панель
Прокручивающийся хедер
Каскадный хедер
Можете свободно посмотреть все вышеперечисленные опции в разделе MDL navigation, а также поэкспериментировать с каждой из них в своем проекте.
Что касается демо в начале статьи, то там я выбрал в качестве меню компонент Tabs . Чем хороши вкладки это тем, что хотя контент и поделен на отдельные экраны в секциях, все секции физически расположены на одной странице. Это значит, что при клике на ссылку вкладки пользователи не ждут, пока сервер загрузит новую страницу в браузере. Контент доступен мгновенно, создавая тем самым приятные ощущения у посетителей сайта.
Чтобы быстро создать хедер с вкладками вам понадобится: Добавить еще два класса к контейнеру, который мы создали ранее — .mdl-layout—fixed-header и .mdl-layout—fixed-tabs.
|
1 2 3 4 |
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs"> </div> |
Обратите внимание на то, как MDL использует CSS классы из пространства имен BEM.
Далее, измените код хедера на следующий:
|
1 2 3 4 5 6 7 8 9 10 11 |
<header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">Your Title</span> </div> <!-- Tabs --> <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a> <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a> </div> </header> |
И осталось добавить соответствующие панели с контентом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<main class="mdl-layout__content"> <!-- Panel 1 --> <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1"> <div class="page-content"> <!-- контент панели 1 --> content panel 1 </div> </section> <!-- Panel 2 --> <section class="mdl-layout__tab-panel" id="fixed-tab-2"> <div class="page-content"> <!-- контент панели 2 --> content panel 2 </div> </section> </main> |
У панели с id=»fixed-tab-1″ задан класс .is-active, она будет отображаться по умолчанию.
Как разместить дополнительный контент в боковой панели
В демо также используется секция drawer. Drawer это боковая панель, которую можно прятать или показывать по клику на кнопку. Также можно сделать так, чтобы панель была открыта и фиксирована, чтобы ее контент всегда был виден.
Боковая панель отлично подходит для виджетов, кнопок «поделиться» и дополнительных ссылок меню на веб-страницы, чтобы не загромождать основной дизайн. В сочетании с кодом, который мы добавили выше, напишите следующий кусок кода сразу после тега header, чтобы добавить компонент боковой панели на слой:
|
1 2 3 |
<div class="mdl-layout__drawer"> <span class="mdl-layout-title">Your Title</span> </div> |
Просмотрите эти кусочки кода в действии или взгляните на готовое демо с вкладками и боковой панелью.
Сетка в Material Design Lite
MDL использует 12-ти колоночную сетку для настольных компьютеров, 8-ми колоночную сетку для планшетов (до 800px) и 4-х колоночную для экранов мобильных устройств (до 500px). Сделать контейнер сеткой можно, добавив класс .mdl-grid:
|
1 2 3 |
<div class="mdl-grid"> <!-- колонки --> </div> |
По умолчанию контейнер для колонок сетки занимает всю ширину экрана. Если вас это не устраивает, ограничьте ширину через стили. К примеру, в демо к этой статье реализованы оба варианта, как полноэкранная сетка, так и центрированный блок:
Такого результата можно добиться, если обернуть каждую секцию в разные .mdl-grid элементы, а отдельной секции добавить пользовательский класс с CSS max-width: 960px.
|
1 2 3 |
<div class="mdl-grid intro-section"> <!-- контент не на весь экран --> </div> |
|
1 2 3 |
.intro-section { max-width: 960px; } |
Также если вы хотите избавиться от внешних отступов margin между колонок сетки, в MDL есть замечательный класс, который необходимо добавить к контейнеру колонок — .mdl-grid—no-spacing:
|
1 2 3 |
<div class="mdl-grid mdl-grid--no-spacing"> <!-- контент --> </div> |
Вы получите что-то типа:
Далее необходимо создать колонки внутри элемента .mdl-grid. Сделать это можно, добавив DIV с классом .mdl-cell. Ниже код, в котором созданы три колонки:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="content-grid mdl-grid"> <div class="mdl-cell"> <!-- контент --> </div> <div class="mdl-cell"> <!-- контент --> </div> <div class="mdl-cell"> <!-- контент --> </div> </div> |
Посмотрите демо на CodePen. Если есть необходимость, в MDL есть классы, позволяющие прятать колонки на отдельных размерах экранов:
.mdl-cell—hide-desktop прячет колонки на экранах настольных компьютеров (больше 840px)
.mdl-cell—hide-tablet прячет колонки на экранах планшетов (больше 480px)
.mdl-cell—hide-phone прячет колонки на экранах мобильных устройств (less than and up to 480px)
Чтобы увидеть данную функцию в действии, посмотрите на раздел Welcome в демо на экранах различных размеров. И вы заметите, что на маленьких экранах декоративные розовые точки исчезают:
MDL компонент карточки
Шаблон карточного UI набирает популярность на протяжении довольно длительного времени, особенную благодарность можно выразить сайту Pinterest.
Как материальный дизайн описывает компонент карточку: «Карточка это слой, являющийся точкой входа при запросе дополнительной информации. Карточка может содержать фото, текст и ссылку на один субъект. Material design spec»
Вы можете добавлять различные типы контента в одну карточку, но следите, чтобы все было связано одной тематикой. Также старайтесь не размещать слишком много информации, ссылок и кнопок в одной карточке. Лучше направляйте пользователя на отдельную страницу, где он уже сможет найти больше подробностей по конкретной теме. Ниже показано как добавить простую карточку на страницу с помощью MDL компонента карточка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="mdl-card mdl-shadow--2dp"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Card title</h2> </div> <div class="mdl-card__media"> <img src="card-img.jpg" alt=""> </div> <div class="mdl-card__supporting-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis. </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Read more </a> </div> </div> |
Контент карточки оборачивается в контейнер .mdl-card. С помощью класса .mdl-shadow—{number}dp можно контролировать величину отбрасываемой тени: принимаются значения 3, 4, 6, 8, или 16. Чем больше значение, тем больше отбрасываемая тень. Далее необходимо добавить контейнеры к следующим секциям карточки:
К заголовку при помощи .mdl-card__title
К медиа файлам с помощью .mdl-card__media
К текстовому контенту с помощью .mdl-card__supporting-text
К действиям с помощью .mdl-card__actions, если в карточке есть кнопки или похожие элементы.
И наконец, необходимо дополнить вашу структуру подходящим контентом, убедившись, что тегу заголовка присвоен класс .mdl-card__title-text. Ниже представлено демо:
Также можно превратить ячейки сетки в карточки с помощью класса .mdl-card, который необходимо добавить к элементу с классом .mdl-cell:
|
1 2 3 4 5 |
<div class="mdl-grid"> <div class="mdl-cell mdl-card mdl-shadow--2dp"> <!-- карточка --> </div> </div> |
Данный метод можно увидеть в дополнительном демо. Отличный способ создания адаптивного плиточного макета:
Заключение
Статья была целиком посвящена библиотеке Material Design Lite и тому, как применить ее на практике в реальном HTML шаблоне.
MDL не универсальный фреймворк, как Bootstrap. В нем не охватываются все компоненты и стили, которые могут быть задействованы в вашем приложении. Поэтому, ожидается, что основную часть кода придется писать самостоятельно.
Тем не менее, библиотека развивается, и, может быть, в будущих релизах еще удивит нас новыми функциями. В сети также полно ресурсов по material design для дизайнеров и разработчиков, большинство из которых бесплатные.
Поэкспериментировать с MDL и создать свой собственный проект вы можете, начав с HTML шаблона из этой статьи и шаблонов с сайта MDL.
Автор: Maria Antonietta Perna
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
Комментарии (1)