Predefined HTML Classes

This Framework is mobile-first and there are 4 different grids based on 3 different break points.

  • small < 720
  • 720 <= tablet < 960
  • 960 <= medium

classes:

.row : define a row

.column or columns : define a column

.small-# : define the number of columns the div will take in small size (12 if not defined)

.tablet-# : define the number of columns the div will take in tablet size (inherit value from small if not defined)

.medium-# : define the number of columns the div will take in medium size (inherit value from small if not defined)

example:

<div class="row">
  <div class="marged padded">
    <p>When you have one column use .marged .padded after .row</p>
  </div>
</div>
<div class="row">
  <div class="small-2 medium-4 columns">
    <div class="marged padded">...</div>
  </div>
  <div class="small-4 medium-4 columns">
    <div class="marged padded">...</div>
  </div>
  <div class="small-6 medium-4 columns">
    <div class="marged padded">...</div>
  </div>
</div>
<div class="row">
  <div class="medium-3 columns">
    <div class="marged padded">...</div>
  </div>
  <div class="medium-6 columns">
    <div class="marged padded">...</div>
  </div>
  <div class="medium-3 columns">
    <div class="marged padded">...</div>
  </div>
</div>
<div class="row">
  <div class="small-6 medium-2 columns">
    <div class="marged padded">...</div>
  </div>
  <div class="small-6 medium-8 columns">
    <div class="marged padded">...</div>
  </div>
  <div class="medium-2 columns">
    <div class="marged padded">...</div>
  </div>
</div>
    

When you have one column use .marged after .row

2

4

4

6

4

12

3

12

6

12

3

6

2

6

2

12

2

Nesting

You can nest as much as you want; the padding and margins are set by the class content.

example:

<div class="row example">
  <div class="small-10 medium-8 columns">
    <div class="padded marged">8</p></div>
    <div class="row example">
      <div class="small-10 medium-8 columns">
        <div class="padded marged">8 Nested</div>
        <div class="row example">
          <div class="small-6 medium-4 columns">
            <div class="padded marged">4 Nested Again</div>
          </div>
          <div class="small-6 medium-8 columns">
            <div class="padded marged">8 Nested Again</div>
          </div>
        </div>
      </div>
      <div class="small-2 medium-4 columns">
        <div class="padded marged">4 Nested</div>
      </div>
    </div>
  </div>
  <div class="small-2 medium-4 columns">
    <div class="padded marged">4</div>
  </div>
</div>
    

10

8

10 Nested

8 Nested

6 Nested Again

4 Nested Again

6 Nested Again

8 Nested Again

2 Nested

4 Nested

2

4

Offsets

Offsets allow you to create additional space between columns in a row. They're nestable like the rest of the grid. You can use classes like .medium-offset-1, .tablet-offset-5, and .small-offset-3 to manipulate your column positions in different ways. You can offset up to 11 since you wouldn't ever offset a full-width column.

classes:

.small-offset-# : push the div to the left at the small size

.tablet-offset-# : push the div to the left at the tablet size (inherit value from small if not defined)

.medium-offset-# : push the div to the left at the medium size (inherit value from tablet if not defined)

example:

<div class="row">
  <div class="medium-1 columns">1</div>
  <div class="medium-11 columns">11</div>
</div>
<div class="row">
  <div class="medium-1 columns">1</div>
  <div class="medium-10 medium-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
  <div class="medium-1 columns">1</div>
  <div class="medium-9 medium-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
  <div class="medium-1 columns">1</div>
  <div class="medium-8 medium-offset-3 columns">8, offset 3</div>
</div>
    

1

11

1

10, offset 1

1

9, offset 2

1

8, offset 3

Centered Columns

Centered columns are placed in the middle of the row. This does not center their content but centers the grid element itself. This is accomplished by adding a class of medium-centered or small-centered depending on which breakpoint you want the columns to center on. Small versions will carry through all breakpoints if not overridden by a largest version. You can center any number of columns you have. To have a column not carry its small-centered to medium, add a class of medium-uncentered.

classes:

.small-centered: center the div at the small size

.tablet-centered: center the div at the tablet size (inherit value from small if not defined)

.tablet-uncentered: used if small is centered and tablet is uncentered

.medium-centered: center the div at the medium size (inherit value from small if not defined)

.medium-uncentered: used if small is centered and medium is uncentered

example:

<div class="row">
  <div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
  <div class="small-6 medium-centered columns">6 centered</div>
</div>
<div class="row">
  <div class="small-9 small-centered medium-uncentered columns">9 centered</div>
</div>
    

3 centered

6 centered

9 centered

9 uncentered

Source Ordering

Using the source ordering classes you can shift columns around between the breakpoints. For instance, using .medium-push-# you can have a sub-nav on the left for large displays but below for small ones.

classes:

.small-push-#: push the div to the left relative position at the small size

.tablet-push-#: push the div to the left relative position at the tablet size (inherit value from small if not defined)

.medium-push-#: push the div to the left relative position at the medium size (inherit value from tablet if not defined)


.small-pull-#: push the div to the right relative position at the small size

.tablet-pull-#: push the div to the right relative position at the tablet size (inherit value from small if not defined)

.medium-pull-#: push the div to the right relative position at the medium size (inherit value from tablet if not defined)


.tablet-unpush: cancel the push value from small size

.tablet-unpull: cancel the pull value from small size

.medium-unpush: cancel the push value from tablet size

.medium-unpull: cancel the pull value from tablet size

example:

<div class="row">
  <div class="small-2 medium-push-10 columns">
    <div class="padded marged">2</div>
  </div>
  <div class="small-10 medium-pull-2 columns">
    <div class="padded marged">10, last</div>
  </div>
</div>
<div class="row">
  <div class="small-4 medium-push-8 medium-unpush columns">
    <div class="padded marged">4</div>
  </div>
  <div class="small-8 medium-pull-4 medium-unpull columns">
    <div class="padded marged">8, last</div>
  </div>
</div>
    

2

10 last

4

8 last

Responsive Utility Classes

Visibility

You can set div visible or hidden at different break points by using the class visible_#{size} or hidden_#{size}. This framework is mobile first so if you want to hide a div on small size only you need to give 2 classes to your div .hidden_small and .visible_medium.

.visible_small: default value

.visible_tablet: set the div display:block on tablet size (inherit from .visible_small)

.visible_medium: set the div display:block on medium size (inherit from .visible_tablet)

.hidden_small: set the div display:none on small size

.hidden_tablet: set the div display:none on tablet size (inherit from .visible_small)

.hidden_medium: set the div display:none on medium size (inherit from .visible_tablet)

Floats

.float-right_{#size}: set the div float:right for the defined {#size}

.float-left_{#size}: set the div float:left for the defined {#size}

.float-none_{#size}: set the div float:none for the defined {#size}

Padding and Margin

.padded_{#size}: set the div padding left and right to $gutter for the defined {#size}

.unpadded_{#size}: set the div padding left and right to 0 for the defined {#size}

.marged_{#size}: set the div margin left and right to $gutter for the defined {#size}, after .row marged will set a margin to 2*$gutter

.unmarged_{#size}: set the div margin left and right to 0 for the defined {#size}

Sign In