Практическое введение в Material Design Lite от Google

Практическое введение в Material Design Lite от Google

От автора: в 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 и стили проекта, в которых можно будет вносить собственные изменения:

<link rel="stylesheet"
      href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> 
<link rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/styles.css">

Далее, перед закрывающим тегом body необходимо добавить ссылку на JS файл MDL:

<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>

Типографика в Material Design Lite

Для английского языка и похожих на него (латинские, греческие и кириллические символы) в материальном дизайне были выбраны шрифты Roboto и Noto.

Noto также поддерживает «плотные» скрипты типа китайского, японского и корейского, а также «высокие» скрипты типа языков юго-восточной Азии и ближнего востока, т.е. арабский, хинди и т.д. Чтобы подключить шрифт Roboto в свой проект, добавьте тег link в верхушку head HTML документа:

<link rel="stylesheet"
      href="http://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 соответственно:

<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:

<link rel="stylesheet"
      href="https://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:

<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.

<div class="mdl-layout
            mdl-js-layout mdl-layout--fixed-header
            mdl-layout--fixed-tabs">
</div>

Обратите внимание на то, как MDL использует CSS классы из пространства имен BEM.

Далее, измените код хедера на следующий:

<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>

И осталось добавить соответствующие панели с контентом:

<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, чтобы добавить компонент боковой панели на слой:

<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:

<div class="mdl-grid">
  <!-- колонки -->
</div>

По умолчанию контейнер для колонок сетки занимает всю ширину экрана. Если вас это не устраивает, ограничьте ширину через стили. К примеру, в демо к этой статье реализованы оба варианта, как полноэкранная сетка, так и центрированный блок:

Такого результата можно добиться, если обернуть каждую секцию в разные .mdl-grid элементы, а отдельной секции добавить пользовательский класс с CSS max-width: 960px.

<div class="mdl-grid intro-section">
  <!-- контент не на весь экран -->
</div>
.intro-section {
  max-width: 960px;
}

Также если вы хотите избавиться от внешних отступов margin между колонок сетки, в MDL есть замечательный класс, который необходимо добавить к контейнеру колонок — .mdl-grid—no-spacing:

<div class="mdl-grid mdl-grid--no-spacing">
  <!-- контент -->
</div>

Вы получите что-то типа:

Далее необходимо создать колонки внутри элемента .mdl-grid. Сделать это можно, добавив DIV с классом .mdl-cell. Ниже код, в котором созданы три колонки:

<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 компонента карточка:

<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:

<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

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки:

Комментарии Вконтакте:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree