Designervejledning til Flexbox og gitter

Hvad designere har brug for at vide om disse transformationslayoutværktøjer.

CSS er nået langt siden introduktionen i 1996, men de værktøjer, vi har til rådighed til layout, har ikke ændret sig meget. Bordlayouts var utroligt for stive, floatbaserede layouts var dybest set et hack, positionsbaserede layouts var ikke tilpasningsdygtige, og ingen kunne håndtere en hel del kompleksitet på en effektiv måde. Misforstå mig ikke - disse metoder kom os virkelig langt, men de er ikke beregnet til komplekse layoutformål.

Manglerne med disse gamle metoder til layout er blevet endnu mere synlige med lydhør webdesign, hvor det er grundlæggende at omfavne webens fluiditet.

Med flexbox og gitter har vi endelig værktøjer, der er specifikt beregnet til layout, der er mere effektive og ugyldige for hacks, der er nødvendige med tidligere layoutmetoder. De låser nye muligheder for gamle problemer, aktiverer ting, der ikke var muligt før, og løser reelle problemer, vi står overfor med responsivt webdesign.

flexbox

Flexbox, også kaldet CSS fleksible bokse, er en ny layoutmetode, der giver os justeringskontrol, som ingen anden CSS-metode kan producere. Det udmærker sig ved 'mikrolayout': muligheden for at justere, rækkefølge og fordele plads mellem elementer i en container eller ændre et elements bredde eller højde for bedst at udfylde den tilgængelige plads.

Forbedret indpakning

I Responsive Web Design varierer den tilgængelige bredde, når visningsbredden ændrer størrelser. Dette kan føre til utilsigtet indpakning af indhold, især når indholdet er længere end designet til, eller indholdets beholder er for smal. Vi har sandsynligvis alle set før: Designet tegner sig for den 'ideelle' indholdslængde, men så snart det er implementeret og reelt indhold tilføjes, indpakkes indholdet til den næste linje, fordi der ikke var nok plads eller bryder ud af dets beholder. Begge er ikke ideelle og kan medføre, at layouts går i stykker.

Problemet er ikke at sikre, at den tilgængelige plads altid vil være stor nok til at rumme indhold, der kan variere i længde. Traditionelt har vi brugt CSS Media Queries til at justere layout på specifikke breakpoints for at afbøde problemer med indpakning af indhold. Men medieforespørgsler tager ikke hensyn til længden på selve indholdet - de reagerer på en eksplicit bredde eller højde. Dette resulterer ofte i en overdreven mængde medieforespørgsler til kontrol af et specifikt stykke indhold på eksplicitte brudpunkter.

Eksempel på forbedret indpakning med Flexbox

Flexbox løser dette problem ved at gøre det muligt for os at drage fordel af den disponible plads og derefter indpakke indhold, når det ikke er det. Denne autojusterende opførsel er ikke kun praktisk, men forbedrer vedligeholdeligheden, fordi vi ikke er nødt til at stole på breakpoint for manuelt at justere stylingen. Eksemplet ovenfor demonstrerer denne opførsel: vis placeringsetiketten ved siden af ​​titlen, hvis der er nok plads til rådighed, og juster placeringsetiketten til venstre under titlen, hvis der ikke er tilstrækkelig plads.

Traditionelle metoder som flydende ville have resulteret i, at placeringsetiketten forblev højrejusteret på mindre udsigtsporte, hvilket er mindre end ideelt. Du kan korrigere dette ved at flyde etiketten til venstre ved et specifikt brudspunkt. Problemet med denne tilgang er nu, at du er afhængig af et breakpoint for at ændre stylingen af ​​dit indhold, som kan variere i længde.

Forbedret afstand og justering

Når det kommer til afstand og justering i CSS, har vi været nødt til at være kloge til at udføre alt, hvad der ikke var standardopførselen. Selv effekter, der synes trivielle kan være vanskelige i CSS, som lodret justering eller jævnt fordele plads mellem genstande, skal stole på løsninger eller hacks. Nogle ting er direkte umulige at opnå.

Flexbox løser dette ved at aktivere fordelingen af ​​plads mellem et ukendt antal emner inden for et område med ukendt bredde eller højde og justere emner på X- eller Y-aksen. Det fungerer meget som hvordan designværktøjer som Sketch eller Illustrator kan kontrollere afstand og justering, hvilket aktiverer den kontrol, vi kunne forvente på Internettet.

Eksempel på forbedret rumfordeling med Flexbox

Et godt eksempel på denne kontrol kan ses ovenfor: navigationselementer er jævnt fordelt, lodret centreret, og det første og sidste emne skylles ud til kanten af ​​navigationsbeholderen. Dette ville have været umuligt ved hjælp af traditionelle metoder, såsom at anvende inline-blok på elementer eller stole på bordlayout.

Kildeordre

Kilderækkefølge refererer til den rækkefølge, i hvilken elementer vises på siden baseret på, hvor de vises i HTML. Som standard vises elementer fra top til bund og fra venstre til højre som standard - deres bredde bestemmes af deres visningsegenskab.

Dokumentets naturlige kilde skal hjælpe dig, når du tænker over, hvordan dit design tilpasser sig forskellige visningsbredde, men der er tidspunkter, hvor det er nyttigt at ændre det for at omarrangere emner. Den eneste måde at gøre dette før flexbox var at skjule elementet og vise et andet, hvilket resulterede i duplikat HTML eller at stole på absolut placering, som ikke altid fungerer, når indholdet kan variere i størrelse. Med flexbox kan du simpelthen ændre rækkefølgen på flexemner uden at skulle ændre den underliggende HTML-struktur.

Eksempel på varebestilling med Flexbox

Eksemplet ovenfor viser rækkefølge i Flexbox: vi viser logoet på venstre side af sidefoden, hvilket er i overensstemmelse med overskriften. På små udsigtsporte viser vi placeringerne før logoet. Denne omlægning giver mening, fordi placeringerne er vigtigere i denne sammenhæng.

Gitterlayout

CSS-gridlayout er et todimensionalt layoutsystem oprettet specifikt til Internettet. Det giver os muligheden for at opdele siden i regioner, som hver kan defineres yderligere med hensyn til størrelse, placering og lag, hvilket resulterer i en utrolig kraftig indfødt ramme.

Fit for Purpose

CSS har aldrig haft en reel pasform til formateringslayoutværktøj, så vi har været nødt til at blive ret opfindelige med, hvordan vi kan anvende et gitter til vores arbejde. Netrammer har vist sig at opfylde dette behov, men ikke uden at introducere deres egne problemer. Mange af de mest populære gitterrammer kræver layoutdefinition i markeringen, hvilket kan føre til kodeopblæsning, vedligeholdelsesproblemer og slører adskillelsen af ​​dokumentstruktur og præsentation.

Med gitter har vi ikke længere brug for en gitterramme - det er en oprindelig ramme bagt lige ind i CSS. Det giver os mulighed for at definere layout i CSS på en intuitiv måde, alt sammen med at omfatte standardfluiditeten på Internettet. Funktionerne i dette nye layoutværktøj er uendelige, og det giver os mulighed for at udføre layouts, der kun var muligt med Javascript før dens ankomst.

Eksempel på gitterlayout

Næste generation af weblayouts

Når det kommer til layout, har vi været fast i et hjørne i et stykke tid. Etablerede mønstre og begrænsningerne af tidligere layoutværktøjer i CSS har ført os ned ad stien til layouthomogenitet i fortiden. Du behøver ikke at gå langt på Internettet for at få øje på det: header, hovedindhold, sidebjælke, sidefod.

Ankomsten til lydhør webdesign har indledt nogle nye ideer til sidelayout, og med det begynder nogle gode mønstre at dukke op: Grøft sidebjælken, forenkler designet og fokuserer på indholdet. Men vi ser også mønstre dukke op, der er blevet så allestedsnærværende, at vi hører udråbstegn, at "alle websteder ser ens ud".

Grid-layout vil gøre det muligt for os at forlade det layout, vi har været i, og give os de værktøjer, vi har brug for til at opbygge den næste generations layout. Vi kan endelig opbygge omkring indholdet i stedet for at tvinge det til generiske designmønstre, der kan findes på ethvert andet responsivt websted.

Et forsigtighedsord

Det er vigtigt at bemærke, at ikke alle browsere understøtter flexbox- og gitterfunktioner. Vi skal tage hensyn til, hvem vores målgruppe er for hvert projekt og bestemme, om flertallet af brugere vil drage fordel af disse mere avancerede funktioner, samtidig med at de giver et fornuftigt tilbagefald til ikke-understøttende browsere. Det er helt acceptabelt at give brugere i ældre browsere en forenklet version af dit UI og forbedre det for brugere i nyere browsere.

Der er mere. Meget mere.

Vi har kun ridset overfladen på, hvad flexbox og gitter kan gøre. Heldigvis er der masser af god dokumentation tilgængelig, der berører mulighederne i disse nye layoutværktøjer. Her er nogle af mine favoritter:

flexbox

Grid

Enhver, der har bygget til Internettet, er smertelig opmærksom på forskellige begrænsninger, når det kommer til layout i CSS. Ofte krævede dette at kompromittere designet, så det fungerer som forventet under udvikling, eller værre, med at stole på Javascript for at implementere den opførsel, vi havde brug for.

Ankomsten af ​​flexbox- og gitterlayout signaliserer en ny æra med layout på Internettet. Vi skal indføre en ny tankegang, når det kommer til layout for ikke at være begrænset af fortidens vaner, ulemper og hacks. Lad os omfavne disse nye værktøjer og fornye vores udforskning efter, hvad der er muligt med layout på Internettet.