Vodič za dizajn za Flexbox i Grid

Što dizajneri moraju znati o tim alatima za transformacijski izgled.

CSS je dosta napredovao od svog predstavljanja 1996., ali alati koje imamo na raspolaganju za izgled nisu se puno promijenili. Izgledi tablice bili su nevjerojatno kruti, rasporedi temeljeni na plovku bili su u osnovi hack, rasporedi temeljeni na pozicioniranju nisu bili prilagodljivi i nijedan nije mogao učinkovito podnijeti veliku složenost. Nemojte me krivo shvatiti - ove metode su nas dovele jako daleko, ali nisu namijenjene složenim izgledima.

Kratki dolasci ovih starih metoda za izgled postali su još očitiji kroz brzi web dizajn u kojem je prihvaćanje fluidnosti Weba od ključne važnosti.

Uz flexbox i mrežu, konačno imamo alate namijenjene posebno za izgled koji su učinkovitiji i praznina hakova potrebnih prethodnih metoda izgleda. Otključavaju nove mogućnosti za stare probleme, omogućavaju stvari koje prije nisu bile moguće i rješavaju stvarne probleme s kojima se susrećemo sa brzih web dizajna.

flexbox

Flexbox, aka CSS fleksibilni okviri, nova je metoda izgleda koja nam omogućuje kontrolu poravnanja koju nijedna druga CSS metoda ne može proizvesti. Njime se ističe u "mikro rasporedu": mogućnost poravnanja, redoslijeda i distribucije prostora među stavkama u spremniku ili promjena širine ili visine elementa kako bi se najbolje ispunio raspoloživi prostor.

Poboljšano zamotavanje

U responzivnom web dizajnu raspoloživa širina varira s širinom okvira prikaza. To može dovesti do nenamjernog prevrtanja sadržaja, posebno ako je sadržaj dulji nego što je namijenjen ili je spremnik sadržaja preuski. Vjerojatno smo svi već vidjeli: dizajn vodi računa o "idealnoj" dužini sadržaja, ali čim se primijeni i doda stvarni sadržaj, sadržaj se prebacuje na sljedeći redak jer nema dovoljno mjesta ili se ne probija iz njegovog spremnik. Oboje nisu idealni i mogu uzrokovati lomljenje izgleda.

Problem nije siguran da će raspoloživi prostor uvijek biti dovoljno velik da primi sadržaj koji se može razlikovati u duljini. Tradicionalno smo koristili CSS Media Queries za podešavanje izgleda na određenim prijelaznim točkama kako bismo ublažili probleme sa prebacivanjem sadržaja. Ali medijski upiti ne uzimaju u obzir duljinu samog sadržaja - oni odgovaraju na eksplicitnu širinu ili visinu. To često rezultira prevelikom količinom medijskih upita za kontrolu određenog sadržaja na eksplicitnim prijelaznim točkama.

Primjer poboljšanog zamotavanja s Flexboxom

Flexbox rješava ovaj problem omogućavajući nam da iskoristimo raspoloživi prostor i popunimo sadržaj kada ga nema. Ovakav način automatskog prilagođavanja nije samo prikladan, već poboljšava održivost jer se ne trebamo pouzdati u točku prijeloma da bismo ručno prilagodili stil. Primjer u gornjem prikazu pokazuje ovo ponašanje: prikažite oznaku lokacije uz naslov ako ima dovoljno mjesta i poravnajte oznaku lokacije s lijeve strane ispod naslova, ako nema dovoljno mjesta.

Tradicionalne metode poput plutanja rezultirale bi da oznaka lokacije ostane poravnana desno na manjim prikazima, što je manje nego idealno. To možete ispraviti lebdeći naljepnicom nalijevo na određenoj prijelomnoj točki. Problem ovog pristupa je što vi ovisite o prijelomnoj točki za promjenu stila sadržaja koji može varirati u dužini.

Poboljšani razmak i poravnanje

Kada je u pitanju razmak i usklađivanje u CSS-u, morali smo biti pametni da bismo postigli sve što nije bilo zadano ponašanje. Čak i efekti koji izgledaju trivijalno mogu biti složeni u CSS-u, poput vertikalnog poravnanja ili ravnomjernog dijeljenja prostora među stavkama, moraju se osloniti na zaobilazne okvire ili hakove. Neke stvari je potpuno nemoguće postići.

Flexbox to rješava omogućavajući raspoređivanje prostora između nepoznatog broja predmeta unutar područja nepoznate širine ili visine i poravnavanje predmeta na X ili Y osi. Djeluje slično kao što alati za dizajn poput Sketch ili Illustrator mogu kontrolirati razmak i poravnavanje, omogućujući kontrolu koju očekujemo na webu.

Primjer poboljšane distribucije prostora s Flexboxom

Sjajan primjer ove kontrole može se vidjeti gore: navigacijske stavke su ravnomjerno raspoređene, okomito su centrirane, a prva i posljednja stavka su usmjerene prema rubu navigacijskog spremnika. To bi bilo nemoguće pomoću tradicionalnih metoda, poput primjene inline bloka na stavke ili oslanjanja na izgled tablice.

Izvor naloga

Redoslijed izvora odnosi se na redoslijed u kojem su elementi prikazani na stranici na temelju mjesta na kojem se pojavljuju u HTML-u. Elementi će se prema zadanim postavkama prikazati odozdo i odozdo i lijevo desno - njihova širina određena je njihovim svojstvom prikaza.

Redoslijed dokumenta u prirodnom izvoru trebao bi vas voditi kada razmišljate o tome kako će se vaš dizajn prilagoditi različitim širinama prikaza, ali postoje slučajevi kad je korisno izmijeniti ih kako biste promijenili redoslijed predmeta. Jedini način da to učinite prije flexbox-a bio je sakriti element i prikazati drugi, što je rezultiralo duplikatom HTML-a, ili se osloniti na apsolutno pozicioniranje, koje ne funkcionira uvijek kada sadržaj može varirati u veličini. Pomoću flexboxa možete jednostavno izmijeniti redoslijed fleksibilnih stavki bez potrebe za izmjenom donje HTML strukture.

Primjer narudžbe predmeta pomoću Flexbox-a

Gornji primjer pokazuje naručivanje u Flexboxu: prikazujemo logo na lijevoj strani podnožja, što je u skladu s zaglavljem. Na malim prikazima prikazujemo lokacije prije logotipa. To preuređivanje ima smisla, jer su lokacije važnije u ovom kontekstu.

Raspored rešetke

Izgled CSS mreže je dvodimenzionalni sustav izgleda kreiran posebno za Internet. To nam daje mogućnost da stranicu podijelimo na regije koja se mogu dalje definirati s obzirom na veličinu, položaj i sloj, što rezultira nevjerojatno snažnim izvornim okvirom.

Stane u svrhu

CSS nikada nije imao istinski alat za oblikovanje namjene, pa smo morali biti vrlo inventivni s načinom na koji možemo primijeniti mrežu u svom radu. Pojavili su se mrežni okviri koji ispunjavaju tu potrebu, ali ne bez uvođenja vlastitih problema. Mnogi od najpopularnijih okvira mreže zahtijevaju definiranje izgleda u označivanju, što može dovesti do pojave koda, problema s održavanjem i zamagljuje odvajanje strukture dokumenta i prezentacije.

S rešetkom nam više ne treba mrežni okvir - to je izvorni okvir pečen izravno u CSS. Omogućuje nam da na intuitivan način definiramo izgled u CSS-u, istovremeno prihvaćajući zadanu fluidnost Weba. Mogućnosti ovog novog alata za izgled su beskrajne, a on nam omogućuje ostvarenje izgleda koji su bili mogući samo s Javascriptom prije njegova dolaska.

Primjer mrežnog rasporeda

Web-izgled nove generacije

Kad je riječ o izgledu, već dugo smo ostali zakrčeni. Uspostavljeni obrasci i ograničenja prethodnih alata za izgled u CSS-u doveli su nas do staza homogenosti izgleda u prošlosti. Ne morate ići daleko na internetu da biste ga uočili: zaglavlje, glavni sadržaj, bočna traka, podnožje.

Dolaskom responzivnog web dizajna pokrenule su se neke nove ideje za izgled stranice, a s njom se počinju pojavljivati ​​i neki dobri uzorci: iskopati bočnu traku, pojednostaviti dizajn i usredotočiti se na sadržaj. No, također vidimo kako se pojavljuju obrasci koji su postali toliko sveprisutni da čujemo uzvik „sve web stranice izgledaju isto“.

Raspored rešetke omogućit će nam da izađemo iz rute izgleda u kojem smo bili i pružiti nam alate potrebne za izradu izgleda nove generacije. Konačno se možemo nadograditi na sadržaju, umjesto da ga forsiramo u generičke obrasce dizajna koji se mogu naći na svakoj drugoj responzivnoj web stranici.

Riječ opreza

Važno je napomenuti da ne podržavaju svi preglednici značajke fleksboksa i rešetki. Moramo uzeti u obzir tko je naša publika za svaki projekt i utvrditi hoće li većina korisnika imati koristi od ovih naprednijih značajki, istovremeno pružajući razuman pad za nepodržavajuće preglednike. Potpuno je prihvatljivo korisnicima u starijim preglednicima pružiti pojednostavljenu verziju korisničkog sučelja i poboljšati je za korisnike u novijim preglednicima.

Ima još. Puno više.

Iskrali smo samo površinu onoga što fleks i mreža mogu učiniti. Na sreću, na raspolaganju je puno sjajne dokumentacije koja se dotiče mogućnosti ovih novih alata za izgled. Evo nekih mojih omiljenih:

flexbox

rešetka

Svatko tko gradi za Internet bolno je svjestan različitih ograničenja kada je u pitanju izgled u CSS-u. Često je to zahtijevalo kompromitiranje dizajna tako da djeluje onako kako se očekuje u razvoju ili što je još gore, oslanjajući se na Javascript da bismo implementirali ponašanje koje nam je potrebno.

Dolazak izgleda fleksboksa i rešetke signalizira novu eru izgleda na webu. Moramo usvojiti novi način razmišljanja kada je riječ o izgledu kako se ne bi ograničavali navikama, nedostacima i nedaćama iz prošlosti. Prihvatimo ove nove alate i obnovimo istraživanje za ono što je moguće s izgledom na webu.