Piccalilli Newsletter - Issue #25

Welcome

Sveiki! 👋

I can’t believe we’re already at issue #25. That means that this newsletter is nearly 6 months old 😱

As always, your support is super appreciated. Let’s dive into the CSS!

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

Create a semantic “breakout” button to make an entire element clickable

A common design pattern is to have something like a “card” element that has to be fully clickable. This is usually because it links to another page or triggers a JavaScript action.

The problem though, is that often, you end up with clickable <div> elements and other crimes, so I wrote this article to teach you how to achieve the desired effect, with semantic HTML, CSS and a bit of progressively enhanced JavaScript.

Fancy

Work Responsibly

⚠️Motion warning ⚠️

Some great content on this site and it’s just a generally lovely design which is very clean and well considered. There’s some lovely subtle touches there too.

Design Your Week RxJS

⚠️Motion warning ⚠️

You get a two-for-one from David with this one. You get to learn about state machines and experience some of his stunning animation and interaction work with CSS.

Mansi

⚠️Motion warning ⚠️

This site ticks sooo many of my boxes.

✅ Mono fonts
✅ Lots of space
✅ Nice layout
✅ Attention to detail

The little pastas that hang around are lush, too.

Animation

Pure CSS pixel art animation

⚠️Motion warning ⚠️

This is wild. It’s really clever by, Ben, who continuously makes rad stuff with CSS that blows our minds.

Lighthouse animation

⚠️Motion warning ⚠️

I love this, by Camila. The motion is butter smooth and the colour palette is superb. Lovely stuff.

Layout

Recreating my child’s pre-school scrapbook with CSS Grid

Piccalilli pro, Michelle here using her own compound grid generator to recreate her child’s pre-school scrapbook.

As a parent of very young children and CSS nerd, I approve of this wholeheartedly.

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 🙂