Theravue Style Guide

Landmarks

<header>, <nav>, <main>, and <footer> regions must be defined in the HTML. These are the main regions that assistive technology uses to help orient users and jump to different sections on the page.

Outer Containers

Format:


                    <%= title %>

                    <div class="main">
                      
                        <div class="container clearfix">
                          Content
                        </div>
                      
                    </div>

<%= title %> The title of the page, defined in config/locales/en.yml. h1 tag is automatically included. Use <%= @title %> if the h1 is not desired.

.main Separates page content from the header and footer.

.container.clearfix Affects content width on different screen sizes, defined in the media queries. Also clears any floats that may cause misalignment on outer containers.

Content Layouts

Important: Remember that a div with the class row must go around column divs. See Bootstrap Guidelines for details.

Full Length (Default)

Does not require rows or columns. Used on content pages where no additional navigation is needed, as well as pages where there is only one major call to action in a panel (Login, Proceed to Practice, etc.)

Mobile Layouts (All)

All pages should be mobile responsive. Mobile views ideally should not have columns, even if larger views of the same page do.

No additional specifications are needed if the layout has columns in larger views. Columns should automatically default to being low width on mobile if no specification is given. See Bootstrap Guidelines for details.

Public Pages

For marketing purposes, the public pages follow a different layout format that deviates from standard logged in pages. See Public Pages in Site Sections for details.

8-4

Format:


                    <div class="col-lg-8">
                      Main Content
                    </div> 



                    <div class="col-lg-4">
                      Side Content
                    </div>

Most common layout. Used on pages where the main content has obvious importance over side content. Side content may contain widgets such as menus, additional information, etc.

If there is no side content, the column may be removed entirely.

4-8

Format:


                    <div class="col-lg-8">
                      Main Content
                    </div> 



                    <div class="col-lg-4">
                      Side Content
                    </div>

Alternative version of 8-4 Used on pages where the navigation of side content may be more important to users than main content.

Other

Special pages, such as the homepage and demo page, may use other column combinations. However, these should be used sparingly.

White Space

The margin for distinct element separation is 20px. This matches the padding of the main containers.

The margin for related element separation is 10px. If the element is very small (eg. inline link and small icon), 5px or smaller may also be used.