Посібник дизайнера по Flexbox та Grid

Що дизайнерам потрібно знати про ці інструменти трансформаційного планування.

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

Короткі коментарі цих старих методів для компонування стали ще більш очевидними завдяки чуйному веб-дизайну, в якому основна мета використання текучості Інтернету є основою.

З флексбоком та сіткою ми, нарешті, маємо інструменти, призначені спеціально для компонування, які є більш ефективними та позбавлені хаків, необхідних для попередніх методів компонування. Вони розблокують нові можливості для старих проблем, вмикають речі, які раніше не були, і вирішують реальні проблеми, з якими ми стикаємося з чуйним веб-дизайном.

Flexbox

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

Поліпшене обгортання

У чуйному веб-дизайні доступна ширина змінюється, коли ширина вікна перегляду змінюється розмірами. Це може призвести до ненавмисного обгортання вмісту, особливо коли вміст довший, ніж призначений для нього, або контейнер вмісту занадто вузький. Ми, напевно, все бачили раніше: дизайн пояснює "ідеальну" тривалість вмісту, але як тільки він буде реалізований та доданий реальний контент, вміст переходить у наступний рядок, оскільки не було достатньо місця або не виходить з нього контейнер. І те й інше не є ідеальним, і це може спричинити розрив макетів.

Проблема полягає не в тому, щоб наявний простір завжди був достатньо великим, щоб вмістити вміст, який може відрізнятися за довжиною. Традиційно ми використовували мультимедійні запити CSS для коригування макета за певними точками перерви для зменшення проблем із обгортанням вмісту. Але медіа-запити не враховують довжину самого вмісту - вони відповідають чіткою шириною чи висотою. Це часто призводить до надмірної кількості медіа-запитів для контролю певного вмісту в явних точках прориву.

Приклад покращеного обгортання за допомогою Flexbox

Flexbox вирішує цю проблему, дозволяючи нам скористатись наявним місцем та обернути вміст, коли його немає. Така поведінка автоматичного регулювання не тільки зручна, але покращує ремонтопридатність, оскільки нам не потрібно покладатися на точку розриву, щоб вручну коригувати стиль. Наведений вище приклад демонструє таку поведінку: виведіть мітку розташування поруч із заголовком, якщо є достатньо місця, і вирівняйте мітку розташування зліва під заголовком, якщо недостатньо місця.

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

Покращений інтервал та вирівнювання

Що стосується інтервалу та вирівнювання у CSS, нам потрібно було розумно виконати все, що не було поведінкою за замовчуванням. Навіть ефекти, які здаються тривіальними, можуть бути складними в CSS, як вертикальне вирівнювання або рівномірний розподіл місця між елементами, повинні покладатися на обхідні шляхи або хаки. Деякі речі прямо неможливо досягти.

Flexbox вирішує це, дозволяючи розподілити простір між невідомою кількістю предметів у межах невідомої ширини чи висоти та вирівняти елементи на осі X або Y. Це дуже схоже на те, як інструменти дизайну, такі як Sketch або Illustrator, можуть контролювати відстань та вирівнювання, що дозволяє контролювати, який ми очікуємо в Інтернеті.

Приклад покращеного розподілу простору за допомогою Flexbox

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

Джерело наказ

Порядок джерел означає порядок, у якому елементи відображаються на сторінці залежно від того, де вони відображаються в HTML. За замовчуванням елементи відображатимуться зверху вниз та зліва направо за замовчуванням - їх ширина визначається властивістю відображення.

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

Приклад замовлення предметів за допомогою Flexbox

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

Макет сітки

Макет сітки CSS - це двовимірна система компонування, створена спеціально для Інтернету. Це дає нам можливість розділити сторінку на регіони, які можна детальніше визначити за розміром, положенням та шаром, в результаті чого вийде неймовірно потужний власний фреймворк.

Придатний за призначенням

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

З сіткою нам більше не потрібна рамка сітки - це вбудована рамка, випечена прямо в CSS. Це дозволяє нам визначати макет у CSS інтуїтивно, весь час, використовуючи текучість Інтернету за замовчуванням. Можливості цього нового інструменту компонування нескінченні, і він дозволяє нам робити схеми, які були можливі лише за допомогою Javascript до його прибуття.

Приклад компонування сітки

Веб-макети нового покоління

Що стосується планування, ми довгий час застрягли в колії. Встановлені шаблони та обмеження попередніх інструментів компонування у CSS призвели до того, що ми пройшли шлях однорідності компонування в минулому. Вам не потрібно зайти далеко в Інтернеті, щоб помітити його: заголовок, основний вміст, бічна панель, колонтитул.

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

Макет сітки дозволить нам вийти з колії макета, в якій ми були, і дасть нам інструменти, необхідні для створення макетів нового покоління. Нарешті ми можемо створити навколо вмісту замість того, щоб примушувати його до загальних моделей дизайну, які можна знайти на кожному інший чуйному веб-сайті.

Слово обережності

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

Є ще Набагато більше.

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

Flexbox

Сітка

Кожен, хто будує для Інтернету, болісно усвідомлює різні обмеження, коли справа доходить до компонування в CSS. Часто це вимагає компрометації дизайну, щоб він працював так, як очікувалося в розвитку, або ще гірше, покладаючись на Javascript, щоб реалізувати потрібну нам поведінку.

Прихід макетів флексбоксу та сітки сигналізує про нову еру компонування в Інтернеті. Ми повинні прийняти нове мислення, коли мова заходить про компонування, щоб не обмежуватися звичками, недоліками та хаками минулого. Давайте приймемо ці нові інструменти та відновимо наше дослідження для того, що можливо з компонуванням в Інтернеті.