От автора: автор статьи – наш гость, Левин Мехия, дизайнер адвокат с сайта Shopify. В своей новой теме, разработанной для Shopify, они использовали технологию Flexbox. Данной и другими техниками они хотят с нами сегодня поделиться в этой статье по дизайну макета страницы. На что я ответил – да, конечно.
Каждый день на сайте Shopify я разговариваю с партнерами, которые постоянно раздвигают границы возможного в дизайне электронной коммерции. Совсем недавно я заметил, что некоторые дизайнеры в своих магазинах экспериментируют с Flexbox. Одной из наших основных целей, как у дизайнеров и разработчиков, является фокусировка внимания пользователя на контенте, а также упрощение навигации по контенту. Для достижения поставленных задач нам необходим функциональный макет, в котором все функции уходят на второй план, а основным игроком становится контент.
Flexbox помогает нам создавать гибкие макеты, адаптирующиеся как под настольные компьютеры, так и под мобильные устройства. Но почему мы его не используем? Многие из нас до сих пор используют обтекания и display: inline-block. Конечно, вы лучше знаете свою аудиторию. Если у вас множество пользователей используют, к примеру, IE9 и ниже, а вы не можете обеспечить соответствующий фолбек, то вы застрянете в обтеканиях. Однако flexbox сегодня поддерживается большим количеством браузеров.
Я верю в то, что можно чему-то научиться, практикуясь в этом. В этой статье я расскажу вам про недавно вышедшею бесплатную тему Venture для сайта Shopify, а также про то, как воссоздать макет товаров из темы на Flexbox.
Если вы хотите посмотреть пример из данной статьи в живую, то можете взглянуть на демо. В этой статье я продемонстрирую, как создать гибкий и адаптивный макет товаров при помощи Flexbox, который будет привлекать внимание к товаром необычным способом в зависимости от ширины окна браузера. Все это мы проделаем, написав меньше 100 строк CSS.
Основано на теме Venture
Команда дизайнеров темы с сайта Shopify недавно выпустила довольно привлекательный шаблон для продавцов под названием Venture. Макет оптимизирован с уклоном на удовольствие от покупок, а также он фокусирует внимание исключительно на товарах. Макет был разработан для работы в нескольких бизнес-кейсах, но в этом уроке-примере мы сосредоточимся на ядре макета и воссоздании его при помощи flexbox. Далее мы изучим, как центрировать элементы, сделать идеальный прилипающий футер, обеспечить приоритет определенных товаров в зависимости от размера экрана и устройства, получить доступ к flexbox элементам при помощи медиа запросов, а также изучим основы Flexbox. Сделаем все, чтобы в следующем своем проекте вы могли сразу начать использовать Flexbox.
Если вы хотите использовать куски кода из этой статьи в Shopify Store на настоящих товарах, авторизуйтесь как Shopify Partner и создайте новый магазин с возможностью разработки. С помощью такого магазина вы получаете доступ ко всем платным возможностям магазина на Shopify. С данными возможностями можно поэкспериментировать или же работать над темой для клиента.
Макет Header
Первым делом нам необходимо создать нашу область с фильтрами, в которой находится заголовок и два элемента фильтрации с лейблами (выпадающие списки).
Начнем с создания flexbox контейнера с этими элементами:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<nav class="product-filter"> <h1>Jackets</h1> <div class="sort"> <div class="collection-sort"> <label>Filter by:</label> <select> <option value="/">All Jackets</option> </select> </div> <div class="collection-sort"> <label>Sort by:</label> <select> <option value="/">Featured</option> </select> </div> </div> </nav> |
.product-filter – основной flexbox контейнер. Мы можем выравнивать его дочерние элементы. Задаем flexbox контейнер следующим образом:
|
1 2 3 |
.product-filter { display: flex; } |
Заголовку h1 задаем flex-grow значение 1. Заголовок занимает всю ширину контейнера и сам расширяется на все свободное пространство.
|
1 2 3 |
.product-filter h1 { flex-grow: 1; } |
Для того, чтобы горизонтально выровнять дочерние элементы .sort container, мы также сделаем его гибким. Flexbox контейнеры можно наследовать!
|
1 2 3 |
.sort { display: flex; } |
Контейнеры сортировки по умолчанию отображаются друг над другом:
По умолчанию display: flex; выровняет дочерние элементы по горизонтали. Мы используем это на контейнерах сортировки для их выравнивания, чтобы они находились на одной строке. Каждый контейнер сортировки мы отдельно сделаем flexbox контейнером (третий наследованный flexbox контейнер!), а для вертикального выравнивания элементов списка воспользуемся flex-direction: column;.
|
1 2 3 4 |
.collection-sort { display: flex; flex-direction: column; } |
Всего парой строк CSS мы уже добились точной копии заголовка и фильтров. Теперь же с нашими приобретенными знаниями в flexbox мы построим сетку товаров.
Макет товаров
Для создания Flexbox макета мы воспользуемся HTML кодом ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<section class="products"> <div class="product-card"> <div class="product-image"> <img src="assets/img/coat-01.jpeg"> </div> <div class="product-info"> <h5>Winter Jacket</h5> <h6>$99.99</h6> </div> </div> <!— еще продукты --> </section> |
Как и раньше, нам нужен flexbox контейнер. В данном случае в качестве основного контейнера будет выступать .products. Сейчас мы добавим два новых свойства, с помощью которых можно выровнять дочерние элементы по горизонтали, а также перемещать товары на новые строки при увеличении или уменьшении размера экрана:
|
1 2 3 4 |
.products { display: flex; flex-wrap: wrap; } |
По умолчанию свойство display: flex; выровняет дочерние элементы по горизонтали, начиная с левого края. Однако мы добавили flex-wrap: wrap; для того, чтобы перебрасывать товары на новую строку, если на текущей места уже недостаточно из-за ширины окна браузера.
Чтобы наши товары стали вести себя адаптивно по ширине, необходимо добавить flex: 1; — все наши гибкие элементы занимают одинаковое пространство в строке. В примере ниже у нас 10 курток. Если добавить flex: 1;, то все товары разместятся в одну строку.
В нашем дизайне мы хотим 5 товаров на строку, а остальные перебрасывать на новые строки по необходимости. Чтобы товаров было 5 на строке, они должны занимать 20% ширины экрана (5*20=100). Это можно сделать, установив свойство flex-basis: 20%;. Но с учетом всех паддингов значение будет переваливать за 100%, и на строке уместятся только 4 товара. Решить эту проблему можно, установив паддинг 2% с каждой стороны и flex-basis: 16%.
|
1 2 3 4 5 6 7 8 9 10 |
.products { display: flex; flex-wrap: wrap; } .product-card { padding: 2%; flex-grow: 1; flex-basis: 16%; } |
Это же можно записать и сокращенно:
|
1 2 3 |
.product-card { flex: 1 16%; } |
Имея для товаров свойство flex-grow: 1; , необходимо убедиться, что строка с товарами всегда занимает все свое пространство. Для того, чтобы быть уверенным, что изображения внутри отлично вписываются, необходимо прописать:
|
1 2 3 |
.product-image img { max-width: 100%; } |
Выровненный по нижней границе футер товаров
Иногда возникает проблема с тем, как фиксировать футер или приклеить его к низу контейнера. Тут нам поможет Flexbox. Если вы внимательно следили за кодом, то могли заметить, что названия наших курток под изображениями выровнены не самым лучшим образом.
Эффект лестницы, вызванный разной высотой изображений курток
Довольно распространенный сценарий: мы не можем контролировать ширину или длину контента, но отдельные элементы хотели бы идеально приклеить к низу контейнера. Flexbox уже нам помог, выровняв высоту всех контейнеров в строке, но изображения все еще разной высоты.
Популярные способы выравнивания по низу включают в себя абсолютное позиционирование или даже JS. Но к нашей радости в flexbox такая сложная задача может быть решена простым добавлением следующего CSS кода к нашему контейнеру .product-info:
|
1 2 3 |
.product-info { margin-top: auto; } |
Вот и все! Flexbox настолько умен, что может выровнять элемент по нижней границе Flexbox контейнера. Добавив парочку строк стилей, мы получаем следующую картину:
Адаптивный Flexbox
С уменьшением горизонтального пространства нам необходимо уменьшить количество товаров в строке. К примеру, если максимальная ширина окна 920px, то мы хотим, чтобы в строке помещалось всего 4 товара. Сделать это можно следующим образом:
|
1 2 3 4 5 |
@media (max-width: 920px) { .product-card { flex: 1 21%; } } |
Помните, что должно быть не 25% (100%/4), нам необходимо учесть паддинги, о которых я писал выше. Избежать такой путаницы можно при помощи свойства box-sizing: border-box, но тут выбор за вами. Последняя строка CSS кода уже почти дает нам желаемый результат. На одной строке вмещается 4 товара. Однако на последней строке теперь два больших товара.
Flexbox настолько умен, что заполняет все свободное пространство – то, о чем нам не придется беспокоиться в других методах. Мы бы предпочли разместить большие изображения товаров вверху, а не внизу, чтобы выделить данную продукция и улучшить сам макет. Первый способ увеличить первые два товара, а не два последние это выбрать их напрямую и изменить их размер:
|
1 2 3 4 5 |
/* Выбираем первые два товара */ .products .product-card:first-child, .products .product-card:nth-child(2) { flex: 2 46%; } |
С данным CSS кодом мы имеем отлично выглядящий макет, который оптимизирован под маленькие экраны типа iPad в портретном режиме.
Для еще меньших экранов нам необходимо разместить товары на макете в две колонки. Сделать это можно с помощью следующего медиа запроса:
|
1 2 3 4 5 |
@media (max-width: 600px) { .product-card { flex: 1 46%; } } |
Если теперь открыть нашу страницу на маленьких экранах типа iPhone6, то можно увидеть, что фильтры наезжают на заголовок.
Это происходит, потому что наш контейнер .product-filter выравнивает все flex элементы по горизонтали, и не важно сколько элементов будет (без переноса). Код ниже легко решает эту проблему с помощью медиа запроса и устанавливает контент в вертикальное положение:
|
1 2 3 4 5 |
@media (max-width: 480px) { .product-filter { flex-direction: column; } } |
Теперь заголовок и фильтры не наезжают друг на друга. Однако макет можно сделать еще красивее, передвинув фильтры влево. Первоначально мы выравнивали элементы по правому краю при помощи свойства align-self: flex-end;. Теперь же мы воспользуемся align-self: flex-start;
|
1 2 3 4 5 6 7 8 |
@media (max-width: 480px) { .product-filter { flex-direction: column; } .sort { align-self: flex-start; } } |
Вот и все, перед нами гибкий и адаптивный макет сетки товаров.
Совместимость
Основная проблема с flexbox это всегда поддержка в браузерах. Но как мы уже выше говорили, эта поддержка довольна обширна на сегодня. Старые IE, не поддерживающие flexbox, теперь вообще не поддерживаются Microsoft. Как и во всех веб-проектах, всегда необходимо проводить серию тестов, чтобы быть уверенным в том, что пользователю предоставляется оптимизированный макет, а также в том, что макет отвечает всем заявленным требованиям.
Заключение
В этом уроке при помощи flexbox мы создали мощный адаптивный макет, в котором отображается набор товаров. В отличие от других CSS методов, не предназначенных для создания макетов, flexbox это мощный инструмент, полностью сосредоточенный на достижении цели. Вы должны воспользоваться его преимуществами. Макеты на Flexbox могут сделать наши сайты и приложения более гибкими и упругими.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
