Style Guides

Each Workarea user interface includes a style guide page that provides tests and documentation for each layer of the CSS Architecture. The only exception to this rule is Tools, who's documentation is included in their respective files. These pages are available by default at the following paths:

  • /style_guides
  • /admin/style_guides


A primary use case for the style guide pages is documentation for developers, managers, clients, and other stakeholders. Style guide pages provide a single page view of all "components" of a UI that are considered reusable.

Test Suite

The other primary use case for the style guide pages is a test suite for developers. Many SIs develop most of the UI using only this page. It's much easier to develop and maintain re-usable components in one place rather than spread throughout the app. The page allows for visual testing, like confirming a button block looks the same regardless of the underlying HTML element.

Now on GitHub