Breakpoint-free grids, getting involved in the spec, and more


View this email in your browser (or share it with a friend!)

Hello Reader,

My newsletter has evolved over the last few years to have a few distinct sections it and it got me thinking… what is it that keeps people signed up for my newsletter?

Luckily, I have a way to find out!

So, what part of this newsletter gets you opening them each week?

I'll share the final results next week.

If you did pick the first part where I ramble about stuff, sorry to leave you disappointed this week as we head off into the next section.

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

Breakpoint-Free CSS Grid Layouts

video preview

A look at Grid’s auto-fit and auto-fill, including how they are different, and the types of situations where you might want to use one over the other.

You can find a simplified version of the demo here, if you’d like to play around with them a bit.

🔌Shamepless Plug

In the video above, the project I'm using for the demo is part of a full website build that is the focus of my course on Frontend Masters.

The course looks at building out the entire page, including a few fun animations and view transitions (like you can see in the video above), but also tackles the more practical side of things, breaking down a project based on a Figma file, and how I approach building it from scratch.

Redesigning a page, live

video preview

HTML & CSS Tip of the Week was very quickly thrown together, and I wanted to improve the home page, so I did it as a live stream this past Friday.

If you visit now, the changes are live, but it still needs some work. I'm not sure on the date yet, but I'll continue all work on this site via live streams.

In the stream, I start by creating a two column layout for the homepage to make the articles easier to get to, as I figured it would be a better user-experience.

Then the chat suggested some updates to the navigation, so I looked at using a scroll-driven animation to slide the nav back in once a user had scrolled down a bit, and added a frosted glass effect to it with the help of an article by Josh Comeau that looks at how to make the frosted effect more realistic.

⚡ Quick hits

🎙️ Podcast: Getting more involved with CSS with Miriam Suzanne

This week I was joined by Mirian Suzanne for a super fun conversation that started off with talking about getting more involved in the CSS specification.

We got into the future of Sass, the future of CSS, and why we prefer "S" over "L" and "D".

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB

🔗 Other awesome stuff around from the web

Some mostly CSS-related links that I enjoyed or thought were interested, that I came across in the past week:

🏁

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

Hi! I'm Kevin

Weekly newsletter, where I talk about tangentially-related front-end development topics and share what I've been up to in the last week, plus any cool/fun/interesting/useful links I come across as well.

Read more from Hi! I'm Kevin

View this email in your browser (or share it with a friend!) Hello Reader, Last week, I talked about how CSS is like a strange puzzle. Like a regular puzzle, when we write CSS, we need to figure out how to fit all the pieces together properly. But it’s made more complicated because each piece can change it’s size and position. Despite that, we still need everything to fit together. There are so many variables at play at any given time that it sometimes feels like we’re just hoping for the...

View this email in your browser (or share it with a friend!) Hello Reader, A few weeks ago, my dad and my 10-year-old son were working on a puzzle together. My dad mentioned that it was a pretty hard puzzle for a kid, and he was impressed with my son's patience with it (he isn’t always the most patient type 😆). The reason I bring this up at all is because one of the reasons that I often tell people I like CSS is because it’s like a puzzle. Just like with a real puzzle, where you do have a...

Flexbox Simplified

View this email in your browser (or share it with a friend!) Hello Reader, Another shorter email than usual this week. We’ll be back to the regular ones starting next week 🙂. 🙋♂️ What I’ve been up to this week Create a fun, quick text flip effect Not sure about the name and thumbnail that I made for this one, as the text doesn’t flip, so much as, slide in and out. I don’t know what else to call this effect, or how to make a good thumbnail to illustrate what's going on, so this is it 😆. I took...