Skip to main content Skip to list of styles
Beta

This is a new service – give us your feedback to help improve it.

Styles

Grid

Use the TNA grid system to help position and organise content on your pages.

Contents

  1. Grid elements
  2. Column widths
  3. Flexible columns
  4. Changing alignment
  5. Nested containers

TNA Frontend comes with a responsive grid system based on the user's device size.

Open this example in new tab

HTML 

<div class="tna-container">
  <div class="tna-column tna-column--full">
    <p>Full</p>
  </div>
  <div class="tna-column tna-column--width-1-2">
    <p>Half</p>
  </div>
  <div class="tna-column tna-column--width-1-4">
    <p>Quarter</p>
  </div>
  <div class="tna-column tna-column--width-1-4">
    <p>Quarter</p>
  </div>
  <div class="tna-column tna-column--width-1-3">
    <p>Third</p>
  </div>
  <div class="tna-column tna-column--width-2-3">
    <p>Two thirds</p>
  </div>
  <div class="tna-column tna-column--width-1-6">
    <p>Sixth</p>
  </div>
  <div class="tna-column tna-column--width-5-12">
    <p>Five twelfths</p>
  </div>
  <div class="tna-column tna-column--flex-1">
    <p>Flex 1</p>
  </div>
  <div class="tna-column tna-column--flex-2">
    <p>Flex 2</p>
  </div>
</div>

Grid elements

There are two grid elements:

Containers

A container can be made by adding a tna-container class to an element.

The container will restrict the total width of the site to the calue of the $largest-container-width variable which has a default of 1280px.

Columns can then be added inside a container.

Columns

A column exists as a direct child of a container and can be created by using the class tna-column.

By default, a column is as narrow as the content that it contains and is aligned to the left of a container.

Open this example in new tab

HTML 

<div class="tna-container">
  <div class="tna-column ">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column ">
    <p>dolor sit amet,</p>
  </div>
  <div class="tna-column ">
    <p>consectetur adipiscing elit.</p>
  </div>
</div>

Column widths

Different sized devices have a different number of columns in their grid:

Large devices
12 column grid
Medium devices
6 column grid
Small devices
4 column grid
Tiny devices
2 column grid

Based on the number of columns for each size, there are size classes for all fractions of column widths up to that number.

Open this example in new tab

HTML 

<div class="tna-container">
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
    <p>Lorem ipsum</p>
  </div>
</div>

Columns are only available in their simplest fractional forms. This means that there is no tna-column--width-8-12 class; only a tna-column--width-2-3.

Large devices

On a 12 column grid (large devices), the widths available are:

Width required Class
1/12 tna-column--width-1-12
2/12 tna-column--width-1-6
3/12 tna-column--width-1-4
4/12 tna-column--width-1-3
5/12 tna-column--width-5-12
6/12 tna-column--width-1-2
7/12 tna-column--width-7-12
8/12 tna-column--width-2-3
9/12 tna-column--width-3-4
10/12 tna-column--width-5-6
11/12 tna-column--width-11-12
12/12 tna-column--full

Medium devices

On a 6 column grid (medium devices), the widths available are:

Width required Class
1/6 tna-column--width-1-6-medium
2/6 tna-column--width-1-3-medium
3/6 tna-column--width-1-2-medium
4/6 tna-column--width-2-3-medium
5/6 tna-column--width-5-6-medium
6/6 tna-column--full-medium

Small devices

On a 4 column grid (small devices), the widths available are:

Width required Class
1/4 tna-column--width-1-4-small
2/4 tna-column--width-1-2-small
3/4 tna-column--width-3-4-small
4/4 tna-column--full-small

Tiny devices

On a 2 column grid (tiny devices), the widths available are:

Width required Class
1/2 tna-column--width-1-2-tiny
2/2 tna-column--full-tiny

Flexible columns

Widths such as 1-4 or 1-3 are "absolute" value widths. The width of the column will be exactly as specified.

If you don’t know the width you need, or want a column to expand to fill a gap, use tna-column--flex-x (suffixed with -medium, -small or -tiny if required for different device sizes) to specify how much 'weight' the size of that column gets.

Open this example in new tab

HTML 

<div class="tna-container">
  <div class="tna-column">
    <p>Minimum width</p>
  </div>
  <div class="tna-column tna-column--flex-1">
    <p>Flexible width</p>
  </div>
  <div class="tna-column">
    <p>Minimum width</p>
  </div>
</div>

Changing alignment

Horizontal alignment

Open this example in new tab

HTML 

<div class="tna-container">
  <div class="tna-column tna-column--width-1-2">
    <p>Lorem ipsum</p>
  </div>
</div>
<div class="tna-container tna-container--align-centre">
  <div class="tna-column tna-column--width-1-2">
    <p>Lorem ipsum</p>
  </div>
</div>
<div class="tna-container tna-container--align-right">
  <div class="tna-column tna-column--width-1-2">
    <p>Lorem ipsum</p>
  </div>
</div>

Vertical alignment

Open this example in new tab

HTML 

<div class="tna-container tna-container--align-centre">
  <div class="tna-column tna-column--width-1-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis accumsan orci, tincidunt placerat est auctor fermentum. Nunc fermentum velit augue&hellip;</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--align-top">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--align-centre">
    <p>Lorem ipsum</p>
  </div>
  <div class="tna-column tna-column--width-1-4 tna-column--align-bottom">
    <p>Lorem ipsum</p>
  </div>
</div>

Nested containers

Sometimes it is necessary to nest containers within columns. In this instance, the inner container needs the additional class of tna-container--nested.

Open this example in new tab

HTML 

<div class="tna-container">
  <div class="tna-column tna-column--width-2-3">
    <div class="tna-container tna-container--nested">
      <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
        <p>Lorem ipsum</p>
      </div>
      <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
        <p>Lorem ipsum</p>
      </div>
      <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
        <p>Lorem ipsum</p>
      </div>
      <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
        <p>Lorem ipsum</p>
      </div>
      <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
        <p>Lorem ipsum</p>
      </div>
      <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
        <p>Lorem ipsum</p>
      </div>
      <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
        <p>Lorem ipsum</p>
      </div>
      <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
        <p>Lorem ipsum</p>
      </div>
      <div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny">
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
  <div class="tna-column tna-column--width-1-3">
    <p>Lorem ipsum</p>
  </div>
</div>

Back to top