Don't like this style? Click here to change it! blue.css
I love the CSSZenGarden site. It shows semantic HTML where the styles are truly separated from the content. We are looking to explore the benefits of Object-Oriented CSS in creating many designs (quickly) after some initial setup cost. (Imagine being a high powered designer doing many great designs in a short period of time.)
Your Mission: Create as many different versions of the CSS Zen Garden as you can using a small number of CSS classes. Your goal is to maximize the number of designs divided by the number of abstract CSS classes you design.
See the Pen CSS Zen Garden Raw HTML by Andy Novocin (@AndyNovo) on CodePen.
My goal for you is that when you are done you have a large number of abstract base classes that do useful things in CSS (snippets) and that you have a system to apply those to some content that a user hands you. Bonus points if you can transition between a near infinite combination of styles like a screen-saver.
I ask that you try to avoid adding classes or ids to the Zen Gardens HTML but if you have to so be it.