flexbox en grid met Peter Doolaard

Alle evergreen browsers ondersteunen de lay-outtechnieken Flexible Box Layout en Grid Layout. Helemaal zonder bugs zijn de implementaties niet, maar beide zijn veilig te gebruiken in productie.
De mogelijkheden zijn fantastisch. Een greep: kolommen van gelijke hoogte maak je in een handomdraai, verticaal uitlijnen is supereenvoudig, beschikbare ruimte worden vanzelf verdeeld en een responsive lay-out is zelfs mogelijk zonder media queries (en zonder floats!).
Om van al die fijne eigenschappen te kunnen profiteren, moet je wel weten hoe ze werken. En zoals zo vaak met CSS: het is altijd lastiger dan je denkt. Deze workshop heeft als doel dat je na afloop zelfstandig kunt werken met flexbox en grid.

Voorkennis

Kennis van HTML en CSS is vereist.

Wat heb je nodig?

Je eigen laptop met je favoriete code-editor. De browser Firefox wordt aanbevolen. Die heeft handige hulpmiddelen voor het werken met flex en grid. Bovendien ondersteunt Firefox al subgrid, een nieuwe optie. Oefenmateriaal wordt tijdig beschikbaar gesteld.

Wat leer je?

Zoals zo vaak begin je niks zonder theoretische basis. Je leert onder meer:

Wat het belangrijke verschil is tussen flexbox en grid en hoe dat de toepassingsmogelijkheden bepaalt.
Dat je anders moet leren kijken naar links/rechts/boven/onder.
Nieuwe eigenschappen en eenheden.
Wat Grid Layout is en wat je ermee kunt doen.
Wat de gridcontainer, de griditems en het subgrid zijn.
Verschillende manieren om kolommen en rijen te definiëren.
Verschillende manieren om content te plaatsen: gridlijnen (met/zonder naam) en gridgebieden.
Het grid zichzelf laten bouwen (responsive).
Uitlijning van content in het grid.
Subgrid: grid in een grid.
Wat Flexible Box Layout is en wat je ermee kunt doen.
Hoe je de richting (flow) en de omloop (wrap) instelt.
Hoe groeien en krimpen werkt en wat de invloed van flex-basis is.
Uitlijnen van flexitems.

Natuurlijk moet er ook gewerkt worden. Tijdens het theoriedeel maak je kleine oefeningen. Later op de dag ga je aan de slag met paginalay-outs en componenten.
Specifieke vragen over het bouwen van een bepaalde lay-out of component kun je tot twee weken voor de workshop mailen naar Peter Doolaard. Zulke vragen kunnen een mooi onderwerp zijn voor het praktische deel van de dag.

Over de docent

Peter Doolaard is auteur van onder meer het Handboek HTML 5 en CSS 3 (vijfde editie 2019, handboek-html-css.nl) en eerder de Basiscursus CSS (2004). Zijn belangstelling voor webdevelopment begon bij HTML 3.2. Als (freelance) redacteur bij toonaangevende ICT-uitgeverijen redigeerde hij talloze boeken over webdevelopment. Daarvan werd hij alleen maar enthousiaster over alles wat je kunt maken met HTML, CSS en JavaScript.

Opgave

Voor deze workshop is nog geen (nieuwe) datum gepland. Mocht je geïnteresseerd zijn in de workshop, hou dan het overzicht in de gaten of blijf op de hoogte via RSS en Twitter.