slides

For Munich Frontend Conference. This is sort of a transcript and notes for the talk.

Thank you all for having me at Munich Frontend Conference. It has been tough for the organisers with the COVID-19 situation so I really want to give them a shout-out for responding in such a timely manner and getting this conference up and running completely online.

So this is going to be a bit of a CSS talk, covering mostly the layout bits of CSS. I have loved CSS ever since I first picked up web development. And yes, I do like Javascript, but I just love CSS more.

Sometimes, even though you love something a lot, over time that feeling might fade. Not so with me and CSS. In fact, I’m even more excited about CSS today than I was when I first started. Why? Because like every good relationship, both parties must evolve and grow.

And CSS has evolved and grown so much. I’d like to think I did too, but that’s another conversation. Recently I’ve been thinking more and more about how to show people who find CSS confusing, frustrating or are new to it, how things are easier now than before.

A light bulb went off in my head last year after the Flexbox inspector was released in Firefox DevTools. Because it showed me what the browser was doing to my flex items. I mean, I always relied heavily on the grid inspector for showing me what was going on with my grid items but the flexbox inspector really opened my eyes to the possibilities of what DevTools could be.

If it were up to me, I could talk about CSS for days, but don’t worry, they gave me a time limit. So I picked a few specific CSS properties to talk about today. Let’s start with Flexbox.

flex-basis

grid-template-areas

Subgrid line numbers

polygon value

Chibi-chat demo