Piccalilli Newsletter - Issue #27

Welcome

Ciao! 👋

Today I start my travels to Moscow to open day two of Front End Conf.

I’ll also be having a week off from this newsletter next week, as it’s a very busy week.

Let’s dive right 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!

The “P” in Progressive Enhancement stands for “Pragmatism”

I dive into how you can use CSS Custom Properties with a progressive mindset and I also poke fun at “What About IE11?” guys.

Featured Article

Dynamic CSS Components Without JavaScript

The concept of ‘props’ is fundamental to UI components. CSS custom properties make styled components reactive without JavaScript.

A handy article on Every Layout by Heydon.

Fancy

Pokemon Friends

⚠️ Motion warning ⚠️

This is such a delightful piece by Tee. They did a great making of video, too!

Manifesto - Agency Site

⚠️ Motion warning ⚠️

Those who have subscribed for a while know that I hate scroll-jacking, but this site does it quite well, so I’ll let it off.

There’s lots of neat tricks and nice design on here to give you a bit of inspiration.

Art

Isometric Cactus in CSS

This is very tidy indeed, by Eva Lettner. Super smart, super light and super clean.

Fun

Button Hover Effects

I really like these, by Aaron. Tidy and tastefully done, as always!

Resources

Offset Path Anchor

⚠️ Motion warning ⚠️

This is really cool, by Dan. I find offset-path etc really fascinating, but tough to get my head around, so demos like this are really helpful.

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 🙂