Piccalilli Newsletter - Issue #32

Welcome

Happy New Year!

This issue is a ✨very special issue ✨because it contains the top, most clicked links of 2019. Consider it a little year in review of our own.

2019 was a great year for this newsletter with a whopping 31 issues going out, so with each having an average of 10 links, that’s a lot of good stuff.

Sit back, enjoy the links and have a fantastic 2020.

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.

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!

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.

Create a responsive grid layout with no media queries, using CSS Grid

Embracing the flexible nature of the web gives us powerful, resilient front-ends—where instead of using specific sizes, we give elements sensible boundaries and let them auto-fill where possible. I embrace this mentality as much as possible and roll utilities out like this one for grid layouts.

Two simple methods to vertically and horizontally center content with CSS

Centering used to be hard with CSS, but these days, it’s easy! I show you how to build a little utility class that auto centers descendants horizontally and vertically.

CSS Trick

Bind CSS keyframe animation to scroll

⚠️ Motion warning (when you scroll) ⚠️

This is the most clicked link of 2019 with nearly 2000 clicks 😱

Every time I look at this, it blows my goddamn mind. So many creative ideas are now swimming around that I’d usually discard in fear of clogging up a user’s browser with clunky JavaScript.

Scott never disappoints with his tricks.

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.

Wobbly underline

This is very cheeky. A very nice effect indeed, by Mikael.

Fun

Button Hover Effects

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

Resources

Hex2RGB | An Animated Guide to Hex Codes

⚠️Motion warning⚠️

This is absolutely fantastic. I learned a tonne about how hex codes work. There’s a handy converter at the end, too.

Sponsors

This week’s sponsor is Front-End Challenges Club

Front-End Challenges club is a project where a challenge is set every two weeks. The following week, a solution to the challenge is published to help you learn and master front-end development best practices.

The aim of the game with this project is for you to learn best practices in:

  • Semantic HTML
  • CSS
  • JavaScript
  • Progressive Enhancement
  • Accessibility
  • Inclusivity

It’s also been completely redesigned from the ground up!

Membership for full access to all content costs either $10 per month or $95 for a year with benefits such as access to AMA sessions and other bonus content, so go ahead and sign up!

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 🙂