Piccalilli Issue #32
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.
The problem though, is that often, you end up with clickable
My gosh, this is a good article. Dive in and let my mate Sush teach you some serious grid skills!
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.
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.
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.
⚠️ Motion warning (when you scroll) ⚠️
This is the most clicked link of 2019 with nearly 2000 clicks 😱
Scott never disappoints with his tricks.
⚠️ 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.
This is very cheeky. A very nice effect indeed, by Mikael.
I really like these, by Aaron. Tidy and tastefully done, as always!
This is absolutely fantastic. I learned a tonne about how hex codes work. There’s a handy converter at the end, too.
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
- Progressive Enhancement
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!
That’s all, folks
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 🙂