In this blog post I’d like to give an introduction to style guides, also called “Pattern libraries”, explain some pros/cons and share some resources with examples. Depending on your project, it could be useful to implement. Personally I’ve only implemented it in larger projects where many smaller modules/elements were being (re)used.
So what’s a style guide? It’s basically just a living “document” that shows details of elements and coded modules of an application. It keeps the identity of a brand alive while implementing/maintaining an application.
Basics of setting a style guide up
First you can start to define the basic elements such as:
- Colour palette
- Grid layout system
- Body text
Once that’s been set up, start adding patterns, such as:
- Form elements:
- Input fields
- Select elements
- Styling voor hyperlinks
- Media items:
Pros & cons
If you work on a larger application, it can/will standardise your HTML and styling. Since everything is being build in smaller modules, it will help you to build new sections and/or pages faster while the consistency remains. Because of this, it makes it easier for (new) team members to adapt and it reduces documentation.
When you’re building on a smaller application, it will consume more time to use a coded style guide. So in my own opinion, that’s not as time efficient.
Below a few websites that show their style guides. It might give you some ideas for your own, or you could follow their way of working.
- Pattern Lab
- GitHub Primer
- Firefox design
- Lightning Design System
- WordPress coding standards
So far, I prefer working with Pattern Lab, which is Atomic Design, but obviously it’s depending on your own preference.
You don’t have to set up the entire style guide before you start building your application. I advise to start with the basics and to just add more along the way. After all, it is called a “living document”!
Hope it helps, thanks for reading!