Skip to content

Issue 320

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

Rachel Andrew
2 min read

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

The W3C Design System is live

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.

Inclusive Design 24

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


Learn

Grainy Gradients

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.

Typography for Data

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.

Styling CSS checkbox states

A rundown of different ways to style checkboxes.

Developer Decisions for Building Flexible Components

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

The Story Behind TryShape, a Showcase for the CSS clip-path property

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.

Explore the intersection of accessibility, usability, and inclusion

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

See the agenda and register now.

Newsletter