Grid

It is a 12-column fluid grid. Use .row for rows and .column or .columns for columns. Specify column widths using .mobile-* .phablet-* .tablet-* .desktop-* .hd-* classes. Grids can be nested.

1
11
2
10
3
9
4
8
5
7
<div class="container-fluid">
  <div class="row hidden-below-mobile">
    <div class="column mobile-1">1</div><div class="mobile-11 columns">11</div>
  </div>
  <div class="row">
    <div class="column mobile-2">2</div><div class="mobile-10 columns">10</div>
    <div class="column mobile-3">3</div><div class="mobile-9 columns">9</div>
    <div class="column mobile-4">4</div><div class="mobile-8 columns">8</div>
    <div class="column mobile-5">5</div><div class="mobile-7 columns">7</div>
  </div>
</div>
12
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
<div class="container-fluid">
  <div class="row">
    <div class="column mobile-12">12</div>
    <div class="column mobile-6">6</div><div class="mobile-6 columns">6</div>
    <div class="column mobile-4">4</div><div class="mobile-4 columns">4</div><div class="mobile-4 columns">4</div>
    <div class="column mobile-3">3</div><div class="mobile-3 columns">3</div><div class="mobile-3 columns">3</div><div class="mobile-3 columns">3</div>
    <div class="column mobile-2">2</div><div class="mobile-2 columns">2</div><div class="column mobile-2">2</div><div class="mobile-2 columns">2</div><div class="column mobile-2">2</div><div class="mobile-2 columns">2</div>
  </div>
  <div class="row hidden-below-mobile">
    <div class="column mobile-1">1</div><div class="mobile-1 columns">1</div><div class="column mobile-1">1</div><div class="mobile-1 columns">1</div><div class="column mobile-1">1</div><div class="mobile-1 columns">1</div><div class="column mobile-1">1</div><div class="mobile-1 columns">1</div><div class="column mobile-1">1</div><div class="mobile-1 columns">1</div><div class="column mobile-1">1</div><div class="mobile-1 columns">1</div>
  </div>
</div>

Offset

Use .offset-*-* classes to set a left margin on columns.

width 3
width 6 offset 3
<div class="container-fluid">
  <div class="row">
    <div class="column mobile-3">width 3</div>
    <div class="column mobile-6 offset-mobile-3">width 6 offset 3</div>
  </div>
</div>

Push Pull

Use .push-*-* and .pull-*-* classes to change content order. Useful for SEO.

width 4 push 8
width 8 pull 4
<div class="container-fluid">
  <div class="row">
    <div class="column mobile-4 push-mobile-8">width 4 push 8</div>
    <div class="column mobile-8 pull-mobile-4">width 8 pull 4</div>
  </div>
</div>

Containers

.container has max-width property set to a value which varies according to the screen size. .container-fluid is a full width wrapper with some padding.

This text is
inside a
container

This text is
inside a
fluid container
<div class="container bg-light">This text is <br> inside a <br> container</div>
<br>
<div class="container-fluid bg-light">This text is <br> inside a <br> fluid container</div>

Breakpoints

/* Mobile first queries */

/* Phablet */
@media (min-width: 34em) {}

/* Tablet */
@media (min-width: 48em) {}

/* Desktop */
@media (min-width: 62em) {}

/* HD */
@media (min-width: 75em) {}

Responsive utilities

.hidden-below-<device> hides content on devices smaller than and including the specified device. .hidden-above-<device> hides content on devices larger than and including the specified device.

Mobile
(<34em)		 Phablet
(≥34em) 		Tablet
(≥48em)		 Desktop
(≥62em)		 HD
(≥75em)
.hidden-below-mobile Hidden Visible Visible Visible Visible
.hidden-below-phablet Hidden Hidden Visible Visible Visible
.hidden-below-tablet Hidden Hidden Hidden Visible Visible
.hidden-below-desktop Hidden Hidden Hidden Hidden Visible
.hidden-below-hd Hidden Hidden Hidden Hidden Hidden
.hidden-above-mobile Hidden Hidden Hidden Hidden Hidden
.hidden-above-phablet Visible Hidden Hidden Hidden Hidden
.hidden-above-tablet Visible Visible Hidden Hidden Hidden
.hidden-above-desktop Visible Visible Visible Hidden Hidden
.hidden-above-hd Visible Visible Visible Visible Hidden