Styleguides, a.k.a. Pattern Libraries, UI Toolkits, Design Systems. They go by many names, but their purpose is the same: to serve as the definitive resource for visual style and front-end coding (HTML/CSS) conventions for a website or app.

Styleguides as we know them on the web initially appeared as the electronic version of a company’s branding guide. In fact, many of them initially were just that, and the information contained within related to point-based font sizes and Pantone colors and were often one of the only pieces of documentation handed off to a design and development team. At that point, the designer would comp up the screens and hand it to the development team to build. Maybe they would have updated the branding guide with pixel-based font sizes and hex-based color codes, and added in their comps with pixel dimensions of the regions on the page and the spacing in between.

However, more typical after the design phase was complete, was to move on to the next project. Sometimes, the front-end developer was asked – at the end of the project, after launch – to create or update the branding guide with the specs of what they had just built as a guide for the site’s maintainers.

This approach could result in a very piecemeal or inaccurate document. Maybe the developer had to eyedropper a text color and it’s slightly different on different pages on the site – which one is correct? Is there an example of every single template or design element?

Enter Pattern Libraries

After building too many styleguides in this haphazard way, and also beginning to have to deal with the need for responsive layouts, designers and front-end developers started devising methods to manage these issues, first from a conceptual point of view, and then building out frameworks that were built using the concepts. A prime example of this is Brad Frost’s Atomic Design principles that he and Dave Olsen put into practice with Patternlab.

The idea behind these pattern libraries is to create a modular design system – starting from the very smallest elements, such as a paragraph or a text input, and then putting the smaller elements together in order to build compound elements, larger blocks and structures, all the way up to page templates. Not only does this serve as a visual record of these elements, the HTML and CSS is available, too, so that developers can go in and grab the code blocks in order to build out the site or make updates.

The idea behind these pattern libraries is to create a modular design system.

This all sounds like a solid approach with a valuable resource, so this is a staple of every design and development project, right? Not exactly. Creating and maintaining a pattern library can take time and since it isn’t part of the public-facing product, it can seem like a “nice to have” and not an essential piece. Much like the discipline of UX itself was once considered “frosting” but is now an integral (or even primary) part of design and development, pattern libraries are beginning to be understood as a valuable investment which ensures the integrity and longevity of your site.

Getting Buy-In

As mentioned above, styleguides aren’t typically a part of a public-facing site (though many development groups have released their styleguides for reference, like MailChimp), so it can seem like an “extra”, but there are very good reasons to plan for and include the creation of a styleguide or pattern library in your project:

• It provides an objective set of standards. There’s a level of flux in most projects. Sometimes team members leave or join teams mid-stream, and then the maintenance of the site or app very often is handed off to a different team. The guide provides a style reference and code resource when the site needs to be updated or added to down the road.
• It’s flexible if things change in the future. The beauty of the modularity of pattern libraries is that if something is purposefully changed – a new logo, an update to the color palette – that these updates can be added easily by updating the smallest involved element (e.g. a text input or button). Since the larger structures are constructed by combining the smaller ones, those structures will inherit the updates. And by including the pattern library’s CSS on the site, the site will also inherit any changes.
• It encourages best practices. The code that is included in pattern libraries has been carefully considered. Used as a starting point for development, it ensures a solid foundation for the front-end code.
• It reduces re-work and improves efficiency and consistency. Along the lines of “measure twice, cut once,” the act of setting up a pattern library answers many of the questions that are asked along the path of design and development. If a developer is tasked with creating a new section or page, they don’t have to wonder what it should look like or how it should be constructed, because it’s already defined.

Keeping Buy-In

You’ve successfully convinced the people you’re working with of the value of a styleguide, and you built a great example that they’ll be able to use for years…but will they? It’s unfortunately not uncommon for styleguides to not be kept up to date or used effectively by dev teams as time progresses.

The way to prevent styleguide stagnation (or outright rejection) is through education. When the teams who will need to use it find that compliance is easier than non-compliance, they will make it a habit to refer to the guide first.

• Have an official hand-off. If there are developers who will need to use the pattern library who were not involved in the initial development, set up a meeting to introduce them to the guide (using the handy list above to help convince skeptics).
• Write accompanying documentation. Most every pattern library framework has an option to attach notes to the items in the collection. Use this and err on the side of over-communication. It may seem obvious to you because you’ve been living with the guide for weeks or months – it may not be obvious to someone who is new to working on the site.

Styleguides can help design and development run more efficiently by creating the foundation and framework for both. A robust styleguide or pattern library can make your life easier, and your site or app simply better. Once teams have bought into working with style guides, they’ll wonder how they ever got anything done before.

For more reading on almost every aspect of styleguides and pattern libraries, check out http://styleguides.io. And if you want to talk to Cantina about how we can help create a styleguide or pattern library for you, contact us at hello@cantina.co.