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.
Create a semantic “breakout” button to make an entire element clickable
The problem though, is that often, you end up with clickable
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!
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.
Bind CSS keyframe animation to scroll
⚠️ Motion warning (when you scroll) ⚠️
This is the most clicked link of 2019 with nearly 2000 clicks 😱
Scott never disappoints with his tricks.
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.
This is very cheeky. A very nice effect indeed, by Mikael.
Button Hover Effects
I really like these, by Aaron. Tidy and tastefully done, as always!
Hex2RGB | An Animated Guide to Hex Codes
This is absolutely fantastic. I learned a tonne about how hex codes work. There’s a handy converter at the end, too.
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
- 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 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 🙂