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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Material Design Lite — что это?

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

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

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

Поехали!

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

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

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

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

Заключение

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

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

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки: , , ,

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree