Дизайн макета сторінки з товарами за допомогою Flexbox

22

Від автора: автор статті – наш гість, Левін Мехія, дизайнер адвокат з сайту Shopify. У своїй новій темі, розробленої для Shopify, вони використовували технологію Flexbox. Цією та іншими техніками вони хочуть з нами сьогодні поділитися в цій статті по дизайну макета сторінки. На що я відповів – так, звичайно.

Кожен день на сайті Shopify я розмовляю з партнерами, які постійно розширюють межі можливого в дизайні електронної комерції. Зовсім недавно я помітив, що деякі дизайнери в своїх магазинах експериментують з Flexbox. Однією з наших основних цілей, як у дизайнерів і розробників, є фокусування уваги користувача на контенті, а також спрощення навігації по контенту. Для досягнення поставлених завдань нам потрібен функціональний макет, у якому всі функції відходять на другий план, а основним гравцем стає контент.

Flexbox допомагає нам створювати гнучкі макети, адаптуються під настільні комп’ютери, так і під мобільні пристрої. Але чому ми його не використовуємо? Багато хто з нас досі використовують обтікання і display: inline-block. Звичайно, ви краще знаєте свою аудиторію. Якщо у вас безліч користувачів використовують, наприклад, IE9 і нижче, а ви не можете забезпечити відповідний фолбек, то ви застрягнете в обтеканиях. Однак flexbox сьогодні підтримується великою кількістю браузерів.

Я вірю в те, що можна чогось навчитися, практикуючись в цьому. У цій статті я розповім вам про нещодавно вийшла безкоштовну тему Venture для сайту Shopify, а також про те, як відтворити макет товарів з теми на Flexbox.

Дизайн макета сторінки з товарами за допомогою Flexbox

Якщо ви хочете подивитися приклад з цієї статті в живу, то можете поглянути на демо. У цій статті я покажу, як створити гнучкий адаптивний макет товарів за допомогою Flexbox, який буде привертати увагу до товаром незвичайним способом в залежності від ширини вікна браузера. Все це ми зробимо, написавши менше 100 рядків CSS.

Засноване на теми Venture

Команда дизайнерів теми з сайту Shopify недавно випустила досить привабливий шаблон для продавців за назвою Venture. Макет оптимізовано з ухилом на задоволення від покупок, а також він фокусує увагу виключно на товари. Макет був розроблений для роботи на кількох бізнес-кейси, але в цьому уроці-прикладі ми зосередимося на ядрі макета та відтворенні його за допомогою flexbox. Далі ми вивчимо, як центрувати елементи, зробити ідеальний прилипає футер, забезпечити пріоритет певних товарів в залежності від розміру екрану і пристрої, отримати доступ до flexbox елементів за допомогою медіа запитів, а також вивчимо основи Flexbox. Зробимо все, щоб у наступному своєму проекті ви могли відразу почати використовувати Flexbox.

Дизайн макета сторінки з товарами за допомогою Flexbox

Якщо ви хочете використовувати шматки коду з цієї статті в Shopify Store на цих товарах, авторизуйтеся як Shopify Partner і створіть новий магазин з можливістю розробки. З допомогою такого магазину ви отримуєте доступ до всіх платним можливостям магазину на Shopify. З цими можливостями можна поекспериментувати або ж працювати над темою для клієнта.

Макет Header

Насамперед нам необхідно створити нашу область з фільтрами, в якій знаходиться заголовок і два елемента фільтрації з лейблами (випадаючі списки).

Дизайн макета сторінки з товарами за допомогою Flexbox

Почнемо з створення flexbox контейнера з цими елементами:

Jackets

Filter by:
All Jackets
Sort by:
Featured

.product-filter – основний flexbox контейнер. Ми можемо вирівнювати його дочірні елементи. Задаємо flexbox контейнер наступним чином:

.product-filter {
display: flex;
}

Заголовок h1 задаємо flex-grow значення 1. Заголовок займає всю ширину контейнера і сам розширюється на вільний простір.

.product-filter h1 {
flex-grow: 1;
}

Для того, щоб вирівняти горизонтально дочірні елементи .sort container, ми також зробимо його гнучким. Flexbox контейнери можна успадковувати!

.sort {
display: flex;
}

Контейнери сортування за замовчуванням відображаються один над одним:

Дизайн макета сторінки з товарами за допомогою Flexbox

За замовчуванням display: flex; вирівняє дочірні елементи по горизонталі. Ми використовуємо це на контейнерах сортування для їх вирівнювання, щоб вони знаходилися на одній лінії. Кожен контейнер сортування ми окремо зробимо flexbox контейнером (третій наследованный flexbox контейнер!), а для вертикального вирівнювання елементів списку скористаємося flex-direction: column;.

.collection-sort {
display: flex;
flex-direction: column;
}

Дизайн макета сторінки з товарами за допомогою Flexbox

Всього парою рядків CSS ми вже досягли точної копії заголовка і фільтрів. Тепер же з нашими набутими знаннями в flexbox ми побудуємо сітку товарів.

Макет товарів

Для створення Flexbox макета ми скористаємося HTML кодом нижче:

Дизайн макета сторінки з товарами за допомогою Flexbox
Winter Jacket
$99.99

Дизайн макета сторінки з товарами за допомогою Flexbox

Як і раніше, нам потрібен flexbox контейнер. В даному випадку в якості основного контейнера буде виступати .products. Зараз ми додамо два нові властивості, за допомогою яких можна вирівняти дочірні елементи по горизонталі, а також переміщати товари на нові рядки при збільшенні або зменшенні розміру екрана:

.products {
display: flex;
flex-wrap: wrap;
}

За замовчуванням властивість display: flex; вирівняє дочірні елементи по горизонталі, починаючи з лівого краю. Однак ми додали flex-wrap: wrap; для того, щоб перекидати товари на новий рядок, якщо на поточному місця вже недостатньо із-за ширини вікна браузера.

Щоб наші товари стали вести себе адаптивно по ширині, необхідно додати flex: 1; — всі наші гнучкі елементи займають однакове простір в рядку. У наведеному нижче прикладі у нас 10 курток. Якщо додати flex: 1;, то всі товари розмістяться в один рядок.

Дизайн макета сторінки з товарами за допомогою Flexbox

У нашому дизайні ми хочемо 5 товарів на рядок, а решта перекидати на нові рядки по необхідності. Щоб товарів було на 5 рядку, вони повинні займати 20% ширини екрана (5*20=100). Це можна зробити, встановивши властивість flex-basis: 20%;. Але з урахуванням всіх паддингов значення буде перевалювати за 100%, і на рядку вмістяться тільки 4 товару. Вирішити цю проблему можна, встановивши паддінґ 2% з кожної сторони і flex-basis: 16%.

.products {
display: flex;
flex-wrap: wrap;
}
.product-card {
padding: 2%;
flex-grow: 1;
flex-basis: 16%;
}

Це ж можна записати і скорочено:

.product-card {
flex: 1 16%;
}

Маючи для товарів властивість flex-grow: 1; , необхідно переконатися, що рядок з товарами завжди займає весь свій простір. Для того, щоб бути впевненим, що зображення всередині відмінно вписуються, необхідно прописати:

.product-image img {
max-width: 100%;
}

Вирівняний по нижній межі футер товарів

Іноді виникає проблема з тим, як фіксувати футер або приклеїти його до низу контейнера. Тут нам допоможе Flexbox. Якщо ви уважно стежили за кодом, то могли помітити, що назви наших курток під зображеннями вирівняні не найкращим чином.

Дизайн макета сторінки з товарами за допомогою Flexbox

Ефект сходи, викликаний різною висотою зображень курток

Досить поширений сценарій: ми не можемо контролювати ширину або довжину контенту, але окремі елементи хотіли б ідеально приклеїти до низу контейнера. Flexbox вже нам допоміг, вирівнявши висоту всіх контейнерів в рядку, але зображення все ще різної висоти.

Популярні способи вирівнювання по низу включають в себе абсолютне позиціонування або навіть JS. Але до нашої радості у flexbox така складна задача може бути вирішена простим додаванням наступного CSS коду до нашого контейнера .product-info:

.product-info {
margin-top: auto;
}

От і все! Flexbox настільки розумний, що може вирівняти елемент по нижній межі Flexbox контейнера. Додавши кілька рядків стилів, ми отримуємо таку картину:

Дизайн макета сторінки з товарами за допомогою Flexbox

Адаптивний Flexbox

З зменшенням горизонтального простору нам необхідно зменшити кількість товарів в рядку. Наприклад, якщо максимальна ширина вікна 920px, то ми хочемо, щоб у рядку містилося всього 4 товару. Зробити це можна наступним чином:

@media (max-width: 920px) {
.product-card {
flex: 1 21%;
}
}

Пам’ятайте, що має бути не 25% (100%/4), нам необхідно врахувати паддинги, про яких я писав вище. Уникнути такої плутанини можна за допомогою властивості box-sizing: border-box, але тут вибір за вами. Останній рядок CSS коду вже майже дає нам бажаний результат. На одному рядку вміщається 4 товару. Однак на останньому рядку тепер два великих товару.

Дизайн макета сторінки з товарами за допомогою Flexbox

Flexbox настільки розумний, що заповнює весь вільний простір – те, про що нам не доведеться турбуватися в інших методах. Ми б хотіли розмістити великі зображення товарів вгорі, а не внизу, щоб вибрати дану продукція і поліпшити сам макет. Перший спосіб збільшити перші два товару, а не два останні це вибрати їх безпосередньо і змінити їх розмір:

/* Вибираємо перші два товару */
.products .product-card:first-child,
.products .product-card:nth-child(2) {
flex: 2 46%;
}

З даними CSS кодом ми маємо відмінно виглядає макет, який оптимізовано під маленькі екрани типу iPad в портретному режимі.

Дизайн макета сторінки з товарами за допомогою Flexbox

Для ще менших екранів нам необхідно розмістити товари на макеті в дві колонки. Зробити це можна за допомогою наступного медіа запиту:

@media (max-width: 600px) {
.product-card {
flex: 1 46%;
}
}

Дизайн макета сторінки з товарами за допомогою Flexbox

Якщо тепер відкрити нашу сторінку на маленьких екранах типу iPhone6, то можна побачити, що фільтри наїжджають на заголовок.

Дизайн макета сторінки з товарами за допомогою Flexbox

Це відбувається, тому що наш контейнер .product-filter вирівнює всі flex елементи по горизонталі, і не важливо скільки елементів (без перенесення). Код нижче легко вирішує цю проблему за допомогою медіа запиту і встановлює контент у вертикальне положення:

@media (max-width: 480px) {
.product-filter {
flex-direction: column;
}
}

Дизайн макета сторінки з товарами за допомогою Flexbox

Тепер заголовок і фільтри не наїжджають один на одного. Однак макет можна зробити ще красивішим, пересунувши фільтри вліво. Спочатку ми вирівнювали елементи по правому краю за допомогою властивості align-self: flex-end;. Тепер же ми скористаємося align-self: flex-start;

@media (max-width: 480px) {
.product-filter {
flex-direction: column;
}
.sort {
align-self: flex-start;
}
}

Дизайн макета сторінки з товарами за допомогою Flexbox

Ось і все, перед нами гнучкий адаптивний макет сітки товарів.

Сумісність

Основна проблема з flexbox це завжди підтримка в браузерах. Але як ми вже говорили вище, ця підтримка задоволена обширна на сьогодні. Старі IE, не підтримують flexbox, тепер взагалі не підтримуються Microsoft. Як і у всіх веб-проектах, завжди необхідно проводити серію тестів, щоб бути впевненим в тому, що користувачу надається оптимізований макет, а також у тому, що макет відповідає всім заявленим вимогам.

Висновок

У цьому уроці за допомогою flexbox ми створили потужний адаптивний макет, у якому відображається набір товарів. На відміну від інших CSS методів, не призначених для створення макетів, flexbox це потужний інструмент, повністю зосереджений на досягненні мети. Ви повинні скористатися його перевагами. Макети на Flexbox можуть зробити наші сайти і додатки більш гнучкими і пружними.