arrow-downarrow-leftarrow-rightarrow-upavatarcameracartchevron-upchevron-leftchevron-rightchevron-upclosecommentemailfullscreen-closefullscreen-opengridheadphonesheart-filledheart-openlockmap-geolocatormap-pushpinmenuminusng-borderpauseplayplusprintsearchsharefacebookgithubg+instagramlinkedinlinkedin_inpinterestpinterest_psnapchatsnapchat_2tumblrtwittervimeovinewhatsappspeakerstar-filledstar-openzoom-inzoom-out

Layout

Our pages are designed using a responsive 12-column grid. The grid is configurable and provides great flexibility for page layouts.

 

Columns

The grid contains 12 columns and spans the entire width of its container. The columns have many configurable properties outlined here.

Available classes: Use the following classes to configure the grid. The asterisks below (*) can be replaced with a relevant number. The column, offset, push, and pull classes are respective to the 12-column grid, so values 1 through 12 are available. The column gutter class can have values of none, sm, md, and lg. The row gutter class can have values of none, half, 1, 2, 3, and 4.

default class name class name with breakpoint
Column .mt2_col-* .mt2_col-[sm, md, lg]-*
Offset .mt2_col-offset-* .mt2_col-[sm, md, lg]-offset-*
Pull .mt2_col-pull-* .mt2_col-[sm, md, lg]-pull-*
Push .mt2_col-push-* .mt2_col-[sm, md, lg]-push-*
Column Gutter .mt2_col-gut-* .mt2_col-[sm, md, lg]-gut-*
Row Gutter .mt2_row-gut-* .mt2_row-[sm, md, lg]-gut-*`

Available Breakpoints: You can specify different values for the classes described above at different breakpoints by using the sm, md, or lg qualifier in the class name. If a qualifier is not used, then the value will be applied at all breakpoints.

breakpoint name size
sm > 30em (480px)
md > 50em (800px)
lg > 70em (1120px)

Column: This property refers to the number of columns a given object spans. Values range from 1 to 12. The examples below show objects that span the same number of columns across all breakpoints.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="mt2_row">
  
  <div class="mt2_col-12 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-1 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-11 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-2 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-10 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-3 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-9 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-4 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-8 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-5 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-7 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-6 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
  <div class="mt2_col-6 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  
</div>

The following example uses the breakpoint classes to create an object that spans 6 columns on mobile, but 3 columns on desktop.

 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="mt2_row">
   <div class="mt2_col-6 mt2_col-sm-6 mt2_col-md-3 mt2_col-lg-3 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
</div>

Offset: This property is used to create empty columns of space in between objects. Breakpoint classes are also available for this property.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="mt2_row">
  <div class="mt2_col-6 mt2_col-offset-3 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
</div>

<div class="mt2_row">
  <div class="mt2_col-3 mt2_col-offset-4 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  <div class="mt2_col-3 mt2_col-offset-2 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
</div>

<div class="mt2_row">
  <div class="mt2_col-4 mt2_col-offset-1 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
</div>

Reorder: The “push” and “pull” classes can be used to switch the graphical presentation from the source order of the HTML.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="mt2_row">
  <div class="mt2_col-3 mt2_col-push-9 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>

  <div class="mt2_col-9 mt2_col-pull-3 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
</div>

Column Gutters: The padding between columns is configurable and is available in the following size: none, sm, md, and lg. These can also be configured for each breakpoint.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="mt2_row mt2_row-gut-1">
  <div class="mt2_col-6"></div>
  <div class="mt2_col-6"></div>
</div>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="mt2_row mt2_row-gut-1">
  <div class="mt2_col-6 mt2_col-gut-sm"></div>
  <div class="mt2_col-6 mt2_col-gut-sm"></div>
</div>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="mt2_row mt2_row-gut-1">
  <div class="mt2_col-6 mt2_col-gut-md"></div>
  <div class="mt2_col-6 mt2_col-gut-md"></div>
</div>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="mt2_row mt2_row-gut-1">
  <div class="mt2_col-6 mt2_col-gut-lg"></div>
  <div class="mt2_col-6 mt2_col-gut-lg"></div>
</div>

Responsive Gutters: Use the breakpoint classes to additionally grow or shrink gutters at different breakpoints. Resize your browser to see how the gutters change.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="mt2_row mt2_row-gut-1">
  <div class="mt2_col-6 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
  <div class="mt2_col-6 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg"></div>
</div>
 

Rows

The “.mt2_row” class is really just a semantic extension of a clearfix to make sure a row clears floated columns. The bottom margin of rows is configurable and is available in the following classes: none, half, 1, 2, 3, and 4.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<div class="mt2_row mt2_row-gut-none"></div>
<div class="mt2_row mt2_row-gut-half"></div>
<div class="mt2_row mt2_row-gut-1"></div>
<div class="mt2_row mt2_row-gut-2"></div>
<div class="mt2_row mt2_row-gut-3"></div>
<div class="mt2_row mt2_row-gut-4"></div>
<div class="mt2_row mt2_row-gut-none"></div>

Responsive Row Gutters: The row gutter can be configured for each breakpoint. Resize your browser to see how the gutter changes.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="mt2_row mt2_row-gut-1 mt2_row-md-gut-2 mt2_row-lg-gut-4"></div>

<div class="mt2_row"></div>