20 meetup’ers kwamen luisteren naar Eva Brarens (GraphicsGrove) en Tom Hermans (tomhermans.com/). Én vragen stellen. Hier een verslag van de presentaties, met de slides en de vermelde links.
Talk #1: CSS Flexbox, Tom Hermans
Tom liet ons de mogelijkheden van Flexbox zien, inclusief dé langverwachte oplossing om met CSS verticaal te kunnen centreren! (jaja, dat kan dus blijkbaar al een hele tijd, ondertussen ook crossbrowser)
Hij gaf ook een aantal tips, waarop er nog extra tips van de groep bijkwamen. Hier de links:
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- caniuse.com (er is ook een extensie voor vscode)
- Free course What the flexbox? (Wes Bos)
- http://smashingmagazine.com/category/flexbox
- https://cssbattle.dev/
- Codepen example to play with: https://codepen.io/tomhermans/pen/XwbVGo
- Flexbox Froggy, a game to learn flexbox
Slides Mark Creeten (voor wie Tom vanavond inviel):
Slides Tom Hermans: https://codepen.io/tomhermans/pen/XwbVGo
Talk #2: Editorial design and CSS Grid, Eva Brarens
“Na 15 à 20 jaar is CSS volwassen aan het worden.” Yay!
We kunnen eindelijk op een betrouwbare en (bijna) crossbrowser manier pagina’s gaan layouten in CSS. Met Flexbox kan al heel veel, CSS Grid gaat verder. Vooral de combo blijkt sterk (flexbox in grid, grid in flexbox, flexbox in grid in grid, …)
Eva liet zien dat je ook niet per sé alles van CSS Grid moet kennen om ermee aan de slag te gaan. Ze begon haar talk met een kennismaking met editorial design; pagina’s waar inhoud en layout elkaar versterken, bv page spreads in magazines waar zowel beeld, inhoud als typografie op elkaar afgestemd zijn.
Online lijken veel websites en artikelen op elkaar. Eva toont ons hoe CSS Grid ingezet kan worden om editorial designs ook online te verwezenlijken. Ze gebruikte daarvoor zowel voorbeelden van creatieve online artikelen als eigen experimenten.
Eva haar slides vind je op https://docs.google.com/presentation/d/1clR4mr8G6CrSm82sViD9DCTCID_FtMjc0nJy6eFTCEk/, links naar haar CSS Grid voorbeelden vind je op https://graphicsgrove.com/thelab/#
Links naar de voorbeeldartikels (editorial design online toegepast):
- https://louderthanten.com/coax/design-machines
- https://highline.huffingtonpost.com/articles/en/poor-millennials/
- https://thegreatdiscontent.com/interview/shawna-x
+ extra links:
- https://css-tricks.com/snippets/css/complete-guide-grid/
- Free course Let’s get griddy with CSS Grid (Wes Bos)
- gridbyexample.com
- Youtube channel Layout Land (Jen Simmons)
Dikke merci aan Eva & Tom, en ook iedereen die erbij was! Veel vragen, fijne babbels, we like it 😉
Next: 22/5 WordSesh (online én een viewing party in Mechelen), 3/6 WP Hasselt, 13/6 is de volgende meetup in Antwerpen en 20-22/6 WordCamp Europe in Berlijn.
Voor 13/6 zoeken we nog short talks (2min of meer), wil je iets delen/laten zien: stuur je idee in via https://wpbelgium.be/speakers/.
