Piccalilli Newsletter - Issue #30

Welcome

👋!مرحبا

Holy moly, we’re at #30 already. You’ll notice there’s been a bit of a gap between issues. That’s because I’m doing them every 3 or so weeks, as I’ve got a few side projects to maintain (understatement of the year).

In this issue, there’s loads of fun stuff, so let’s kick back and enjoy it!

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

Creating complex layouts using CSS Grid

My gosh, this is a good article. Dive in and let my mate Sush teach you some serious grid skills!

Fancy

dConstruct Site

  1. I really want to go to this
  2. This site is stunning
  3. Cassie and the rest of Clearleft are bloody talented!

Lynn Fisher - Personal Site

Here is Lynn blowing our goddamn minds again. I yearn to be as creative and importantly, deliver work at even half of the quality of Lynn.

She really is a hero of mine.

CodePen Home Multi-line spanning animated underline

Cassie here again with a super cool trick (she is on fire at the moment). The code is so marvellously elegant, too.

Fun

Paw Clap Button

I love this by friend of the newsletter, Aaron. The design and animation are stunning.

Click the button!

This is hilarious and it's also using proper elements, too. (extremely side-eying you goddamn React bros).

Awesome work by Bård.

Dino

Camila is cool as heck and so is this Dinosaur. It’s pure CSS too!

CodePen Home Orange Blueberry Checkbox

This is really tidy, by Ryan. I love the snappy nature of the transitions.

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 🙂