Style Guide – New Design Phase 4

In a multi-device world, it makes sense to start building sites in a more modular fashion. Instead of building a site from the top down, Header -> Body -> Sidebar -> Footer, we should be developing systems of stand alone modules that can then be combined into templates. You start with the most basic element and build up from there. For more information on this mentality, read Brad Frost’s post on Atomic Design. Dave Olsen, working with Brad Frost, have also put together a system to help you get started called Pattern Lab if you need more guidance.

Atomic Design Hierarchy

image by Brad Frost

The most basic example of this is the style guide. The style guide will server two purposes. It allows the developer to focus on the individual elements that make up a typical page as opposed to the template they live within, and it provides any future developer with a quick and easy guide to see how the various elements should be configured. That means that you maintain consistency when developing new templates.

The Style Guide can also act as a playground moving forward. A new feature or element should be developed in the style guide first. Once tested and working there, it can then be pulled into any site template needed.

KyleBreckenridge.com Style Guide

For this site in particular, I decided not to use a full system like pattern lab. The project will be smaller in scope and only have a few templates that will be mostly typographic in nature. With that in mind, I created a custom style guide with the elements I anticipated being used in this project. It will grow and evolve with the site itself as more and more elements get added.

Without further adieu, here is the style guide.