Pattern Library and Style Guide

One of my primary tasks at was to create and maintain a new living style guide.

I created it from scratch using a combination of technologies including AngularJS, Gulp and Sass. There are no frameworks used to build this system or site.

Each design pattern and component is separated into its own file which can easily be included into other patterns and components to build prototypes or larger designs. The entire site is a static HTML app that is built using AngularJS and Gulp. Using Sass I was able to set up a system of variables to standardize units for media query breakpoints, color hex codes, spacing values and more.

Each individual pattern is built mobile-first and is also presented that way. There is a toggle menu that allows the user to view the pattern at mobile, tablet and desktop breakpoints. A tab also reveals the CSS used to build the pattern, and an isolate view allows for a clean and focused look at the pattern itself.