Piccalilli Newsletter - Issue #1

Welcome

Welcome to the first issue of Piccalilli 🎉

Thanks so much for subscribing to this little newsletter of mine. Hopefully it’ll turn into a nice little archive of cool-as-heck CSS stuff.

This issue is focused on fancy stuff, with some creative sites and stunning illustrations and animations. This issue’s utility and article from me can hopefully help you to size your type more responsively, too.

Enjoy the issue!

CSS Utility

Custom Property controlled fluid type sizing

For every issue I’m going to share a CSS pattern, trick or utility that I use day-to-day in my work as a freelance web designer. I love teaching folks and this seems a good outlet to share some of the CSS skills that help me succeed in the industry.

For this issue, we have a fluid type utility that lets you create a fluid scale with vanilla CSS, while maintaining some control with minimum and maximum font-size locks that are powered by CSS Custom Properties.

Fancy

Alzheimers New Zealand Site

⚠️ Motion warning ⚠️

This is a lovely site that informs you about Alzheimers with an interactive quiz. Subtle motion and smooth transitions make it a very pleasurable experience.

BADASS Films

⚠️ Motion warning ⚠️

A beautiful site with a creative scrolling text effect and some fancy custom cursors. There’s also some really cool blend-mode magic with the loader, too.

Sean Geraghty's Portfolio

I absolutely love this site. Super clean, with lush type and a tidy layout.

Great work, Sean!

Illustration

Pure CSS Single Div Up House!

⚠️ Motion warning ⚠️

This is a marvellous single div illustration. I love this sort of thing.

I strongly recommend that you also check out https://a.singlediv.com.

Animation

Pure CSS Spinning Clock

⚠️ Motion warning ⚠️

This is very cool and very elegantly done.

@keyframers 2.0.0 Intro Animation

⚠️ Motion warning ⚠️

The Keyframers are dope and so is their new intro animation.

There’s some JavaScript on the go, but a very heavy dollop of CSS animations, too.

Houdini

CSS Masonry with Houdini

⚙️ Enable in Chrome Canary with “Experimental Web Platform features” in chrome://flags

I absolutely had to get this one in the first issue. I’m not quite sure what to make of Houdini yet, but this sort of thing excites me a lot.

So much expensive JavaScript is used to achieve layouts like this and/or CSS multi-col is hacked about, so having a Layout API worklet is super handy—albeit not widely supported, yet.

Articles

Under-Engineered Toggles

A great article by Adrian Roselli on how to make accessible toggles with pure CSS (with a tiny bit of JS).

He covers everything from reduced motion to high contrast mode. It's well worth a read!

Thank you

That’s all, folks

Thanks again to everyone who subscribed early to this newsletter. Your support is hugely appreciated and I’m really looking forward to seeing how this project evolves over time.

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

Until the next issue, take it easy 🙂