RTL

Grid System

Introduction

The Tetra UI grid is a percentage-based, nestable grid system. Each grid row (.gr) takes up 100% of the parent containers' width and can contain up to 5 grid units (.gu). These grid units can then contain nested grid rows, maximizing flexibility and laying the foundations for a responsive layout.

When creating layouts, it is often useful to have a guide. To do this just add the .gr-zebra class to your grid row (.gr)

Ex: Simple

The markup below creates a 5 unit grid row. You will notice that the last child element has the .gu-last class.
This element consumes the remaining width of the grid unit and is useful for fixing some issues in older browsers, so please follow this convention. It is also essential when using spaced grids (documented below).

...
...
.gu .gu-1of5
.gu .gu-1of5
.gu .gu-last
.gu .gu-1of4
.gu .gu-1of4
.gu .gu-1of4
.gu .gu-last
.gu .gu-1of3
.gu .gu-1of3
.gu .gu-last
.gu .gu-1of2
.gu .gu-last
.gu .gu-1of1
show code hide code 
<div class="gr">
  <div class="gu gu-1of5"> ... </div>
  <div class="gu gu-1of5"> ... </div>
  <div class="gu gu-1of5"> ... </div>
  <div class="gu gu-1of5"> ... </div>
  <div class="gu gu-last"> ... </div>
</div>

Ex: Nested

Nesting with siblings

The example above shows a grid row (.gr) nested within a grid unit (.gu), thus enabling it to be accompanied by sibling elements. The markup looks like this:

.gu .gu-2of3
.gu .gu-1of2
.gu .gu-last
.gu .gu-last
show code hide code 
<div class="gr">
  <div class="gu gu-2of3">
    ...
    <div class="gr">
      <div class="gu gu-1of2"> ... </div>
      <div class="gu gu-last"> ... </div>
    </div>
  </div>
  <div class="gu gu-last"> ... </div>
</div>

Direct nesting

The other option is to nest your grid units directly in another grid unit. Just add the .gr class to an element with the .gu class!

show code hide code 
<div class="gr">
  <div class="gu gu-2of3 gr">
    <div class="gu gu-1of2"> ... </div>
    <div class="gu gu-last"> ... </div>
  </div>
  <div class="gu gu-last"> ... </div>
</div>

Ex: Spaced

You can assign spacing to the Tetra UI grid, using the fixed spacing sizes declared in variables.less. The percentage widths of each grid unit will change to accomodate for the extra spacing and to ensure all units are equal widths.

Tetra UI uses the @siteWidth variable defined in variables.less to calculate percentage widths for grid spacing, so you can only use this feature on a top-level grid row and not a nested one, unless the nested row is the same rendered width as the value of the @siteWidth variable.

Class Name Description
.grsxs Extra small spacing, defined in variables.less as @spacingXs
.grss Small spacing, defined in variables.less as @spacingS
.grsm Medium spacing, defined in variables.less as @spacingM
.grsl Large spacing, defined in variables.less as @spacingL
.grsxl Extra large spacing, defined in variables.less as @spacingXl
.gu .gu-1of5
.gu .gu-1of5
.gu .gu-1of5
.gu .gu-1of5
.gu .gu-last
.gu .gu-1of3
.gu .gu-1of3
.gu .gu-last
show code hide code 
  <div class="gr grss">
    <div class="gu gu-1of5"> ... </div>
    <div class="gu gu-1of5"> ... </div>
    <div class="gu gu-1of5"> ... </div>
    <div class="gu gu-1of5"> ... </div>
    <div class="gu gu-last"> ... </div>
  </div>
  <div class="gr grsl mts">
    <div class="gu gu-1of3"> ... </div>
    <div class="gu gu-1of3"> ... </div>
    <div class="gu gu-last"> ... </div>
  </div>

Ex: Center

Using the .bac (Block Align Center) class as described on the helpers page.

.gu .gu-1of5 .bac
.gu .gu-1of4 .bac
.gu .gu-1of3 .bac
.gu .gu-1of2 .bac
show code hide code 
<div class="gr gr-zebra">
  <div class="gu gu-1of5 bac"> ... <div>
  <div class="gu gu-1of4 bac"> ... <div>
  <div class="gu gu-1of3 bac"> ... <div>
  <div class="gu gu-1of2 bac"> ... <div>
</div>

Responsive Design

Introduction

The responsive grid has a desktop first approach. It comes with two breakpoints:

  • a medium breakpoint (m) for middle sized devices, tablets for example
  • a small breakpoint (s) for small devices like mobiles

The responsive grid is used inside a fluid page container which has the following properties:

  • horizontally centered
  • three different percentage widths for desktop, tablet, mobile applied with media queries
  • a maximum width when in desktop mode to prevent the page from being to large.

Fluid container

show code hide code 
<div class="fluid-container"> ... </div>

Grid markup

show code hide code 
<div class="gr">
  <div class="gu gu-1of5 gu-m-1of1">
    This column is a 1/5 width column in desktop mode,
    then a full width column after the medium breakpoint.
  </div>
  <div class="gu gu-3of5 gu-m-3of5 gu-s-1of1">
    This column is a 3/5 width column in desktop mode,
    then a 3/5 width column after the medium breakpoint,
    then a full width column after the small breakpoint.
  </div>
  <div class="gu gu-last">
    This column remains the last one
    and fills the remaining free space.
  </div>
</div>

Helpers

Visibility

Resizing your browser window will show the effect of the different show and hide classes.

Large devices Medium devices Small devices
Hide .hide-l

Hide on large devices and down

 .hide-m

Hide on medium devices and down

 .hide-s

Hide on small devices only
Show .show-l

Show on large devices and down

 .show-m

Show on medium devices and down

 .show-s

Show on small devices
Samples .hide-m

Show only on large devices

 .hide-l .show-m .hide-s

Show only on medium devices

 .hide-l .show-s

Show only on small devices

Responsive

Resizing your browser window will show the effect of the different show and hide classes.

Large devices Medium devices Small devices
Float .fl .fr .fno

Floats left, right or unfloats on large devices and down

 .fl-m .fr-m .fno-m

Floats left, right or unfloats on medium devices and down

 .fl-s .fr-s .fno-s

Floats left, right or unfloats on small devices only
Text Align .tal .tar .tac

Text aligns left, right or center on large devices and down

 .tal-m .tar-m .tac-m

Text aligns left, right or center on medium devices and down

 .tal-s .tar-s .tac-s

Text aligns left, right or center on small devices only
Block Align .bac .bar .bal

Block aligns left, right or center on large devices and down

 .bac-m .bar-m .bal-m

Block aligns left, right or center on medium devices and down

 .bac-s .tar-s .bal-s

Block aligns left, right or center on small devices only
Padding .pal

Padding all with L size, on large devices and down

 .pal-m

Padding all with L size, on medium devices and down

 .pal-s

Padding all with L size, on small devices and down
Margin .mbxs

Margin bottom with XS size, on medium devices and down

 .mbxs-m

Margin bottom with XS size, on large devices and down

 .mbxs-s

Margin bottom with XS size, on small devices and down
Large devices Medium devices Small devices
Block .dispb

Block layout on large devices and down

 .dispb-m

Block layout on medium devices and down

 .dispb-s

Block layout on small devices and down
Inline block .dispib

Inline block layout on large devices and down

 .dispib-m

Inline block layout on medium devices and down

 .dispib-s

Inline block layout on small devices and down
Inline .dispi

Inline layout on large devices and down

 .dispi-m

Inline layout on medium devices and down

 .dispi-s

Inline layout on small devices and down

Variables

Variable Value Description 
@pageWidthMax
 1020px Maximum width of the page or fluid container 
@breakpointM
 768px Breakpoint for medium devices (tablet) 
@breakpointS
 480px Breakpoint for small devices (mobile)
Variable Value Description 
@pageWidth
 85% Width of the fluid container in desktop mode 
@pageWidthM
 90% Width of the fluid container on medium devices 
@pageWidthS
97% Width of the fluid container on small devices

Ex: desktop & mobile

Main content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum laoreet dolor, vitae adipiscing quam commodo sed. Cras porta dictum sem quis aliquet. Aenean a neque sed dolor lacinia iaculis.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum laoreet dolor, vitae adipiscing quam commodo sed. Cras porta dictum sem quis aliquet. Aenean a neque sed dolor lacinia iaculis.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Aside

  • Lorem ipsum
  • Consectetur
  • Sed do eiusmod
  • Et dolore magna aliqua

Picture

show code hide code 
<div class="gr grsl">

  <div class="gu gu-3of5 gu-m-1of2 gu-s-1of1">
    <div class="bx">
      <h2 class="h-bx h-bx-main">Main content</h2>
      <p>...</p>
    </div>
  </div>

  <div class="gu gu-last">
    <div class="bx">
      <h2 class="h-bx">Aside</h2>
      <ul>
        <li>...</li>
      </ul>
    </div>
    <div class="bx">
      <h2 class="h-bx">Picture</h2>
      <img src="http://placehold.it/400x400" alt="" class="fluid-media">
    </div>
  </div>

</div>