15 SEP 2021

Issue 320

CSS mix-blend-mode and clip-path, the W3C design system, flexible components, and my job news!



I'll start this week with some personal news, which, if you follow me on Twitter, you may already know. After 20 years of self-employment (aka refusing to have a proper job), I've accepted a new role at Google. I'll be working on web.dev, and I am really excited about all the great content I can help folk create for the web development community as part of a bigger team.

This newsletter will continue, however! At 320 weekly issues, it would be a terrible shame to break the chain now, so while there is layout news to share, I'll keep posting it.


News

You can find it at design-system.w3.org, as explained in the intro the system has been heavily influenced by Andy Bell's CUBE CSS and Every Layout also from Andy with Heydon Pickering.

The free, 24-hour, online event celebrating inclusive design is back on 23rd September.


Learn

Here is a nice CSS tutorial demonstrating how to add noise to a gradient using properties such as mix-blend-mode along with SVG, and filters.

A good look at how to use typography to help in making data-heavy operational product designs look great, and be easy to read and understand.

A rundown of different ways to style checkboxes.

A piece about the things to consider when developing components from Michelle Barker.

This post details the creation of TryShape — an app that helps you create shapes using CSS clip-path and then share them.


Our sponsor

Promo for Fall Summit with speakers as listed in the following copy.

Inclusion and diversity are two of the most important themes in today’s world. As UX and front-end experts, it’s our responsibility to actively explore how our work impacts all users, not just an idealized average.

An Event Apart Online Together: Fall Summit 2021 features essential sessions from Derek Featherstone, Regine Gilbert, Melanie Richards, Sara Soueidan, and David Dylan Thomas to help you get started. Join us online October 11–13.

CSS Layout subscribers can save $100 off any multi-day pass with promo code: AEACSSL21

Enjoyed this article?

Join our free newsletter and never miss an update.


Related Articles