FED-icons-01 FED-icons-02 FED-icons-03 FED-icons-04 FED-icons-05 FED-icons-06 FED-icons-07 FED-icons-08 FED-icons-09 FED-icons-10 FED-icons-11

I have found in discussions with clients that they are learning about front-end style guides and how they can help their company. I thought it may be helpful to explain what they are and how they assist in a project.

Front-end Style Guides
Reduce redundant code
Standardize code
Standardize the visual language/visual system for a project, brand or across applications
Create a visual and technical touchstone that many stakeholders (designers, developers, ux, marketing, testing,and even sales) can use
Front-end Style Guides

Style Guides

There are different types of style guides that are in the same family. Brand style guides, code style guides and front-end style guides all seek to standardize and create consistency but in slightly different scenarios.

Brand Style Guide

Its purpose is to standardize the visual language around the way that the brand is used. Things like color, font, and even spacing around the logo are defined and standardized so that all working with a brand can use the same design element to visually communicate the brand. Here is Starbucks' Branding Guidelines

Code Style Guide

The purpose here is to set conventions around the style for coding a project so that the code is consistent and easier to follow. An example of a code style guide is Google’s AngularJS Style Guide

Front-end Style Guide

Front-end style guides are in the same guidelines family as brand style guides and style guides for coding practices. Anna Debenham in her book A Pocket Guide to Front-end Style Guides defines them as:

“Front-end style guides come in many shapes and forms, but they all share a common purpose: to make maintaining a site easier. They are built specifically for the web. The main difference between a regular style guide (like one produced for print) and a front-end style guide is that a front-end style guide uses real code and works in the browser. It’s not a PDF or a series of screenshots – it’s a page of HTML that demonstrates a site’s main styles, how and when they can be used, and where the markup for a module matches the markup used on the actual site.”

Here are a few examples of Front-end style guides

Why Front-end Style Guide?

Web Applications and websites are really just remixes of the same components such as images, buttons, headers, navigations, links. Throughout development lifecycle, many irregularities in the implementation of the styling and behavior of buttons, headers, etc. can occur without standardization in place. In the beginning of a site redesign, an interface inventory can help identify components, inconsistencies and inform decisions when creating a more cohesive design system. Front-end style guides are an asset that provide a place where all of the visual components that exist in an application can reside together in one living document. I say living document because it is code that makes the style guide not a photoshop document. Because the code is part of what creates this deliverable, designers also get the great benefit of seeing how all the actual components look and feel in the browser (as opposed to photoshop). Front-end style guides explicitly standardize and guide the visual language used to create the UI/UX in a web app (this is even more important for a solution that consists of multiple applications).

Front-end Style Guide Benefits

Many different stakeholders can benefit from a front-end style guide. Sales can demo themes, marketing can see branding in applications, devs can refer to for CSS and general styling of components. If the front-end style guide is running off of the live css, they can even be helpful for lightweight dev testing. Without a style guide that says to all developers this is how a small button should work, each developer over a X number of years may make their own button that may or may not look like the other buttons in the app or may not appropriately reflect a visual hierarchy (like playing telephone). These small design deviations compound to create an inconsistent experience for the user. When developing on a large code base or even on smaller ones, standardizing the visual elements that the user consistently interacts with will strengthen branding and UX of a web app. It will also make designing, maintenance and development of the front-end easier for developers and designers alike.

Favorite Front-end Style Guide Resources


Front Edge

Lead UI Developer