Templates

Build layouts using a flexible and responsive grid template system.

Usage

Building a layout using grids is very simple:

  1. Add a container with an appropriate grid template class.
  2. Add the required elements for that layout to the grid.

The simplest layout is a single column.

Open example in new window

<div class="sta-grid__main">
  <div class="sta-grid__item-main">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Single full width column</div>
  </div>
</div>

Page templates

A page layout should apply to the top level container of your web site or application and all other elements should be placed within it. You may extend the grid system to suit your particular layout requirements, while still following the design principles outlined in the design system.

On small displays the grid areas are typically stacked on top of each other in the order they are defined on the page.

Main area with header and footer

This places the header above the main and footer areas with the footer being anchored to the bottom of the viewport (open in new window to view this behaviour).

Open example in new window

<div class="sta-layout">
  <div class="sta-layout__header">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Header</div>
  </div>
  <div class="sta-layout__main">
    <div class="sta-box sta-box--more-emphasis sta-box--padding" style="height:100%;">Main</div>
  </div>
  <div class="sta-layout__footer">
    <div class="sta-box sta-box--less-emphasis sta-box--padding">Footer</div>
  </div>
</div>

Content layouts

A number of default templates are available for common layouts within a page. If none of these are suitable, then you may extend the grid system to suit your needs, while still following the design principles outlined in the design system.

On small displays the grid areas are typically stacked on top of each other in the order they are defined on the page.

Main column with aside

On sizes larger than the lg breakpoint, the aside area is placed to the right of the main area. The aside has a width that is no smaller than 280px wide and a maximum width of a 25% of the total width. The main area takes up the remainder of the available space.

This example shows how the order of grid elements stack on smaller widths.

Open example in new window

<div class="sta-grid--main-aside">
  <div class="sta-grid__item-aside">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Aside column</div>
  </div>
  <div class="sta-grid__item-main">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Main column</div>
  </div>
</div>

Aside with main column

This is the mirrored version of the above layout. On sizes larger than the lg breakpoint, the aside area is placed to the left of the main area. The aside has a width that is no smaller than 280px wide and a maximum width of a 25% of the total width. The main area takes up the remainder of the available space.

Open example in new window

<div class="sta-grid--aside-main">
  <div class="sta-grid__item-aside">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Aside column</div>
  </div>
  <div class="sta-grid__item-main">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Main column</div>
  </div>
</div>

Main column with offset

The offset area is not as wide as an aside and stacks on larger sizes than aside does. On sizes larger than the xl breakpoint, the offset area is placed to the right of the main area. The offset has a width that is no smaller than 180px wide and a maximum width of 240px. The main area takes up the remainder of the available space.

Open example in new window

<div class="sta-grid--main-offset">
  <div class="sta-grid__item-main">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Main column</div>
  </div>
  <div class="sta-grid__item-offset">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Offset column</div>
  </div>
</div>

Aside with main column and offset

A three area layout that adapts as the viewport size changes:

  • On sizes larger than the lg breakpoint, the aside area is placed to the left of the offset and main areas. The aside has a width that is no smaller than 280px wide and a maximum width of a 25% of the total width. The offset is stacked above the main area and they both have a width that takes up the remainder of the available space.
  • On sizes larger than the xl breakpoint, the offset area is placed to the right of the main area. The offset has a width that is no smaller than 180px wide and a maximum width of 240px. The main area takes up the remainder of the available space.

Open example in new window

<div class="sta-grid--aside-main-offset">
  <div class="sta-grid__item-aside">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Aside column</div>
  </div>
  <div class="sta-grid__item-offset">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Offset column</div>
  </div>
  <div class="sta-grid__item-main">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Main column</div>
  </div>
</div>

Nested grids

Grids can be added inside other grids to create complex layouts.

Open example in new window

<div class="sta-grid--aside-main">
  <div class="sta-grid__item-aside">
    <div class="sta-box sta-box--more-emphasis sta-box--padding">Aside column</div>
  </div>
  <div class="sta-grid__item-main">
    <div class="sta-grid--main-offset">
      <div class="sta-grid__item-main">
        <div class="sta-box sta-box--less-emphasis sta-box--padding">Nested main column</div>
      </div>
      <div class="sta-grid__item-offset">
        <div class="sta-box sta-box--less-emphasis sta-box--padding">Nested offset column</div>
      </div>
    </div>
  </div>
</div>