Водич за дизајн за Флекбок и Грид

Шта дизајнери морају знати о овим алатима за трансформациони изглед.

ЦСС је доста напредовао од свог представљања 1996., али алати које имамо на располагању за изглед нису се много променили. Распореди таблица били су невероватно крути, распореди засновани на пловку у основи су били хацк, распореди засновани на позиционирању нису били прилагодљиви и ниједан није могао ефикасно да поднесе велику сложеност. Немојте ме криво схватити - ове методе су нас довеле далеко, али нису намењене сложеном намештању.

Кратки доласци ових старих метода за изглед постали су још очитији са флексибилним веб дизајном, у коме је прихватање флуидности Веба од кључне важности.

Са флексбоком и мрежом, коначно имамо алате намењене посебно за изглед који су ефикаснији и празнина хакова потребних претходних метода изгледа. Откључавају нове могућности за старе проблеме, омогућавају ствари које раније нису биле могуће и решавају стварне проблеме са којима смо суочени са одзивним веб дизајном.

Флекбок

Флекбок, звани флексибилни оквири ЦСС-а, нова је метода изгледа која нам омогућава контролу поравнања коју ниједна друга ЦСС метода не може да произведе. Одликује се „микро изгледом“: могућност поравнања, наручивања и дистрибуције простора међу ставкама у контејнеру или измене ширине или висине елемента како би се најбоље испунио расположиви простор.

Побољшано омотавање

У респонзивном веб дизајну расположива ширина варира како се ширина приказа мења и величине. Ово може довести до ненамерног превртања садржаја, посебно када је садржај дуже него што је предвиђено или је контејнер садржаја преуски. Вјероватно смо сви видјели и прије: дизајн води рачуна о „идеалној“ дужини садржаја, али чим се примијени и дода стварни садржај, садржај се прелази на сљедећи редак јер није било довољно простора или се не испуца контејнер. Обоје нису идеални и могу проузроковати пропадање изгледа.

Проблем није у томе што је сигуран да ће расположиви простор увек бити довољно велик да прими садржај који може да се разликује у дужини. Традиционално смо користили ЦСС Медиа Куериес за подешавање изгледа на одређеним тачкама прекида да бисмо ублажили проблеме са пребацивањем садржаја. Али Медиа Упити не узимају у обзир дужину самог садржаја - они одговарају на експлицитну ширину или висину. То често резултира превеликом количином медијских упита за контролу одређеног садржаја на експлицитним тачкама прекида.

Пример побољшаног омотавања помоћу Флекбок-а

Флекбок решава овај проблем омогућавајући нам да искористимо расположиви простор и затим да замотамо садржај када га нема. Овакав начин аутоматског прилагођавања није само згодан, већ побољшава одрживост јер се не морамо ослањати на тачку прекида да бисмо ручно прилагодили стил. Горњи пример приказује ово понашање: прикажите ознаку локације поред наслова ако је на располагању довољно простора и поравнајте ознаку локације са леве стране испод наслова, ако нема довољно простора.

Традиционалне методе попут плутања резултирале би да етикета локације остане исправно поравнана на мањим приказима, што је мање него идеално. То можете исправити лебдећи налепницом лево на одређеној преломној тачки. Проблем са овим приступом је што сада зависите од тачке прекида да бисте променили стил вашег садржаја који може да се разликује у дужини.

Побољшани размак и поравнање

Када је у питању размак и поравнање у ЦСС-у, морали смо бити паметни да бисмо постигли све што није било подразумевано понашање. Чак и ефекти који изгледају безначајно могу бити компликовани у ЦСС-у, попут вертикалног поравнања или равномерне поделе простора међу ставкама, морају се ослонити на заобилазне размере или хакове. Неке ствари је потпуно немогуће постићи.

Флекбок то решава омогућавајући распоређивање простора између непознатог броја предмета унутар подручја непознате ширине или висине и поравнавање предмета на Кс или И оси. Дјелује слично као што алати за дизајн попут Скетцх или Иллустратор могу управљати размаком и поравнањем омогућавајући контролу какву очекујемо на Вебу.

Пример побољшане дистрибуције простора помоћу Флекбок-а

Одличан пример ове контроле може се видети горе: навигацијске ставке су равномерно распоређене, вертикално центриране, а прва и последња ставка се постављају ка ивици навигационог контејнера. Ово би било немогуће употребом традиционалних метода, као што су примена инлине блока на ставке или ослањање на распоред таблице.

Извор налога

Изворни налог односи се на редослед у којем су елементи приказани на страници на основу места у којем се појављују у ХТМЛ-у. Елементи ће се подразумевано приказивати одозго према доле и лево надесно према заданим поставкама - њихова ширина одређена је њиховим својством приказа.

Редослијед документа из природног извора требао би вас водити када размишљате о томе како ће се ваш дизајн прилагодити различитим ширинама приказа, али постоје случајеви када је корисно модифицирати их како бисте преуредили ставке. Једини начин да се то учини пре флекбок-а било је сакривање елемента и показивање другог, што резултира дупликатом ХТМЛ-а, или ослањање на апсолутно позиционирање, које не функционише увек када садржај може варирати у величини. Помоћу флекбок-а, можете једноставно изменити редослед флексибилних ставки без потребе за модификацијом основне ХТМЛ структуре.

Пример наручивања предмета помоћу Флекбок-а

Горњи пример показује наручивање у Флекбок-у: приказујемо лого на левој страни подножја, што је у складу са заглављем. На малим приказима приказујемо локације пре логотипа. Ово преуређивање има смисла јер су локације важније у овом контексту.

Распоред решетке

Изглед ЦСС мреже је дводимензионални систем изгледа креиран посебно за Интернет. Омогућава нам да поделимо страницу на регионе који се могу даље дефинисати у погледу величине, положаја и слоја, што резултира невероватно мочним матичним оквиром.

Погодно за сврху

ЦСС никада није имао истински алат за постављање намене, тако да смо морали да будемо прилично инвентивни како да применимо мрежу у свом раду. Појавили су се мрежни оквири који испуњавају ову потребу, али не без увођења својих проблема. Многи најпопуларнији оквири решетки захтевају дефиницију изгледа у маркупу, што може довести до појаве кода, проблема са одржавањем и замагљује одвајање структуре документа и презентације.

Са решетком нам више не треба мрежни оквир - то је изворни оквир испечен директно у ЦСС. Омогућује нам да дефинишемо изглед у ЦСС-у на интуитиван начин, све време док прихватамо задану флуидност Веба. Могућности овог новог алата за изглед су бескрајне и омогућава нам да направимо распореде који су били могући само са Јавасцрипт-ом пре његовог доласка.

Пример распореда мреже

Веб-изглед нове генерације

Када је реч о изгледу, ми смо били заглављени у прилично дуго време. Установљени обрасци и ограничења претходних алата за изглед у ЦСС-у довели су нас до стаза хомогености изгледа у прошлости. Не морате ићи далеко на Вебу да бисте га уочили: заглавље, главни садржај, бочна трака, подножје.

Доласком респонзивног веб дизајна покренуле су се неке нове идеје за изглед странице, а са њом се почињу појављивати и неки добри узорци: ископати бочну траку, поједноставити дизајн и усредсредити се на садржај. Али такође видимо како се појављују обрасци који су постали толико свеприсутни да чујемо узвик да „све веб локације изгледају исто“.

Распоред решетке омогућит ће нам да изађемо из руте изгледа у којем смо били и пружиће нам алате потребне за израду изгледа нове генерације. Коначно можемо да изградимо садржај уместо да га форсирамо у генеричке дизајнерске обрасце који се могу наћи на свим другим веб локацијама.

Реч опреза

Важно је напоменути да нису сви прегледачи подржавају функције флексбокса и мреже. Морамо узети у обзир ко је наша публика за сваки пројекат и утврдити да ли ће већина корисника имати користи од ових напреднијих функција, истовремено пружајући разуман пад за неподржавајуће прегледаче. Потпуно је прихватљиво да корисницима у наслијеђеним прегледачима омогућите поједностављену верзију корисничког сучеља и побољшате је за кориснике у новијим прегледачима.

Има више. Много више.

Само смо се огребали по површини онога што флекс и мрежа могу да ураде. Срећом, на располагању је пуно сјајне документације која се дотиче могућности ових нових алата за изглед. Ево неких мојих омиљених:

Флекбок

Решетка

Свако ко гради на Вебу болно је свјестан различитих ограничења када је у питању изглед у ЦСС-у. Често је то захтевало компромитовање дизајна тако да делује како се очекује у развоју, или још горе, ослањајући се на Јавасцрипт да имплементирамо понашање које нам је потребно.

Долазак флексокса и распореда мреже сигнализира нову еру изгледа на Вебу. Морамо усвојити нови начин размишљања када је у питању распоред како не би били ограничени навикама, недостацима и хаклима из прошлости. Прихватимо ове нове алате и обновимо истраживање за оно што је могуће са изгледом на Вебу.