Building a live & extendable Style Guide that has run the front-end experience for over 10 million people in the last year

An Introduction

bluprint is a fully-fledged internal CSS library I built whilst working at blubolt. Any new piece of front-end work that the company undertakes will now run with bluprint installed; enabling all developers across teams to build client work or platform updates with consistent design and code patterns.


From conception to design and build, bluprint was a project undertaken by myself from start to finish. It includes a core set of mixins, helpers, button/form patterns, common PHP includes, icon sprites and message styles. From the base version of bluprint (which is styled according to the blubolt brand guidelines) each client is extended to their needs with a group of variables and simple style overrides to make sure that bluprint matches a client's branding and design.


bluprint runs in the shared CSS folder - which compiles both our mobile and desktop solutions, along with fully responsive areas of our sites like our checkout. Everything is prefixed with .bluprint-css, which means legacy code and sites are never affected by new global styles such as form resets and touch area accommodations.


bluprint has had a lasting impact on the integration process at blubolt - Clients are using it to style custom pages on their sites, new front-end developers pick up our coding guidelines quicker and historically back-end focused developers are building interactions and applications quicker; knowing that their work will look good on whichever site they deploy to.