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.
I give a sample/starter codepen below which uses javascript to switch between two "designs" that both use my abstract CSS classes.
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.