--- layout: style_guide title: "Living Styleguide" excerpt: "An automated styleguide for colors, typography and UI patterns." body_class: 'styleguide' --- {% assign entries = site.colors %} {% assign componentsByType = site.components | group_by:"type" %}

{{ page.title }}

The color & pattern styleguide for the application



How do I use the styleguide?


Add components in app/_components
Use Front Matter to organize them (see files in app/_components).
Use as includes anywhere in your project {% include FILENAME.html %}.

Add colors in app/_colors
Include your colors in the $colors loop in app/styles/pages/_styleguide.scss.
Coordinate class names (color__tile--NEWCOLOR) in app/_colors html files.

That's it.


Colors

{% for entry in entries %} {% include component-color.html %} {% endfor %} {% for type in componentsByType %}

{{ type.name | capitalize }}

{% for entry in type.items %} {% include component.html %} {% endfor %} {% endfor %}