Living style guides with Stylio

Author: Stuart Maynes

Stylio allows designers to manage visual components in a standalone application that integrates with Ruby on Rails applications. This allows design changes to be developed, reviewed and released with ease.

 Screen Shot 2016-08-22 at 13.41.28


In a small agile team, rapid development and ease of change is essential. Getting designs approved and converted into erb templates can often slow down development releases. These set backs are often remedied by designers working a sprint ahead of development making projects less agile with reduced collaboration within the team.

Stylio allows both specialisms to be undertaken at the same time with minimal integration work required. This has allowed our great designers to contribute directly to the end project without having to learn Ruby on Rails. Allowing people of different specialisms to work easily on the same codebase and even on the same feature concurrently can massively speed up development and increase the quality.


Changes are an inevitable part of development and making those adaptations on a living style guide makes those changes simple and fast. Using version control, a designer can make a change on a branch of the style guide, get approval from the client and merge into the master branch.

The designer owning this codebase away from the main project repository allows for multiple changes to be made, keep the modular css consistent and any changes in CSS can be tested against every component simply by clicking on the other component pages. Creating and testing components with HTML means that responsiveness can easily be tested.

Using Stylio

We’ve made Stylio open source so that any Ruby on Rails project can take advantage of this. Currently we’re supporting Sass, native CSS, CoffeeScript, native Javascript and ERB for templates but in the future we hope to support much more.

The Stlyio Readme shows how to get started making the style guide but the real benefit is the integration with Ruby on Rails.

  • Copy the stylesheets folder from the Stylio project to the Rails project assets folder.
  • Copy each components file from the Stylio project into a new Rails folder views/components
  • Follow the presenter pattern in your Rails project to generate a Hash to output the same structure as the coponent’s yaml file in Stylio.
<%= render partial: 'components/my_component', locals: { params: } %>

Regularly updating from the style guide will ensure that any changes the designer has made is automatically updated in the application. We’ll be adding helpers and rake tasks to further help integrate the style guide and your Rails project but already features and changes have been released more rapidly.

As Stylio is open source let us know if it will help for your projects or create pull requests to expand the functionality.