At the completion of each pen, I would close like... 25 Chrome tabs 😄
They are usually StackOverflow tabs for very specific questions, but I know that there are a few sites which I always refer to.
Since February, I started taking note of the guides and cheatsheets I frequently use (I needed a few months because I don't always use all the of 'em at once and I want to collect as many as possible).
Let's start!
CSS Grid
As you know from my previous post, I rely on two solid guides for CSS Grid.
I actually don't use this guide anymore as I can kinda remember all the basic properties by now. But if you're looking to start with CSS Grid and you learn better visually, I would totally recommend this.
This is the guide I rely on now, particularly for the thorough explanation of grid-template-areas and examples of grid shorthands.
This is actually a new generator which was released by Sarah Drasner a few days ago. I played with it for a bit and found it quite useful if you want to quickly envision how your grid layout will look (tho, with limitations - e.g. you can't remove a div if you want to).
You can even copy the code, although I advise against it if you're trying to learn, it's better to painstakingly type it all out, trust me.
Cubic-bezier/easing functions for animations
When I am not in the mood for ease or ease-in-out (which amounts up to 2 out of 10 times), this is my go-to site to get me some cubic-bezier functions. Good visual examples and the first site that got me to understand what cubic-bezier actually is back then.
Turns out, I don't really need to read the math stuff (graphs just don't turn me on, sorry); I just needed to see how the easings worked, pick whichever I needed, and copy-paste the code.
Fun fact: I use the same easing function 95% of the time, which is easeOutBack 😂
If you want to make your own cubic-beziers. Move the pink and blue dots on the graph and preview the easing on the right (the pink box, not the blue one). I rarely use this (easings.net has been enough) but this has been used once or twice!
Colors!
My biggest weakness when it comes to designing. Also my favorite because I'm a masochist.
If it's a colored background, it's gonna be a gradient, amirite? Because everyone in Dribbble is doing it 🤷♀️
There recently was a pen called "5-way Gradient Generator" which blew my mind. This is what you should use when you want to be totally extra with your gradients.
A very popular tool. I use this to help me pick a set of colors that I almost always not use in the end. Why? Because I have to choose my own colors, and I usually end up hating my palette even though I spent 30 minutes trying to perfect it.
But, I use it a lot to get different shades of a color... and the names.
For when I'm really lazy or frustrated. I just randomly pick a color here.
I recently attended a conference where Steve Schoger, the author of Refactoring UI, spoke about choosing color palettes. The direct quote was "I can show you how I pick my colors, it's really easy - I just copy them."
Usually I get colors from Dribbble, but recently, I've been "branching out" and started looking at other sites.
This is my most-used resource so far!
Box Shadows, Borders, or Both
I try to remember a lot of CSS properties and values that I use often, but this is one which I don't remember any values at all.
If I ever need a 'one-side only' box shadow, I will have to Google it.
CSS Tricks: Box Shadow for box shadows. And cool hacks for multiple borders here.
Text Things
Text shadows! Anything fancier than my default text-shadow: 0 1px 2px rgba(0,0,0,0.15) (👈 I remember this by heart), I refer to this guide.
Used very rarely but super fun to play around.
Shapes
I've been referring to this article for years now 😂 I always go back for the triangle shape for my tooltips lol. But the other shapes are useful too!
Other weird shapes, background-gradient amazingness and hacks
A genius at work! All of the projects here are done with just a single div, which means there's a lot of background gradient and box-shadow craziness going on. I've started to really cut down on my div usage, so I will refer to her work and try to reverse-engineer it.
I certainly have learned a lot by just looking at her code.
... aannndddd, there's also plenty of times when I don't really know what she's doing anyway even after staring at the code for 2 minutes because my brain does not comprehend 😂😭
nth-childishness
I can almost remember the simple ones by now, but it's always good to check!
This one is amazing to use if you need to test a large number of divs. One of my pens had >50 divs and it was so easy to check with this tool.
If you notice, most of my pens are very simple and straightforward, so the guides or tools are also very simple and straightforward. Or maybe it's just because I'm terrible at remembering the simple things 😂
Anyway, that's it! There are more for sure, but they aren't used enough for me include them here.
Tell me your favorite guide, cheatsheet or tool!