Management

Human Resources

Business Development

Communication & Support

Website Style Guide

Romany Raafat | 27-04-2014

What is a Style Guide?

Imagine if you are working on a large and long-term implementation of an application with many different resources like designers and front-end web developers who come and go, each appending a new portion to the CSS to have the task accomplished. One by one, the CSS goes huge, redundant, inconsistent, non reusable and it takes a lot of effort for maintenance. It will be painful to any new incoming developer to work on applications like that and sometimes there will be a resistance accepting tasks in this type of applications.

“A website style guide is an ideal way to ensure brand identity, professionalism and consistency across your site.”

A style guide (some people call it a pattern library) is a living document of code, which details all the various elements and coded modules of your site or application.

Why to use it?

Style guide (pattern library) will save so much time in long term implementation process. It provides a centralized repository for both design and code.

For stakeholders, it makes the designers, developers and the client capable of easily envisioning new website sections and making use of the available components.

What’s next?

Looking for style guide generators? Here is a bunch of them at Github. There might be one for your preferred technology (PHP, Ruby, NodeJS, etc...).