The real deal...
Single Source of Truth

Reading time: 1 minute

Multiple living styleguides? Empowered designers who can not only think up, but implement new design properties without having to reach out to a developer? One true code base?

Learn what the engineers at Salesforce have cooked up to seriously integrate design and development. They call it The Single Source of Truth—how you originally envisioned responsive design to be—one code base that works everywhere…across iOS, Android, Win8, watches, phones, tablets, desktops, and every browser conceivable.

Using JSON data, Salesforce developed Theo, a set of Gulp plugins for transforming and formatting Design Properties, which you can find on GitHub. Theo transforms paired key/value data into a format that’s compatible with any platform.

Key/value pairs

Key/value pairs

Why do you care?

Using a CSS preprocessor? Theo can output CSS variables for Sass, Less or Stylus. At the same time, it also generates XML data for use on Android, while also creating a JSON version for iOS. This is all just the tip of iceberg though.

So what?

A fractured process makes for a fractured user experience. Style guides help, but as many of us have experienced, they are difficult to keep current and useful. What if a new color gets added? The style guide needs to be updated. If your style guide and CSS share the same configuration, it’s already done.

Keep it D.R.Y. (don’t repeat yourself) when it comes to living style guides and your actual code.