2017 is het jaar van de grid

Dank­zij CSS Grid staat grid-in­no­va­tie weer in de be­lang­stel­ling

Web Designer Magazine - - Inhoud - Ke­vin Ball Foun­da­ti­on Lead bij Zurb www.zurb.com

Dank­zij CSS Grid staat grid-in­no­va­tie weer in de be­lang­stel­ling.

2017 is het jaar van de grid. Toen Fi­re­fox, Sa­fa­ri en Chro­me in het voor­jaar bin­nen een paar maan­den van el­kaar de nieu­we CSS Grid lay-out­spe­ci­fi­ca­tie gin­gen on­der­steu­nen, leek het als­of ont­wik­ke­laars in een lui­lek­ker­land te­recht wa­ren ge­ko­men. Voor­heen dach­ten we in tra­di­ti­o­ne­le een­di­men­si­o­na­le we­blay-outs, waar­in we heel veel con­tro­le over de ho­ri­zon­ta­le op­maak had­den, maar stuk­ken min­der over de ver­ti­ca­le. Met CSS Grid kre­gen we veel meer mo­ge­lijk­he­den voor het op­ma­ken van echt twee­di­men­si­o­na­le pa­gi­na’s, met een aan­zien­lijk een­vou­di­ge­re en meer se­man­ti­sche mar­kup.

He­laas blijft CSS Grid voor­lo­pig nog toe­komst­mu­ziek voor pro­duc­tie­web­si­tes. On­danks de gro­te sprong voor­waarts die het door de ge­za­men­lij­ke on­der­steu­ning van Fi­re­fox, Sa­fa­ri en Chro­me heeft ge­kre­gen, wordt CSS Grid slechts door iets meer dan 60% van de brow­sers on­der­steund. Daar zijn twee oor­za­ken voor aan te wij­zen: de eer­ste is Mi­cro­softs brow­ser Ed­ge die de nieu­we tech­niek nog niet on­der­steunt en de twee­de, en be­lang­rij­ke­re oor­zaak, is de gro­te ver­sprei­ding van ou­de­re smartpho­nes en ta­blets die de tech­niek niet on­der­steu­nen en die maar lang­zaam ver­van­gen wor­den (bron: www.ca­ni­u­se. com).

Toen men in de opens­our­ce-com­mu­ni­ty van Zurb be­gon te pra­ten over het ge­bruik van CSS Grid in het Foun­da­ti­on-fra­me­work, moesten zelfs de groot­ste fans toe­ge­ven dat het waar­schijn­lijk pas van­af me­dio 2018 in pro­duc­tie­pro­jec­ten ge­bruikt zal wor­den. Het was net als­of je voor het raam van de win­kel al wel naar lek­ke­re snoep­jes mocht kij­ken, maar ze pas vol­gend jaar mocht eten. CSS Grid had la­ten zien wat er mo­ge­lijk was met een echt twee­di­men­si­o­na­le op­maak, dus de com­mu­ni­ty wil­de daar ge­woon snel mee aan de slag.

Toen de Foun­da­ti­on-com­mu­ni­ty de mo­ge­lijk­he­den van grid be­gon te ver­ken­nen, re­a­li­seer­den we ons dat de nieu­we tech­nie­ken een enor­me hoe­veel­heid on­be­nut­te mo­ge­lijk­he­den bo­den.

Flex­box wordt bij­voor­beeld al veel ge­bruikt, maar er zijn geen of nau­we­lijks grids die de mo­ge­lijk­he­den voor het ver­ti­caal op­ma­ken even goed be­nut­ten als voor het ho­ri­zon­taal op­ma­ken. Met Flex­box is het su­per een­vou­dig om elementen ver­ti­caal te cen­tre­ren en de groot­te er­van au­to­ma­tisch aan te pas­sen. Bo­ven­dien kun­nen ont­wik­ke­laars hun ‘denk­rich­ting’ van ho­ri­zon­taal naar ver­ti­caal en weer te­rug swit­chen. Met Flex­box ver­an­dert hun we­reld van een die uit vak­ken en lij­nen be­staat naar een we­reld die uit vec­to­ren be­staat waar ze een x- of y-rich­ting aan kun­nen toe­wij­zen, waar­mee tekst au­to­ma­tisch gaat om­lo­pen en elementen nauw­keu­rig ge­po­si­ti­o­neerd kun­nen wor­den.

Met de calc()-func­tie van CSS3 kun je elementen net als met Flex­box nauw­keu­rig op hun plaats zet­ten. Om­dat je er in­ge­wik­kel­de mar­gin-ba­sed grids mee kunt ma­ken, hoef je niet te wor­ste­len met de uit­da­gin­gen van pad­ding-ba­sed grids, die nog ge­meen­goed zijn bij Css-fra­me­works. Met calc kun je re­ke­nen met Css-ei­gen­schap­pen, ver­schil­len­de leng­te-een­he­den zo­als % en rem met el­kaar com­bi­ne­ren en grids ma­ken waar­bij je de ver­hou­din­gen tus­sen de elementen aan­geeft. Het nieu­we XY Grid in Foun­da­ti­on 6.4 be­nut de voor­de­len van bei­de om een su­per­een­vou­di­ge twee­di­men­si­o­na­le grid te ma­ken met een nauw­keu­ri­ge con­tro­le over zo­wel pad­ding als mar­gin. De­ze grid is een­vou­dig te be­grij­pen, mak­ke­lijk te ge­brui­ken en het ont­wik­ke­len van in­ge­wik­kel­de twee­di­men­si­o­na­le lay-outs gaat er veel snel­ler mee. Het mooi­ste van XY Grid is dat het ge­ba­seerd is op tech­nie­ken zo­als calc en Flex­box, die door meer dan 95 pro­cent van de brow­sers wor­den on­der­steund. Hier­door is XY Grid van Zurb nu al bruik­baar in pro­duc­tie­pro­jec­ten.

XY Grid maakt ge­bruik van Flex­box om je in staat te stel­len de cel­len van een grid in ver­ti­ca­le of ho­ri­zon­ta­le rich­ting te be­wer­ken. Om­dat Flex­box in vec­to­ren denkt, heeft elk ele­ment van een grid een rich­ting die x (ho­ri­zon­taal) of y (ver­ti­caal) is. Door de­ze ho­ri­zon­ta­le en ver­ti­ca­le com­po­nen­ten naad­loos te nes­ten, kun je heel mak­ke­lijk twee­di­men­si­o­na­le lay-outs ma­ken. Daar­na stel je de mar­gin en de pad­ding van de cel­len in je grid nauw­keu­rig in met calc. Zo aap je in fei­te de mo­ge­lijk­he­den na die CSS Grid heeft voor het op­vul­len van ruim­tes tus­sen rij­en en ko­lom­men.

Dat is niet het eni­ge ver­nuf­ti­ge: door de in­tro­duc­tie van een grid-‘fra­me’ kun je je grid met XY Grid op een vas­te po­si­tie in de vie­w­port fixe­ren voor he­a­ders, foo­ters en an­de­re elementen. Je kunt er ook elementen mee ma­ken die on­af­han­ke­lijk van de rest van de pa­gi­na scrol­len.

Na ja­ren waar­in re­la­tief wei­nig ge­beur­de, zijn grids weer hot. CSS Grid ge­bruikt de krach­tig­ste lay-out-en­gi­ne ter we­reld en maakt die tien keer zo krach­tig. Om­dat de be­per­kin­gen van de hui­di­ge tech­nie­ken op­ge­he­ven wor­den en je je ont­wer­pen voort­aan echt in meer­de­re rich­tin­gen kunt ma­ken, ver­wacht ik daar een enor­me op­bloei van in­no­va­tie­ve nieu­we lay-outs van. Steeds meer ont­wik­ke­laars en brow­sers zul­len de spe­ci­fi­ca­tie om­ar­men.

Met de vol­gen­de gro­te ver­sie van Foun­da­ti­on kun­nen ont­wik­ke­laars de mo­ge­lijk­he­den van CSS Grid nog be­ter be­nut­ten. Daar hoef je ech­ter niet op te wach­ten, want dank­zij de nieu­we Foun­da­ti­on XY Grid – die ge­ba­seerd is op de wijd­ver­sprei­de Flex­box en calc – kun je nu al een­vou­dig grids ont­wik­ke­len voor mor­gen.

CSS Grid biedt meer mo­ge­lijk­he­den voor het ma­ken van twee­di­men­si­o­na­le pa­gi­na’s, met een veel een­vou­di­ge­re en meer se­man­ti­sche mar­kup.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.