profile

Hi! I'm Kevin

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

Published 3 months ago • 2 min read

​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, One big problem with features like Grid and Flexbox (and maybe soon Masonry) is that we can move elements around. This might sound like a feature, but in reality, it can cause many issues because even something as simple as flex-direction: row reverse can muck with tab order. There are times where it can potentially be a good idea to re-order things with CSS (say, when you want an image above a title of a card, but in...

2 days ago • 3 min read
CSS Hell

View this email in your browser (or share it with a friend!) Very quickly, before we get into the topics of this week's newsletter, the State of Devs survey is going to be closing shortly. The survey is for devs, but asks about who we are, rather than what we know. As with all the "State of..." surveys, the more people who take it, the more representative the results are, so if you have a few minutes, it'd be great if you could take the time to take it. Hello Reader, So, Figma had a big event...

9 days ago • 6 min read

View this email in your browser (or share it with a friend!) Hello Reader, Have you ever found yourself staring at some CSS that you were sure should work, but it wasn’t doing what you wanted? If so, welcome to the club 😂. These days, for me, it’s less about not understanding a specific behavior and more about making dumb mistakes, but there are times when it still catches me off guard as well. At this stage, most of the time I can reason my way out of the problem I’m facing, but with years...

16 days ago • 4 min read