For this site I wanted my categories to be color coded, but I didn’t want to put a lot of effort into managing it. Instead I spent a little effort into making sure I didn’t have to manage it.
Where I want a category to be color coded, I used the class of ‘label.’ While not semantic, it could allow for flexibility in the future. I’m also a Bootstrap fan, so it was a go-to move. This class is intended to be used on inline elements such as spans or anchor tags.
I set a default background as a starting point and just in case something fails.
Next I created a Sass list to define each category.
For each category I created its own supplemental class. Each class incrementally changes the background-color of the original color
$blue. Based on how many categories I have I chose 35 to be my increment. This may need to be adjusted if you have more or less items and depending on how close of a color spectrum you want.
A miraculous rainbow of categories.
label edibles adventures code playlists freelance
Things to consider
I can easily add categories, woo!
…but if I end up with more than 9 categories (hopefully not), then my color spectrum is going to get a bit cozy.
Did you enjoy this post? Support Soul Fire Farm. Soul Fire Farm is committed to ending racism and injustice in the food system.