Piccalilli Newsletter - Issue #8

Welcome

Ahoy, there 🏴‍☠️

We’ve got ourselves a bumper issue this week that features side-scrolling, forests, spinners, grids and fancy perspective work.

This little newsletter is also in the process of a redesign and re-platforming. I’m keeping a journal of the whole process which you can subscribe to.

Exciting times ahead for this project 🙂

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.

Featured Article

Solving a Tricky Layout Problem with CSS Grid

This week I’m on holiday, so instead of writing an article, I’m going to share an article with you all that I think is really good.

Complex layouts with CSS Grid can expose all sorts of weird behaviour and Michelle explains how she overcame some issues really well. A great article for if you’re learning CSS Grid.

Fancy

Jorik - Fashion Site

⚠️ Motion Warning ⚠️

The fashion industry has always been good at making the most of the tools that we have available to produce a creative experience. This site demonstrates that really well.

I’m particularly fond of the perspective work on the homepage and in the look book. I spent some of my early career on the web working on look books, so this a nice nostalgia dose for me.

The only thing that lets this site down is the goddamn scroll-jacking. I hope that trend goes away, pronto.

Tyler Gaw - Personal Site

This site got submitted to personalsit.es and I immediately chucked a link to it here. It’s bloody amazing.

The illustration is out of this world and the overall look and feel is stunning. I’m adding it straight to the inspiration pile for the redesign of my site, later in the year.

Presentation "Slides"

⚠️ Motion Warning ⚠️

I love this by Olivia. Butter smooth animations/transitions and the sideways scrolling works really well.

Tornis

This is absolutely mind blowing. Robb is a super talented lad and just like the CSS animation bound to scrolling from Issue 5, this has all sorts of clever scrolling action on the go.

The forest image demo is super lush and outrageously smooth.

Animation

Bezier Animation

⚠️ Motion Warning ⚠️

I made a little loading animation / spinner for funsies that uses a bezier curve to give it a bit of a “hang”. It’s also got some aria roles on there and visually hidden text, along with a reduced-motion media query.

Layout

Rotating Grid

⚠️ Motion Warning ⚠️

Mandy is super talented and it’s criminal that we’ve got all the way to issue #8 before featuring her work.

I love this experiment by her. There’s some very smart layout work and animation work. Check out her other layout experiments, too. There’s loads of stunning work in there.

Bauhaus at 100

⚠️ Motion Warning ⚠️

I honestly had to keep reminding myself that I wasn’t browsing a print PDF while looking at this site. The baseline grid and agonisingly good vertical rhythm is right up my street.

Cassie Evans

Cassie is bloody brilliant at CSS and SVG—especially animation stuff. She’s one of my favourite people on the web and is one of our greatest talents.

From working with her on a project recently, I can also confirm that she’s a very nice person indeed.

Check out her CodePen Profile (motion warning). There’s some ridiculously good work in there.

Resources

CSS Reference

This is a fabulous resource that I use quite a lot, along with the CSS-Tricks Almanac. It’s well worth a bookmark.

Sponsor

This issue’s sponsor: my Patreon

This issue is sponsored by my Patreon. If you want to sponsor this newsletter, go ahead and back the position: sticky tier.

I want to spend more time working on stuff that benefits the web community, but I also need to feed my family, so I've created a Patreon!

I’d really appreciate your support so I can help folks learn the web platform. The Patreon will hopefully reduce the amount of time I work on client projects and increase the amount of time I can spend working on projects like this one.

Any support will be appreciated and you can select as little as $1 per month!

Thank you

That’s all, folks

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

Until the next issue, take it easy 🙂