Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

I tossed together a page of the Design Patterns we use here on CodePen. It uses 100% production CSS and JavaScript that the rest of the site uses, making it kind of “The Exhaust” as I talk about here, for now. I created the page for a few reasons.

Primarily it exists because we’re working with Sparkbox on a redesign and it’s a way for us to communicate with them the different styles that exist on the site currently. Another reason I created this is to prove to myself that I was working this way at all. I assumed I worked in reusable patterns, but this page was my way to prove it to myself.

Anyway, here they are.