[Intro Slide]

[Slide change: Hello]

Hey there! My name is Kathryn Grayson Nanz, and I’m the Developer Advocate for KendoReact at Progress. I’m a UI designer and front-end developer who especially loves working on the “front of the front end” – which basically means my dream day would be spending my time writing nothing but CSS. This is, as I’ve discovered over the years,

[Slide change: booing]

an unpopular opinion.

[Slide change: changes in CSS]

Today, we’re diving into a topic that I especially love: responsive CSS. The way we write CSS has (thankfully) changed a lot in the last decade – heck, even just in the last few years! And one of the most noticeable places where we can see that change is in the fall of the humble media query.

In Ye Olden Days of Webbe Development, if we wanted to create websites and applications that were responsive, it meant writing a series of media queries based around specific device breakpoints and then re-working our content to be optimized for each different size.

[Slide Change: Media queries]

You probably remember getting two or three very different mockups from a design team, for web, desktop, and maybe even tablet. And yes, before someone says the truly old days of web dev were table-based layouts, I remember those – and they sucked too. Shoutout to my email devs who are still very much living in that world. In the world of web and application development, CSS frameworks stepped in to try and ease the device-breakpoint paint point – we saw the rise of Bootstrap, Skeleton, and similar that defined different automatically resizing column based layouts because the task of writing all of those media queries was a lot of work!

[Slide Change: Responsive Design Approaches]

Slowly, though, we saw best practices around writing media queries shift (by necessity) from device-based breakpoints to content-based breakpoints as more and more devices came out in all shapes and sizes. Once it became unsustainable to cater to each individual device, it made more sense to shape our breakpoints around when and where it made the most sense for our content to shift. Now, though, with screens available in more or less any size and shape that you can imagine, it's time for us to shift our approach once again – the era of breakpoints is over and the era of fluid design is here. Fluid design means that rather than hitting a point and snapping your content into a new layout, our content should always be continually adjusting based on the amount of space available. You never feel a big “snap” as you’re resizing the screen, it’s a subtle shift that’s happening constantly depending on how each individual element best fits the space.

[Slide Change: Modern Responsive CSS]

Thankfully, CSS has come a long way since then as well...but a lot of us got really used to just throwing in a media query...or five...or twenty in order to make things responsive, and we never quite broke that habit. But now, we have fantastic CSS features like grid, and flexbox,calc, clamp, and aspect-ratio! With all of these at our fingertips, it’s time to ditch the media queries. Today, we're going to start at the top and work our way down from big-picture display formatting all the way to the smallest units. And as for your old stylesheets...don’t worry. We can refactor them. We have the technology.

[Slide Change: The Big Picture: Grid and Flexbox]

Let's start with two of the most popular responsive display options, grid and flexbox.

[Slide Change: Comparing CSS Grid and Flexbox]

These have actually been around for a minute, with grid hitting full browser support in 2017 and flexbox in 2013, but a lot of folks still don't fully understand the difference between them – or when they should use one or the other (or both!). Many people assume a false equivalency between them that can create a misguided either/or approach – people feel like they need to choose between these two options, when in reality they not only have very different use cases, but also can (and should) be used together to compliment each other!

We could realistically spend a whole session doing a deep dive into these – especially grid, which is amazingly powerful. For our purposes, though, I want to focus on how they work at a high level and how you can use them to handle the layout of elements on your page in a way that allows for natural wrapping and responsive adjustment without the use of media queries.

[Slide Change: CSS Grid Example]