Create a Living Style Guide to Document Our Design System

A living style guide is documentation that both uses our design system and shows developers how to apply it to the view. Bootstrap’s documentation is an example of this. It shows both the visual appearance of the components it provides as well as the markup we need to achieve that appearance. We need this for our app. If we don’t have this, developers will not know what reusable components exist, nor will they know how to apply the CSS strategy we have chosen, and then our CSS will be an unsustainable mess. Let’s create a style guide. We’ll adopt the functional CSS strategy and use Tachyons.

There are a lot of ways to implement our design system in CSS, and we should examine the CSS libraries we are using and use whatever mechanism they have for overrides. If we aren’t using a library, we can create the base of our design system in two ways:

• SASS variables are provided by SASS, which can be installed and configured with Rails.
• CSS variables, which are supported by most browsers.

If we are creating our CSS entirely from scratch, and our browser baseline supports it, we’ll use CSS Variables because that is more standard.

Tachyons does not provide a way to use CSS variables that works well with the default configuration of Rails, so we will use tachyons-sass, which is a port of Tachyons to ...