Как использовать Material Design Lite: Карточки

Изучение Material Design Lite: Карточки

От автора: карточки быстро заняли свое место в пользовательских интерфейсах, особенно на мобильных устройствах. Спасибо можно сказать крупным известным сайтам, таким как Pinterest, Twitter и Google Now. На нашем сайте Tuts+ на главной странице вам также представлены различные курсы или просто последние статьи в карточном стиле.

Material Design Lite как использовать

В этом уроке мы подробно разберем компонент карточки в MDL. Из спецификации следует, что карточка это:

«Небольшой кусочек бумаги с уникальными данными, который служит точкой входа для получения более подробной информации.»

В карточке может быть текст, изображение, или даже комбинация обоих, также карточка может содержать и другие компоненты MDL. В интернете мы, в основном, используем данный шаблон, для отображения последних постов в блоге, новостей, видео, товаров и т.д.

Material Design Lite — что это?

Material Design Lite — это новый фреймворк от Google, фреймворк для веб-разработчиков, позволяющий верстать страницы просто и быстро.

Как и в предыдущих уроках, сначала требуется подключить MDL библиотеки – стили и файлы JS в шапке документа.

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>

Поставив все файлы на место, теперь мы можем приступить к делу.

Поехали!

Для создания карточки необходимо добавить блок DIV с классом mdl-card и mdl-shadow—2dp, второй класс добавит тень под карточкой. Размер тени можно увеличить, изменив название второго класса. 2dp можно заменить на набор цифр от 3 до 16.

<div class="mdl-card mdl-shadow--2dp"></div>

У нас пока еще не задана ширина. Сделать это можно напрямую через CSS или с помощью компонента MDL grid. Наше демо в данном уроке я хотел бы сделать адаптивным и максимально интегрированным в MDL, так что мы выберем последний вариант. Обернем блок mdl-card новым контейнером с классом mdl-grid.

<div class="mdl-grid">
  <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
  </div>
</div>

Контент карточки

Теперь необходимо определиться с контентом. Предположим, что наши карточки будут использоваться в блоге. Обычно в посте содержится картинка, заголовок новости, краткий отрывок новости и стандартная кнопка «Подробнее», которая отсылает нас на полный текст статьи. Начнем с заголовка. Чтобы его добавить, создадим DIV с классом mdl-card__title.

<div class="mdl-grid">
  <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
    <div class="mdl-card__title"></div>
  </div>
</div>

Внутри этого блока создайте тег заголовка с классом mdl-card__title-text; в зависимости от структуры страницы и уровня контента в карточке заголовок может быть от h1 до h6.

<div class="mdl-grid">
  <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">Learning Web Design</h2>
    </div>
  </div>
</div>

Добавим краткий текст статьи. Создадим новый DIV под заголовком с классом mdl-card__supporting-text. Аннотация поста будет находиться в теге p.

<div class="mdl-grid">
  <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
    <div class="mdl-card__title">
      <h1 class="mdl-card__title-text">Learning Web Design</h1>
    </div>
    <div class="mdl-card__supporting-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
    </div>
  </div>
</div>

Чтобы добавить картинку к новости, над блоком с заголовком необходимо создать тег figure с классом mdl-card__media. У данного элемента по умолчанию есть маленькие отступы, так что давайте их уберем:

.mdl-card__media {
    margin: 0;
}

Финальный код с изображением:

...
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
  <figure class="mdl-card__media">
    <img src="/images/laptop.jpg" alt="" />
  </figure>
  <div class="mdl-card__title">
    <h1 class="mdl-card__title-text">Learning Web Design</h1>
  </div>
  <div class="mdl-card__supporting-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
  </div>
</div>
...

По умолчанию в MDL изображение не растягивается при изменении размера карточки, т.е. если увеличить карточку, то изображение останется того же размера. Медиа контейнер, в котором находится изображение, прячет выходящие за его границы части картинки. Не самым лучшим решением будет использовать крайне длинные изображения:

Карточка слишком высокая :(

Чтобы изображение изменялось в размерах вместе с контейнером и сохраняло свои пропорции, необходимо прописать максимальную ширину изображения в 100%.

Взаимодействие с карточкой

В карточке должен быть тщательно подобран набор действий, которые подходят по тематике контента. Если это твит, к примеру, то обязательно должны быть кнопки Retweet и Follow. Так как у нас карточка это пост в блоге, то у нас точно будет кнопка «Подробнее», также будут кнопки лайк и поделиться. Все эти кнопки мы добавим под аннотацией к статье в блоке DIV с классом mdl-card__actions.

...
<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
  <figure class="mdl-card__media">
    <img src="//tfirdaus.github.io/mdl/images/laptop.jpg" alt="" />
  </figure>
  <div class="mdl-card__title">
    <h1 class="mdl-card__title-text">Learning Web Design</h1>
  </div>
  <div class="mdl-card__supporting-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
  </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 class="mdl-layout-spacer"></div>
    <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
    <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
  </div>
</div>
...

Заметьте: в MDL не прописаны стили по умолчанию для сценария с тремя кнопками. Необходимо добавить парочку своих стилей, чтобы выровнять кнопки.

.mdl-card__actions {
  display: flex;
  box-sizing:border-box;
  align-items: center;
}
.mdl-card__actions > .mdl-button--icon {
  margin-right: 3px;
  margin-left: 3px;
}

И чтобы все это лучше смотрелось, добавим парочку карточек:

Заключение

Использование карточек для отображения последних новостей в блогах это один из самых распространенных подходов. Шаблон карточки можно адаптировать для отображения самого различного контента, от изображения или виджета календаря и до погоды.

Тем не менее, в стандартных классах не прописаны стили для всех сценариев. Так что вам придется самому добавлять новые классы и стили, если вы хотите настроить внешний вид как-то по-другому. Делитесь в комментариях своими работами!

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.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