Speed up with CSS Styleguides

A living styleguide showcases the visual and interactive elements of your application. Companies spend a lot of time and money creating highly detailed brand styleguides. They do this to keeep visual consistency around their brand’s identity. It’s becomming more popular for brands to also have digital styleguides in their websites/apps. The more progressive digital styleguides are not built in photoshop, but in dynamic html, css and javascript.

What’s wrong with images?

For print, nothing. For consistency, it doesn’t get much better than a glossy bound book created in InDesign, driven by assets from Illustrator and/or Photoshop. The challenge we face in web is inconsistency in the way browsers and devices render visuals (including images) digital styleguide is important.

Common problems with images

  • PSDs are not always consistent in color usage (color pickers vs code).
  • PSDs can take a lot of time to circulate.
  • Not everyone has CS6 or the ability to open Photoshop.
  • It’s hard to keep track of the lastest design.
  • Keeping track of the latest design can involve filtering through email, forwarding attachments just before design reviews, not exporting full files, and creating extra work around making pdfs and slideshows to showcase the designs.

Speed up visual-design sign-off processes

Visual design is very important to brand identity. The larger the brand, the harder it is to manage the identity. Due to this fact, stakeholders of larger companies are held to high-standards with respect to the appearance of their digital products. This can lead to some very time-intensive design-approval processes and therefore slowing down the continuous design/development of working software.

Can we change the button gradient a little? What does that button look compared to the other buttons? Let’s navigate through the app to find the disabled button again. I forgot where that is.

These details are easier to evaluate/approve within the context of the styleguide-format your stakeholders are used to seeing.

Keep the focus on functionality

Content and functionality should always drive the direction of the app. Visual design enhances the application, but should never constrain the application’s content, interface or distract your stakeholders from important conversations around real functionality.

By creating a location for stakeholders to hover, click and discuss the finer-visual-details of your app, you may notice that your discussions around flows, button & link placement stay focussed on function and content.

Summary

  • CSS is faster than psds.
  • Use of colors in CSS can prove to be more consistent than psds.
  • CSS is already in your app and driven by your predefined styles.
  • CSS is the true representation of your final product on any device.
  • Visual-design sign-off processes can sometimes slow down continuous design/development.
  • CSS styleguides can ease concerns around visual branding standards and help stakeholders to focus on content/functionality.

Building a digital styleguide

  • Check out KSS - an OSS that will read through your css comments and build a documented styleguide for you, based on the code you’ve already written. Github’s styleguide was made with KSS.
  • I made a simple a mixin-driven styleguide called sassy-seeds