Piccalilli Newsletter - Issue #24

Welcome

Saluton! 👋

This newsletter has had a little holiday while I’ve been on a holiday myself. I also spoke at State of the Browser 2019, which was great. It was an incredibly inspiring event.

We're back with a bang this week with some absolutely stunning work. The theme is very much art direction, creativity, layout and modern CSS, so let’s just dive in.

If you’re enjoying reading this newsletter as much as I’m enjoying creating it, please share it with your pals. It’ll be really appreciated if you do.

Enjoy!

Featured Article

Keeping it simple with CSS that scales

I start new talks as super long articles, so I thought for a change, I would publish the article version of my brand new talk, “Keeping it simple with CSS that scales” after I delivered it for the first time.

It’s a hell of a long read, but hopefully, there’s some handy takeaways about how so-called “soft skills“ are as much a part of working with large CSS codebases as the technology choices.

You can also catch me delivering the talk at State of the Browser, here.

Fancy

May you live in interesting times

⚠️Motion warning ⚠️

I bloody love art directed articles. This one by Chris is not only stunning, visually, but also a very good written piece.

The look and feel is also right up my street, with the lo-fi imagery.

Smashing work.

Sorry not sorry

⚠️Motion warning ⚠️

This is bloody fantastic. The motion is outrageously smooth. I love how responsive it is to both mouse and touch, too.

Layout

CSS Grid: Magazine Layouts

I don’t know if you’ve noticed, but I have a bit of a thing for CSS layout and partly because of this, Olivia’s stunning work, makes my eyes smile a lot.

Who am I kidding? Olivia’s work always makes my eyes smile.

Houdini

Paintlets!

This is a bloody marvellous resource from my very good pal, Jeremy. He’s going to be doing a fantastic sounding talk about this stuff, too.

Houdini stuff is super cool and has a really bright future in CSS.

Fun

Animated verbs

⚠️ Motion Warning ⚠️

Friend of the newsletter, Ryan, here again, with more stunning work.

This is just fantastically creative and as always, impeccably delivered.

Talks

Inspired by CSS Grid

I really enjoyed Andy’s talk at State of the Browser, so I thought I’d share it on here.

He pushes the boundaries with modern web design by taking inspiration from legendary designers from bygone eras and this talk is packed with goodness. I’m also becoming a very big fan of Bea Feitler and will probably treat myself to her incredibly rare book.

Resources

Compound grid generator

This is absolutely fantastic from our pal, Michelle, who as I often say, is a huge hero of mine in CSS land.

Tools like these are great because layout is a visual thing, so a visual tool makes breaking out of the box a little easier. I’ll certainly be using this as I explore some compound grid layouts in the future.

Great stuff, Michelle!

Sponsors

Relearn CSS Layout

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.

We’ve got a special code for Piccalilli subscribers where you can get 20% off. Use the code PICCALILLI_PAL at the checkout to get everything for $80 instead of $100.

Thank you

That’s all, folks

If you have any comments, feedback or submissions, please get in touch via Twitter or Email.

If you have written a handy CSS utility, CSS trick or tutorial, you can submit a link over at https://submissions.piccalil.li ➡

You can also support this newsletter by sponsoring it.

Until the next issue, take it easy 🙂