Hello Reader,

Ethan Marcotte first coined the term Responsive Design in an article for A List Apart back in 2010.

Yup, it’s been 15 years.

As the name implies, Responsive Design involves writing CSS that allows the layout to respond to how a user is consuming the content, with “Fluid grids, flexible images, and media queries [being] the three technical ingredients for responsive web design.”

For a long time, media queries (@media) were a very big part of the idea of responsive design.

These days, I’d argue that they are less important, though still definitely one of the tools we use.

More recently, Jen Simmons coined the term Intrinsic Design, which she explained as the next stage where we let the browser do a lot of the work for us based on some limitations that we set on our layouts.

I strongly believe that intrinsic patterns should be our first line of attack, followed by bringing in media queries, or container queries where needed, and that really, all of that fits into the concepts of Responsive Design that Ethan coined all those years ago.

Luckily, we have more tools to help us with all of this now than we used to, when we had to do our best with floats and clears back in the day.

Sometimes that can lead to confusion as well, because there are different lines of attack that we can take to solve a given problem, but that’s better than the alternative that we lived with for so many years!

🙋‍♂️ What I’ve been up to this week

Form Styling Essentials

​

In this one, I explore styling forms, from making sure our elements inherit font properties, when to use CSS Grid over Flexbox for form layouts (plus one key flexbox use case), advanced selectors for targeting specific form elements, practical layout tips and tricks, the new accent-color property for native styling, and more.

Here’s the finished Codepen, if you just want to poke around at some code.

⚡ Quick tips of the week

• YouTube Short: Easily transition to and from display none​
• HTML & CSS Tip of the week: :first-child and :last-child​

🎙️ Podcast Flexbox is NOT easier than Grid A little bit of a rant from me this week, as I got frustrated writing some lessons and had to step outside for a bit 😆 ​ LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB​

​

🔗 Other awesome stuff around from the web

• ​CSS Minecraft (🤯)
• Andy Bell has three parts up in a new series up, as part of his Open Working Projects, where he does real world projects in the open, and sharing as much of the process as possible along the way.
• ​Good Internet Magazine​
• RSS Feeds for when features hit Baseline Newly Available and Baseline Widely Supported? Yes Please (Thanks, Patrick)!
• Firefox was the first browser to support Temporal! (If you’ve ever worked with dates, you’ll like the Temporal API).
• ​How to build a copy-to-clipboard HTML Web Component​
• The push for AI has been a promise that they’ll help us be more productive, and able to spend time on more valuable work. The promise that wasn’t kept.

🏁

Have a fantastic week!
Kevin

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
113 Cherry St #92768, Seattle, WA 98104-2205