Designer Guide to Flexbox and Grid

Hva designere trenger å vite om disse transformasjonslayoutverktøyene.

CSS har kommet langt siden introduksjonen i 1996, men verktøyene vi har tilgjengelig for layout har ikke endret seg mye. Bordoppsett var utrolig for stive, flytebaserte oppsett var i utgangspunktet et hack, posisjonsbaserte oppsett var ikke tilpasningsdyktige, og ingen kunne håndtere mye kompleksitet på en effektiv måte. Ikke misforstå - disse metodene kom oss veldig langt, men de er ikke ment for komplekse layoutformål.

Manglene med disse gamle metodene for utforming har blitt enda tydeligere med responsiv webdesign, der omfavnelse av fluiditeten til nettet er grunnleggende.

Med flexbox og rutenett har vi endelig verktøy beregnet spesielt for layout som er mer effektive og ugyldige for hacks som er nødvendige med tidligere layoutmetoder. De låser opp nye muligheter for gamle problemer, aktiverer ting som ikke var mulig før, og løser reelle problemer vi står overfor med responsiv webdesign.

flexbox

Flexbox, også kjent CSS fleksible bokser, er en ny layoutmetode som gir oss justeringskontroll som ingen annen CSS-metode kan produsere. Det utmerker seg med ‘mikrolayout’: muligheten til å justere, bestille og fordele plass mellom elementer i en container, eller endre et elements bredde eller høyde for best å fylle den tilgjengelige plassen.

Forbedret innpakning

I Responsive Web Design varierer tilgjengelig bredde ettersom visningsbredden endrer størrelse. Dette kan føre til utilsiktet innpakning av innhold, spesielt når innholdet er lengre enn designet for, eller hvis innholdet er beholderen er for smal. Vi har nok alle sett før: designen står for den 'ideelle' innholdslengden, men så snart den er implementert og ekte innhold er lagt til, vikles innholdet til neste linje fordi det ikke var nok plass eller bryter ut av dets container. Begge deler er ikke ideelle, og kan føre til at oppsett brytes.

Problemet er ikke å være sikker på at den tilgjengelige plassen alltid vil være stor nok til å romme innhold som kan variere i lengde. Tradisjonelt har vi brukt CSS Media Queries for å justere oppsettet på bestemte brytepunkter for å dempe problemer med innholdsinnpakning. Men Media Queries tar ikke hensyn til lengden på selve innholdet - de svarer på en eksplisitt bredde eller høyde. Dette resulterer ofte i en for stor mengde mediaspørsmål for å kontrollere et spesifikt innhold på eksplisitte bruddpunkter.

Eksempel på forbedret innpakning med Flexbox

Flexbox løser dette problemet ved å gjøre det mulig for oss å dra nytte av den tilgjengelige plassen og deretter pakke inn innhold når det ikke er det. Denne autojustere oppførselen er ikke bare praktisk, men forbedrer vedlikeholdsgraden fordi vi ikke trenger å stole på bruddpunkt for å justere stylingen manuelt. Eksemplet over demonstrerer denne oppførselen: vis stedsetiketten ved siden av tittelen hvis nok plass er tilgjengelig, og juster lokasjonsetiketten til venstre under tittelen hvis det ikke er nok plass.

Tradisjonelle metoder som flytende ville resultert i at posisjonsetiketten forblir rettjustert på mindre utsiktsporter, noe som er mindre enn ideelt. Du kan korrigere dette ved å flyte etiketten til venstre ved et bestemt brytepunkt. Problemet med denne tilnærmingen er nå at du er avhengig av et bruddpunkt for å endre stylingen på innholdet ditt, som kan variere i lengde.

Forbedret avstand og justering

Når det gjelder avstand og justering i CSS, har vi måttet være smarte for å oppnå alt som ikke var standardoppførselen. Selv effekter som virker trivielle kan være vanskelige i CSS, som vertikal justering eller jevnt fordele plass mellom gjenstander, må stole på midlertidig løsning eller hacks. Noen ting er helt umulige å oppnå.

Flexbox løser dette ved å aktivere fordelingen av plass mellom et ukjent antall elementer i et område med ukjent bredde eller høyde, og justere elementer på X- eller Y-aksen. Det fungerer omtrent som hvordan designverktøy som Sketch eller Illustrator kan kontrollere avstand og justering, noe som muliggjør kontrollen vi forventer på nettet.

Eksempel på forbedret romfordeling med Flexbox

Et flott eksempel på denne kontrollen kan sees over: navigasjonselementer er jevnt fordelt, vertikalt sentrert, og det første og siste elementet er i flukt til kanten av navigasjonsbeholderen. Dette ville vært umulig ved bruk av tradisjonelle metoder som å bruke inline block på elementer eller stole på bordoppsett.

Kildebestilling

Kilderekkefølge refererer til rekkefølgen elementer vises på siden basert på hvor de vises i HTML. Som standard vil elementer vises fra topp til bunn og fra venstre til høyre som standard - bredden bestemmes av deres visningsegenskaper.

Dokumentets naturlige kilderekkefølge bør veilede deg når du tenker på hvordan designen din vil tilpasse seg forskjellige visningsbredder, men det er tidspunkter hvor det er nyttig å endre det for å omorganisere elementer. Den eneste måten å gjøre dette før flexbox var å skjule elementet og vise et annet, noe som resulterte i duplikat HTML, eller å stole på absolutt posisjonering, som ikke alltid fungerer når innholdet kan variere i størrelse. Med flexbox kan du ganske enkelt endre rekkefølgen på flex-elementer uten å måtte endre den underliggende HTML-strukturen.

Eksempel på varebestilling med Flexbox

Eksemplet over viser bestilling i Flexbox: vi viser logoen på venstre side av bunnteksten, som er i samsvar med overskriften. På små utsiktsporter viser vi plasseringene før logoen. Denne omplasseringen er fornuftig fordi stedene er viktigere i denne sammenhengen.

Rutenettoppsett

CSS rutenettoppsett er et todimensjonalt layoutsystem laget spesielt for nettet. Det gir oss muligheten til å dele siden inn i regioner som hver kan defineres ytterligere når det gjelder størrelse, plassering og lag, noe som resulterer i en utrolig kraftig innfødt ramme.

Passer til formål

CSS har aldri passet riktig til oppsettverktøy, så vi har måttet bli ganske oppfinnsomme med hvordan vi kan bruke et rutenett på arbeidet vårt. Nettverksrammer har dukket opp for å fylle dette behovet, men ikke uten å introdusere egne problemer. Mange av de mest populære rammene på nettet krever definisjon av oppsett i markeringen, noe som kan føre til oppblåsing av koder, problemer med vedlikehold og uskarpe separasjonen av dokumentstruktur og presentasjon.

Med rutenett trenger vi ikke lenger et rutenett for nettverk - det er et naturlig rammeverk bakt rett i CSS. Det gjør det mulig for oss å definere layout i CSS på en intuitiv måte, samtidig som vi omfavner standardfluiditeten på nettet. Mulighetene til dette nye layoutverktøyet er uendelige, og det gjør oss i stand til å utføre oppsett som bare var mulig med Javascript før ankomst.

Eksempel på rutenettoppsett

Neste generasjons nettoppsett

Når det gjelder utforming, har vi sittet fast i et skikk på en god stund. Etablerte mønstre og begrensningene for tidligere layoutverktøy i CSS har ført oss nedover banen til layouthomogenitet i det siste. Du trenger ikke å dra langt på nettet for å oppdage det: topptekst, hovedinnhold, sidefelt, bunntekst.

Ankomsten til responsiv webdesign har satt i gang noen nye ideer for sideoppsett, og med det begynner det å dukke opp noen gode mønstre: grøft sidefeltet, forenkler designet og fokuser på innholdet. Men vi ser også mønstre dukke opp som har blitt så allestedsnærværende at vi hører utropet at "alle nettsteder ser like ut".

Rutenettoppsett vil gjøre det mulig for oss å avslutte layoututviklingen vi har vært i, og gi oss verktøyene vi trenger for å bygge neste generasjons layout. Vi kan endelig bygge rundt innholdet i stedet for å tvinge det til generiske designmønstre som finnes på alle andre responsive nettsteder.

Et ord av forsiktighet

Det er viktig å merke seg at ikke alle nettlesere støtter flexbox- og rutenettfunksjoner. Vi må ta hensyn til hvem publikummet vårt er for hvert prosjekt og avgjøre om flertallet av brukerne vil dra nytte av disse mer avanserte funksjonene, samtidig som de gir et fornuftig tilbakeslag for ikke-støttende nettlesere. Det er helt akseptabelt å gi brukere i eldre nettlesere en forenklet versjon av brukergrensesnittet, og forbedre den for brukere i nyere nettlesere.

Det er mer. Mye mer.

Vi har bare klødd på overflaten av hva flexbox og rutenett kan gjøre. Heldigvis er det mye bra dokumentasjon tilgjengelig som berører egenskapene til disse nye layoutverktøyene. Her er noen av favorittene mine:

flexbox

Nett

Alle som har bygd for nettet, er smertelig klar over ulike begrensninger når det gjelder layout i CSS. Ofte krevde dette at det kompromitterte designet, slik at det fungerer som forventet i utviklingen, eller enda verre, med å stole på Javascript for å implementere atferden vi trengte.

Ankomsten til flexbox- og rutenettoppsett signaliserer en ny epoke med layout på nettet. Vi må ta i bruk et nytt tankesett når det kommer til layout for ikke å bli begrenset av fortidens vaner, ulemper og hacks. La oss omfavne disse nye verktøyene og fornye utforskningen vår for hva som er mulig med layout på nettet.