Від автора: картки швидко зайняли своє місце в користувацьких інтерфейсах, особливо на мобільних пристроях. Спасибі можна сказати великим відомим сайтам, таким як Pinterest, Twitter і Google Now. На нашому сайті Tuts+ на головній сторінці вам також представлені різні курси або просто останні статті в картковому стилі.
Material Design Lite як використовувати
У цьому уроці ми детально розберемо компонент картки в MDL. Специфікації слід, що картка це:
«Невеликий шматочок паперу з унікальними даними, який служить точкою входу для отримання більш детальної інформації.»
У картці може бути текст, зображення, або навіть комбінація обох, картка може містити й інші компоненти MDL. В інтернеті ми в основному використовуємо цей шаблон для відображення останніх постів у блозі, новин, відео, товарів і т. д.
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.
Learning Web Design
Додамо короткий текст статті. Створимо новий DIV під заголовком з класом mdl-card__supporting-text. Анотація поста буде перебувати в тезі p.
Learning Web Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.
Щоб додати зображення до новини, над блоком із заголовком необхідно створити тег figure з класом mdl-card__media. У даного елемента за замовчуванням є маленькі відступи, так що давайте їх приберемо:
.mdl-card__media {
margin: 0;
}
Фінальний код з зображенням:
…
Learning Web Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.
…
За замовчуванням в MDL зображення не розтягується при зміні розміру картки, тобто якщо збільшити картку, то зображення залишиться того ж розміру. Медіа контейнер, в якому знаходиться зображення, ховає виходять за його межі частини картинки. Не найкращим рішенням буде використовувати вкрай довгі зображення:
Картка занадто висока 
Щоб зображення змінювалося в розмірах разом з контейнером і зберігало свої пропорції, необхідно прописати максимальну ширину зображення в 100%.
Взаємодія з карткою
У картці повинен бути ретельно підібраний набір дій, які підходять по тематиці контенту. Якщо це твіт, приміром, то обов’язково повинні бути кнопки Retweet і Follow. Так як у нас картка це пост в блозі, то у нас точно буде кнопка «Детальніше», також будуть кнопки лайк і поділитися. Всі ці кнопки ми додамо під анотацією до статті в блоці DIV з класом mdl-card__actions.
…
Learning Web Design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.
favorite
share
…
Зауважте: в 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;
}
І щоб все це краще виглядало, додамо кілька карток:
Висновок
Використання карток для відображення останніх новин в блогах це один з найпоширеніших підходів. Шаблон картки можна адаптувати для відображення самого різного контенту, від зображення або віджета календаря і до погоди.
Тим не менш, в стандартних класах не прописані стилі для всіх сценаріїв. Так що вам доведеться самому додавати нові класи і стилі, якщо ви хочете налаштувати зовнішній вигляд як-то по-іншому. Діліться у коментарях своїми роботами!
