News
Now available on Bluesky!
Recently I (finally) moved the Friday Front-End and CSS Basics accounts from Twitter to Bluesky (we also added Mastodon about a year ago). Of course, that means they lost all their followers. If you're on Bluesky, it'd mean a lot if you could give them a follow!
Links
How unit division works in CSS, and how to use it today
Unit division in CSS has been at the top of my CSS wishlist for years. Unit division allows us to compare and manipulate any type of unit with any other type of unit for the first time. This is huge. To my surprise and delight, Safari launched unit division in CSS this week.
Help us choose the final syntax for Masonry in CSS
The syntactical decision depends on how we conceive of this feature and its future. Is this an extension of CSS Grid, leveraging existing Grid properties? Or should it be treated as something completely different, with its own set of new properties and new default values? You’ll be able to code the same layouts either way. The functionality will be the same.
You can use text-wrap: balance; on icons
But the name is, I think, slightly misleading. It doesn't only work on text. It will work on any content. For example - I have a row of icons at the bottom of this page. If the viewport is too narrow, a single icon might drop to the next line. That can look a bit weird.
Come To The Light-dark() Side
You’d be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. It is, but I’m here to tell you it’s now a lot simpler with modern CSS!
So, your CMS blew up. Any decent WordPress alternatives out there?
If your favorite content management system feels like it’s sinking into a shallow well of hubris, you might want alternatives. I have a few ideas.
Videos
How to make full bleed wrappers with CSS grid
When you're building a website UI, knowing how to use a wrapper or container is one of the most essential building blocks. In this video we're going to be taking a deep dive into how you can build full bleed wrappers without having to have a bunch of nested divs.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.