Codepen UI Library

Codepen is a really great tool and perfect for working out and storing code snippets and UI elements. I thought a good way to use this tool would be to create common web UI components into a library of pens. Each pen is meant to do one thing, that could then be picked up and integrated into a website.

At the time I felt I was too reliant on jQuery, and wanted to get more experience writing UI components and manipulating the DOM with modern, vanilla javascript. A work in progress, I will add more as I complete them.

01: Tabs
02: Modals
03: Animated Navigation Indicator
04: Scroll Progress Indicator
05: Shifting Form Labels
06: Custom Checkboxes and Radio Buttons
07: Stateful Buttons