Ръководство на дизайнера за Flexbox и Grid

Какво дизайнерите трябва да знаят за тези инструменти за трансформационно оформление.

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

Кратките стъпки на тези стари методи за оформление стават още по-очевидни с отзивчив уеб дизайн, в който възприемането на плавността на мрежата е от основно значение.

С flexbox и grid, най-накрая имаме инструменти, предназначени специално за оформление, които са по-ефективни и недействителни от хакове, необходими с предишни методи за оформление. Те отключват нови възможности за стари проблеми, дават възможност на неща, които преди не са били възможни, и решават реални проблеми, с които се сблъскваме с отзивчив уеб дизайн.

Flexbox

Flexbox, известен още като CSS гъвкави кутии, е нов метод на оформление, който ни дава контрол на подравняването, който никой друг CSS метод не може да произведе. Той се отличава с „микро оформление“: способността да подравнявате, подреждате и разпределяте пространството между елементите в контейнера или да променяте ширината или височината на елемента, за да запълвате най-добре наличното пространство.

Подобрено опаковане

В отзивчивия уеб дизайн наличната ширина варира, когато ширината на прозореца променя размерите си. Това може да доведе до непреднамерено опаковане на съдържанието, особено когато съдържанието е по-дълго от предназначеното или контейнерът на съдържанието е твърде тесен. Вероятно всички сме виждали и преди: дизайнът отчита "идеалната" дължина на съдържанието, но веднага щом е внедрен и се добави истинско съдържание, съдържанието се пренася в следващия ред, защото няма достатъчно място или се пробива от него контейнер. И двете не са идеални и могат да причинят разрушаване на оформлението.

Проблемът е да не сте сигурни, че наличното пространство винаги ще бъде достатъчно голямо, за да побере съдържание, което може да варира по дължина. Традиционно използваме CSS Media Queries, за да коригираме оформлението в конкретни точки на прекъсване, за да смекчим проблемите с обвиването на съдържанието. Но медийните заявки не вземат предвид дължината на самото съдържание - те отговарят на явна ширина или височина. Това често води до прекомерно количество медийни заявки за контрол на конкретно съдържание при изрични точки на прекъсване.

Пример за подобрено опаковане с Flexbox

Flexbox решава този проблем, като ни дава възможност да се възползваме от наличното пространство и да обгръщаме съдържание, когато не е така. Това поведение за автоматично коригиране е не само удобно, но и подобрява поддръжността, защото не трябва да разчитаме на точка на прекъсване, за да коригираме ръчно стила. Примерът по-горе демонстрира това поведение: покажете етикета за местоположение в съседство с заглавието, ако има достатъчно място, и подравнете етикета за местоположение отляво под заглавието, ако няма достатъчно място.

Традиционните методи като плаващи биха довели до това, че етикетът за местоположение остава подравнен надясно на по-малките екрани, което е по-малко от идеалното. Можете да коригирате това, като плувате етикета вляво в определена точка на прекъсване. Проблемът с този подход е, че вие ​​сте зависими от точка на прекъсване, за да промените стила на вашето съдържание, което може да варира по дължина.

Подобрено разстояние и подравняване

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

Flexbox решава това, като дава възможност за разпределение на пространството между неизвестен брой елементи в област с неизвестна ширина или височина и подравнява елементи по оста X или Y. Това много прилича на това как дизайнерските инструменти като Sketch или Illustrator могат да контролират разстоянието и подравняването, като позволяват контрола, който очакваме в мрежата.

Пример за подобрено разпределение на пространството с Flexbox

Страхотен пример за това управление може да се види по-горе: елементите за навигация са равномерно разпределени, вертикално центрирани, а първият и последният елемент са насочени към ръба на навигационния контейнер. Това би било невъзможно с помощта на традиционни методи като прилагане на вграден блок към елементи или разчитане на оформлението на таблицата.

Поръчка за източник

Поръчката на източника се отнася до реда, в който елементите се показват на страницата въз основа на мястото, където се появяват в HTML. По подразбиране елементите ще се показват отгоре надолу и наляво надясно по подразбиране - ширината им се определя от свойството на дисплея.

Редът на естествения източник на документа трябва да ви насочва, когато мислите как дизайнът ви ще се адаптира към различни ширини на прозореца, но има моменти, когато е полезно да го модифицирате, за да пренаредите елементи. Единственият начин да направите това преди flexbox е да скриете елемента и да покажете друг, което води до дублиране на HTML или да разчитате на абсолютно позициониране, което не винаги работи, когато съдържанието може да варира по размер. С flexbox можете просто да променяте реда на гъвкавите елементи, без да е необходимо да променяте основната HTML структура.

Пример за поръчка на артикули с Flexbox

Примерът по-горе демонстрира подреждане във Flexbox: показваме логото от лявата страна на подножието, което е в съответствие с заглавката. В малките огледи показваме местоположенията преди логото. Това пренареждане има смисъл, тъй като местата са по-важни в този контекст.

Решетка на решетката

CSS подредбата на мрежата е двуизмерна система за оформление, създадена специално за мрежата. Това ни дава възможност да разделим страницата на региони, които всеки може да бъде допълнително дефиниран по отношение на размер, позиция и слой, което води до невероятно мощна основна рамка.

Годни за целта

CSS никога не е разполагал с истински инструмент за подреждане на предназначение, така че трябваше да бъдем доста изобретателни с това как можем да приложим мрежа за нашата работа. Появиха се мрежови рамки, които да изпълнят тази нужда, но не и без да представят собствените си проблеми. Много от най-популярните мрежови рамки изискват дефиниране на оформлението в маркирането, което може да доведе до раздуване на кода, проблеми с поддръжката и размиване на разделянето на структурата на документа и представянето.

С решетката вече не се нуждаем от мрежова рамка - тя е естествена рамка, изпечена направо в CSS. Тя ни позволява да дефинираме оформлението в CSS по интуитивен начин, като през цялото време обхващаме текучеството по подразбиране в мрежата. Възможностите на този нов инструмент за оформление са безкрайни и той ни позволява да изпълняваме оформления, които са били възможни само с Javascript преди неговото пристигане.

Пример за макет на решетката

Уеб оформления от следващо поколение

Що се отнася до оформлението, ние бяхме заседнали в коловоз от доста време. Установените модели и ограниченията на предишните инструменти за оформление в CSS ни доведоха по пътя на хомогенността на оформлението в миналото. Не е нужно да отивате далеч в мрежата, за да го забележите: заглавие, основно съдържание, странична лента, долен колонтитул.

Пристигането на отзивчив уеб дизайн предизвика някои нови идеи за оформление на страниците и с него започват да се появяват някои добри модели: изкопайте страничната лента, опростете дизайна и се съсредоточете върху съдържанието. Но виждаме и модели, които станаха толкова повсеместни, че чуваме възклицанието, че „всички уебсайтове изглеждат еднакво“.

Grid оформлението ще ни позволи да излезем от коловоза на оформлението, в което сме били, и ще ни даде инструментите, от които се нуждаем, за да изградим оформлението на следващото поколение. Най-накрая можем да надграждаме съдържанието, вместо да го форсираме в общи дизайнерски модели, които могат да бъдат намерени на всеки друг отзивчив уебсайт.

Слово за предпазливост

Важно е да се отбележи, че не всички браузъри поддържат функции за флексикс и мрежа. Трябва да вземем под внимание коя е нашата аудитория за всеки проект и да определим дали по-голямата част от потребителите ще се възползват от тези по-разширени функции, като същевременно предоставяме разумна резерва за неподдържащи браузъри. Напълно приемливо е да предоставите на потребителите в старите браузъри опростена версия на вашия потребителски интерфейс и да го подобрите за потребителите в по-нови браузъри.

Има още. Много повече.

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

Flexbox

решетка

Всеки, който е изграждал за мрежата, е болезнено запознат с различни ограничения, когато става въпрос за оформление в CSS. Често пъти това налага компрометиране на дизайна, така че той да работи както се очаква в развитието, или по-лошо, разчитайки на Javascript за прилагане на необходимото поведение.

Пристигането на флексокс и подредбата на мрежата сигнализира за нова ера на оформление в мрежата. Трябва да възприемем нов начин на мислене, когато става дума за оформление, за да не се ограничаваме от навиците, недостатъците и хакове от миналото. Да приемем тези нови инструменти и да подновим нашето проучване за възможното с оформление в мрежата.