Style Guide


Style Guide: A Living Document

For those of you who don't know what a Style Guide is - it's quite simple really. A Style Guide is a set of standards to ensure a consistent design and identity. Additionally, from a development point of view it serves to improve the speed and ease of code deployment. A good Style Guide will consolidate the front-end code while comprehensively documenting the visual language, such as color palettes and fonts.

A "Living" Style Guide does all of the above, but uses real code from the app itself to reflects any changes as they are made throughout the app.


The goals for us in creating this type of Living Style Guide are simple:

  1. Streamline the workflow for designers and developers
  2. Maintain a consistency of app styles and identity
  3. Create a focal point for our Design and User Experience work, both for ourselves and for the community
  4. Create a reference point for content managers to maintain style consistency throughout their content

Built on Foundation 6.0.4 with SCSS

A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.

Once you've exhausted the fun in this document, you should check out:


Foundation Documentation
Everything you need to know about using the framework.

Foundation Code Skills
These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.

Foundation Forum
Join the Foundation community to ask a question or show off your knowlege.


View Site Management Documentation