Designer's Guide to Flexbox en Grid

Wat ontwerpers moeten weten over deze transformationele lay-outtools.

CSS heeft een lange weg afgelegd sinds de introductie in 1996, maar de tools die we beschikbaar hebben voor de lay-out zijn niet veel veranderd. Tafellay-outs waren ongelooflijk te star, op float gebaseerde lay-outs waren in feite een hack, lay-outs op basis van positionering waren niet aanpasbaar en niemand kon veel complexiteit op een efficiënte manier aan. Begrijp me niet verkeerd - deze methoden hebben ons echt ver gebracht, maar ze zijn niet bedoeld voor complexe lay-outdoeleinden.

De tekortkomingen van deze oude lay-outmethoden zijn nog duidelijker geworden bij responsief webontwerp, waarbij het omarmen van de vloeiendheid van het web van fundamenteel belang is.

Met flexbox en grid hebben we eindelijk tools die specifiek zijn bedoeld voor lay-out, die efficiënter zijn en geen hacks bevatten die nodig zijn met eerdere lay-outmethoden. Ze ontgrendelen nieuwe mogelijkheden voor oude problemen, maken dingen mogelijk die voorheen niet mogelijk waren en lossen echte problemen op waarmee we worden geconfronteerd met responsief webontwerp.

Flexbox

Flexbox, ook bekend als CSS flexibele dozen, is een nieuwe lay-outmethode die ons uitlijningscontrole geeft die geen enkele andere CSS-methode kan produceren. Het blinkt uit in ‘micro-indeling’: de mogelijkheid om ruimte uit te lijnen, te ordenen en te verdelen over items in een container, of de breedte of hoogte van een element te wijzigen om de beschikbare ruimte het beste te vullen.

Verbeterde verpakking

In Responsive Web Design varieert de beschikbare breedte naarmate de breedte van de viewport van grootte verandert. Dit kan leiden tot onbedoelde inhoudsverpakking, vooral als de inhoud langer is dan waarvoor is ontworpen, of als de inhoud van de container te smal is. We hebben het waarschijnlijk allemaal al eens eerder gezien: het ontwerp is goed voor de 'ideale' lengte van de inhoud, maar zodra het is geïmplementeerd en echte inhoud is toegevoegd, loopt de inhoud door naar de volgende regel omdat er onvoldoende ruimte is of uit de inhoud ervan breekt houder. Beide zijn niet ideaal en kunnen ervoor zorgen dat lay-outs breken.

Het probleem is niet zeker zijn of de beschikbare ruimte altijd groot genoeg zal zijn voor inhoud die kan variëren in lengte. Traditioneel hebben we CSS-mediaquery's gebruikt om de lay-out bij specifieke breekpunten aan te passen om problemen met het verpakken van inhoud te verminderen. Maar mediaquery's houden geen rekening met de lengte van de inhoud zelf - ze reageren op een expliciete breedte of hoogte. Dit resulteert vaak in een overmatige hoeveelheid mediaquery's om een ​​specifiek stuk inhoud op expliciete breekpunten te beheren.

Voorbeeld verbeterde verpakken met Flexbox

Flexbox lost dit probleem op door ons in staat te stellen gebruik te maken van de beschikbare ruimte en inhoud te verpakken wanneer dit niet het geval is. Dit automatisch aanpassen is niet alleen handig, maar verbetert de onderhoudbaarheid omdat we niet op breekpunt hoeven te vertrouwen om de styling handmatig aan te passen. Het bovenstaande voorbeeld demonstreert dit probleem: de locatieaanduiding naast de titel weergegeven als voldoende ruimte beschikbaar is, en de locatielabel passen aan het onder de titel linker als er voldoende ruimte beschikbaar.

Traditionele methoden zoals zweven zouden ertoe hebben geleid dat het locatielabel rechts uitgelijnd bleef op kleinere viewports, wat minder dan ideaal is. U kunt dit corrigeren door het label naar links te zweven op een specifiek breekpunt. Het probleem met deze aanpak is dat u nu afhankelijk bent van een breekpunt om de stijl van uw inhoud te wijzigen, die in lengte kan variëren.

Verbeterde afstand en uitlijning

Als het gaat om afstand en uitlijning in CSS, moesten we slim worden om alles te bereiken dat niet het standaardgedrag was. Zelfs effecten die triviaal lijken, kunnen lastig zijn in CSS, zoals verticale uitlijning of de ruimte gelijkmatig verdelen tussen items, moeten afhankelijk zijn van tijdelijke oplossingen of hacks. Sommige dingen zijn ronduit onmogelijk te bereiken.

Flexbox lost dit op door de verdeling van ruimte tussen een onbekend aantal items binnen een gebied van onbekende breedte of hoogte mogelijk te maken en items op de X- of Y-as uit te lijnen. Het werkt ongeveer zoals hoe ontwerptools zoals Sketch of Illustrator de afstand en uitlijning kunnen regelen, waardoor de controle die we op het web verwachten zou kunnen worden.

Voorbeeld van verbeterde ruimteverdeling met Flexbox

Een goed voorbeeld van dit besturingselement is hierboven te zien: navigatie-items zijn gelijkmatig verdeeld, verticaal gecentreerd en het eerste en laatste item liggen gelijk met de rand van de navigatiecontainer. Dit zou onmogelijk zijn geweest met traditionele methoden, zoals het toepassen van inline-blok op items of het vertrouwen op de lay-out van de tabel.

bron Bestel

Bronvolgorde verwijst naar de volgorde waarin elementen op de pagina worden weergegeven op basis van waar ze in de HTML verschijnen. Standaard worden elementen van boven naar beneden en van links naar rechts standaard weergegeven, waarbij hun breedte wordt bepaald door hun weergave-eigenschap.

De natuurlijke bronvolgorde van het document moet u helpen bij het nadenken over hoe uw ontwerp zich aanpast aan verschillende viewport-breedten, maar er zijn momenten waarop het handig is om het te wijzigen om items te herschikken. De enige manier om dit vóór flexbox te doen, was om het element te verbergen en een ander weer te geven, wat resulteerde in dubbele HTML, of te vertrouwen op absolute positionering, die niet altijd werkt wanneer de inhoud in grootte kan variëren. Met flexbox kunt u eenvoudig de volgorde van flexitems wijzigen zonder de onderliggende HTML-structuur te wijzigen.

Voorbeeld van een item ordening met Flexbox

Het bovenstaande voorbeeld toont het bestellen in Flexbox: we geven het logo aan de linkerkant van de voettekst weer, wat overeenkomt met de koptekst. Op kleine viewports tonen we de locaties vóór het logo. Deze herschikking is logisch omdat de locaties in dit verband belangrijker zijn.

Rasterindeling

CSS-rasterlay-out is een tweedimensionaal lay-outsysteem dat speciaal is gemaakt voor het web. Het geeft ons de mogelijkheid om de pagina te verdelen in regio's die elk verder kunnen worden gedefinieerd in termen van grootte, positie en laag, wat resulteert in een ongelooflijk krachtig native framework.

Passend voor het doel

CSS is nog nooit echt geschikt geweest voor lay-outtool, dus we moesten behoorlijk inventief worden hoe we een raster op ons werk kunnen toepassen. Er zijn netwerkkaders ontstaan ​​om aan deze behoefte te voldoen, maar niet zonder hun eigen problemen te introduceren. Veel van de meest populaire rasterframes vereisen lay-outdefinitie in de markup, wat kan leiden tot code-opgeblazenheid, onderhoudsproblemen en de scheiding van documentstructuur en presentatie vervaagt.

Met grid hebben we niet langer een grid-framework nodig - het is een native framework ingebouwd in CSS. Hiermee kunnen we de lay-out in CSS op een intuïtieve manier definiëren, terwijl we tegelijkertijd de standaardfluïditeit van het web omarmen. De mogelijkheden van deze nieuwe lay-outtool zijn eindeloos en het stelt ons in staat om lay-outs te realiseren die alleen mogelijk waren met Javascript vóór zijn aankomst.

Voorbeeld van rasterlay-out

Next-Generation Web Layouts

Als het gaat om de lay-out, zitten we al een tijdje in een sleur. Gevestigde patronen en de beperkingen van eerdere lay-outtools in CSS hebben ons in het verleden op het pad van lay-outhomogeniteit geleid. U hoeft niet ver op internet te gaan om het te herkennen: koptekst, hoofdinhoud, zijbalk, voettekst.

De komst van responsief webontwerp heeft een aantal nieuwe ideeën voor paginalay-out geïnitieerd, en daarmee beginnen een aantal goede patronen te ontstaan: sloot de zijbalk, vereenvoudigt het ontwerp en concentreert zich op de inhoud. Maar we zien ook patronen ontstaan ​​die zo alomtegenwoordig zijn geworden dat we de uitroep horen dat "alle websites er hetzelfde uitzien".

Met de rasterlay-out kunnen we de sleur van de lay-out waarin we zijn geweest verlaten en krijgen we de tools die we nodig hebben om de lay-outs van de volgende generatie te bouwen. We kunnen eindelijk rond de inhoud bouwen in plaats van deze te dwingen tot generieke ontwerppatronen die op elke andere responsieve website te vinden zijn.

Een woord van voorzichtigheid

Het is belangrijk op te merken dat niet alle browsers flexbox- en rasterfuncties ondersteunen. We moeten rekening houden met wie ons publiek is voor elk project en bepalen of de meerderheid van de gebruikers zal profiteren van deze meer geavanceerde functies, terwijl we een verstandige terugval bieden voor niet-ondersteunende browsers. Het is volkomen acceptabel om gebruikers in oudere browsers een vereenvoudigde versie van uw gebruikersinterface te bieden en deze te verbeteren voor gebruikers in nieuwere browsers.

Er is meer. Veel meer.

We hebben alleen het oppervlak van wat flexbox en grid kunnen doen bekrast. Gelukkig is er veel geweldige documentatie beschikbaar die de mogelijkheden van deze nieuwe lay-outtools raakt. Hier zijn enkele van mijn favorieten:

Flexbox

rooster

Iedereen die voor het web heeft gebouwd, is zich pijnlijk bewust van verschillende beperkingen als het gaat om de lay-out in CSS. Vaak vereiste dit een compromis met het ontwerp zodat het werkte zoals verwacht in de ontwikkeling, of erger, afhankelijk van Javascript om het gedrag te implementeren dat we nodig hadden.

De komst van de lay-out van flexbox en raster betekent een nieuw tijdperk van lay-out op het web. We moeten een nieuwe manier van denken aannemen als het gaat om lay-out om niet te worden beperkt door de gewoonten, nadelen en hacks van het verleden. Laten we deze nieuwe tools omarmen en onze verkenning vernieuwen voor wat mogelijk is met lay-out op het web.