Styles
Grid
Use the TNA grid system to help position and organise content on your pages.
Contents
TNA Frontend comes with a grid system.
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>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 set for each size, (i.e. $column-count), there are size classes for all column widths up to that number. These numbers will only be available in their simplest form. 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 |
|---|
Responsive example
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>Responsive</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>Responsive</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>Responsive</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>Responsive</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>Responsive</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>Responsive</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>Responsive</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>Responsive</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>Responsive</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>Responsive</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>Responsive</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>Responsive</p>
</div>
</div>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 flex-x to specify how much 'weight' the size of that column gets.
You can also mix them to create full-fluid layouts For example, you can 'pad' empty space around fixed-width columns with no common denominator like so:
|<--------------------------------------------- 100% --------------------------------------------->|
| |
________________________ ________________________________ ________________________________________
| tna-column--width-1-4 | tna-column--width-1-3 | tna-column--flex-1 |
|<-------- 25% -------->|<----------- 33.3% ----------->|<---------------- ??? ---------------->|
| | | |
| | | Rather than us trying to calculate the |
| | | remainder of 100% - ¼ - ⅓, this column |
| | | will flex to whatever space is left |
| | | |
Container horizontal alignment
HTML
<div class="tna-container">
<div class="tna-column tna-column--width-1-3">
<p>Column</p>
</div>
</div>
<div class="tna-container tna-container--align-centre">
<div class="tna-column tna-column--width-1-3">
<p>Column</p>
</div>
</div>
<div class="tna-container tna-container--align-right">
<div class="tna-column tna-column--width-1-3">
<p>Column</p>
</div>
</div>Column vertical alignment
HTML
<div class="tna-container tna-container--align-centre">
<div class="tna-column tna-column--width-1-4">
<p>Column</p>
<p>Column</p>
<p>Column</p>
<p>Column</p>
<p>Column</p>
<p>Column</p>
</div>
<div class="tna-column tna-column--width-1-4 tna-column--align-top">
<p>Column</p>
</div>
<div class="tna-column tna-column--width-1-4 tna-column--align-centre">
<p>Column</p>
</div>
<div class="tna-column tna-column--width-1-4 tna-column--align-bottom">
<p>Column</p>
</div>
</div>