The Grid

Inspired from Object Oriented CSS Framework

The grid is used for dividing space fractionaly and can be nested.


Grid Classes


.row
Contains the columns. The outermost rows contain padding. Nested rows have the padding removed and negative left and right margin added for grid alignment.
.nocolumns
Extension for the row class for outermost rows that contain no columns. It doubles the padding of the row to ensure proper grid alignment.
.fullwidth
Extension for the row class for rows that need to be full width. It removes the padding and for nested rows it removes negative margin.
.collapse
Extension for nested rows when a background color is needed. It removes the negative margin for grid alignment and adds padding.
.column
Base class for making columns. Contains float and padding. By default columns are set to stack when the screen width is below 768 pixels.
.widthXofY
Extension for the column class and can be used independently if desired. Widths can be thirds, quarters, fifths, halves or full. Total columns in a row must equal 1, for example ⅓ plus ⅔ equals 1.

Responsive Visibility Classes


While these are not specific to the grid, these are helpful for quickly showing and hiding elements on a page. These are not meant for creating entirely different page layouts and should be used sparingly.

Each class name is associated with the query width and up from that, so you could have an element with the classes .show768.hide0 to hide on all but the 768 query width or you could use .show768 to show an element from 768 and up.

Class Names
  1. .hide0 .show0
  2. .hide480 .show480
  3. .hide768 .show768
  4. .hide800 .show800
  5. .hide992 .show992
  6. .hide1382 .show1382

Visible on…

  1. 0✔ 0
  2. 480✔ 480
  3. 600✔ 600
  4. 768✔ 768
  5. 992✔ 992
  6. 1382✔ 1382

Hidden on…

  1. 0✔ 0
  2. 480✔ 480
  3. 600✔ 600
  4. 768✔ 768
  5. 992✔ 992
  6. 1382✔ 1382

Grid Examples


Fifths

  1. <div class="row">
  2. <div class="column width2of5">…</div>
  3. <div class="column width3of5">…</div>
  4. </div>

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

3/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio. Vivamus scelerisque sagittis lacus condimentum posuere. Donec viverra lectus nec erat feugiat rutrum.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

2/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

3/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

4/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio. Vivamus scelerisque sagittis lacus condimentum posuere. Donec viverra lectus nec erat feugiat rutrum.

1/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

Fourths

  1. <div class="row">
  2. <div class="column width3of4">…</div>
  3. <div class="column width1of4">…</div>
  4. </div>

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

2/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

3/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio. Vivamus scelerisque sagittis lacus condimentum posuere. Donec viverra lectus nec erat feugiat rutrum.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

Thirds

  1. <div class="row">
  2. <div class="column width1of3">…</div>
  3. <div class="column width2of3">…</div>
  4. </div>

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

2/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio.

Halves

  1. <div class="row">
  2. <div class="column width1of2">…</div>
  3. <div class="column width1of2">…</div>
  4. </div>

1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

Full

  1. <div class="row">
  2. <div class="column width1of1">…</div>
  3. </div>

1/1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio. Vivamus scelerisque sagittis lacus condimentum posuere. Donec viverra lectus nec erat feugiat rutrum.

Grid Nesting


  1. <div class="row">
  2. <div class="column width2of3">
  3. <div class="row">
  4. <div class="column width1of2">…</div>
  5. <div class="column width1of2">…</div>
  6. </div>
  7. </div>
  8. <div class="column width1of3">…</div>
  9. </div>

2/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pharetra nisl nec tortor convallis rutrum vestibulum felis consectetur. Nullam mi nisi, tincidunt id ornare ut, auctor non mi. Cras sagittis bibendum venenatis. In hac habitasse platea dictumst. Nulla in velit orci, quis venenatis lacus. Etiam mauris sem, tincidunt ac bibendum eget, tincidunt a odio.

1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur quam sed sapien bibendum sit amet sodales arcu accumsan. Nam fringilla vulputate tincidunt. Mauris sed sem ante, at luctus justo. Fusce et tempor nunc.