Boon's great, responsive, proportional grids

Proportional Grids

/* ------------------------ *
 * Author : Boon
 * URL    : http://builtbyboon.com/blog/proportional-grids 
 * ------------------------ */


/*
 * Begin grids
 */

/* -- Use this wrapper if you want to divide your columns -- */
.divide-bottom {
  border-bottom: 1px solid #ccc;
  padding-bottom: 1.5em;
  margin-bottom: 1.5em; }


.island {
  padding: 1.5em;
  background-color: #ececec; }
  .island :last-child {
    margin-bottom: 0; }


/* -- Setup grids with base class -- */
.grid {
  margin-left: -3em;
  overflow: hidden;
  clear: both; }


.col {
  float: left;
  padding-left: 3em;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }


.gutter-large {
  margin-left: -6em; }
  .gutter-large .col {
    padding-left: 6em; }


.gutter-small {
  margin-left: -1.5em; }
  .gutter-small .col {
    padding-left: 1.5em; }


.gutter-none {
  margin-left: 0; }
  .gutter-none .col {
    padding-left: 0; }


.gutter-reset {
  margin-left: -3em; }
  .gutter-reset .col {
    padding-left: 3em; }


ul.grid,
ol.grid {
  padding-left: 0;
  list-style: none; }


li.col {
  margin-left: 0;
  margin-bottom: 0; }


.col1,
.col-set-1 .col {
  width: 100%; }


.col1-2,
.col-set1-2 .col {
  width: 50%; }


.col1-3,
.col-set1-3 .col {
  width: 33.333%; }


.col1-4,
.col-set1-4 .col {
  width: 25%; }


.col2-3 {
  width: 66.666%; }


.col3-4 {
  width: 75%; }


/*
 * Breakpoint (.small)
 */


@media only screen and (min-width: 30em) {
  .small-col-full,
  .small-col-set-full .col {
    width: 100%; }


  .small-col1-2,
  .small-col-set1-2 .col {
    width: 50%; }


  .small-col1-3,
  .small-col-set1-3 .col {
    width: 33.333%; }


  .small-col1-4,
  .small-col-set1-4 .col {
    width: 25%; }


  .small-col2-3 {
    width: 66.666%; }


  .small-col3-4 {
    width: 75%; } }

/*
 * Breakpoint 2 (.medium)
 */


@media only screen and (min-width: 48em) {
  .medium-col-full,
  .medium-col-set-full .col {
    width: 100%; }


  .medium-col1-2,
  .medium-col-set1-2 .col {
    width: 50%; }


  .medium-col1-3,
  .medium-col-set1-3 .col {
    width: 33.333%; }


  .medium-col1-4,
  .medium-col-set1-4 .col {
    width: 25%; }


  .medium-col2-3 {
    width: 66.666%; }


  .medium-col3-4 {
    width: 75%; } }


/*
 * Breakpoint 3 (.large)
 */


@media only screen and (min-width: 60em) {
  .large-col-full,
  .large-col-set-full .col {
    width: 100%; }


  .large-col1-2,
  .large-col-set1-2 .col {
    width: 50%; }


  .large-col1-3,
  .large-col-set1-3 .col {
    width: 33.333%; }


  .large-col1-4,
  .large-col-set1-4 .col {
    width: 25%; }


  .large-col2-3 {
    width: 66.666%; }


  .large-col3-4 {
    width: 75%; } }


/*
 * ------------- INTERNET EXPLORER ONLY ------------- *
 */


/*
 * IE8 and less
 */


.lt-ie9 .small-col-full,
.lt-ie9 .small-col-set-full .col {
  width: 100%; }


.lt-ie9 .small-col1-2,
.lt-ie9 .small-col-set1-2 .col {
  width: 50%; }


.lt-ie9 .small-col1-3,
.lt-ie9 .small-col-set1-3 .col {
  width: 33.333%; }


.lt-ie9 .small-col1-4,
.lt-ie9 .small-col-set1-4 .col {
  width: 25%; }


.lt-ie9 .small-col2-3 {
  width: 66.666%; }


.lt-ie9 .small-col3-4 {
  width: 75%; }


.lt-ie9 .medium-col-full,
.lt-ie9 .medium-col-set-full .col {
  width: 100%; }


.lt-ie9 .medium-col1-2,
.lt-ie9 .medium-col-set1-2 .col {
  width: 50%; }


.lt-ie9 .medium-col1-3,
.lt-ie9 .medium-col-set1-3 .col {
  width: 33.333%; }


.lt-ie9 .medium-col1-4,
.lt-ie9 .medium-col-set1-4 .col {
  width: 25%; }


.lt-ie9 .medium-col2-3 {
  width: 66.666%; }


.lt-ie9 .medium-col3-4 {
  width: 75%; }


.lt-ie9 .large-col-full,
.lt-ie9 .large-col-set-full .col {
  width: 100%; }


.lt-ie9 .large-col1-2,
.lt-ie9 .large-col-set1-2 .col {
  width: 50%; }


.lt-ie9 .large-col1-3,
.lt-ie9 .large-col-set1-3 .col {
  width: 33.333%; }


.lt-ie9 .large-col1-4,
.lt-ie9 .large-col-set1-4 .col {
  width: 25%; }


.lt-ie9 .large-col2-3 {
  width: 66.666%; }


.lt-ie9 .large-col3-4 {
  width: 75%; }


.lt-ie9 .container {
  width: 960px; }


/*
 * IE7 or less
 */


.lt-ie8 .grid {
  margin-left: 0; }
.lt-ie8 .col {
  padding: 0;
  margin-left: 5%; }
  .lt-ie8 .col:first-child {
    margin-left: 0; }


.lt-ie8 .col1,
.lt-ie8 .col-set-1 .col {
  width: 99.95%; }
.lt-ie8 .col1-2,
.lt-ie8 .col-set1-2 .col {
  width: 47.45%; }
.lt-ie8 .col1-3,
.lt-ie8 .col-set1-3 .col {
  width: 29.55%; }
.lt-ie8 .col2-3 {
  width: 64.95%; }
.lt-ie8 .col1-4,
.lt-ie8 .col-set1-4 .col {
  width: 19.95%; }
.lt-ie8 .col3-4 {
  width: 74.95%; }


.lt-ie8 .small-col-full,
.lt-ie8 .small-col-set-full .col {
  width: 99.95%; }
.lt-ie8 .small-col1-2,
.lt-ie8 .small-col-set1-2 .col {
  width: 47.45%; }
.lt-ie8 .small-col1-3,
.lt-ie8 .small-col-set1-3 .col {
  width: 29.55%; }
.lt-ie8 .small-col2-3 {
  width: 64.95%; }
.lt-ie8 .small-col1-4,
.lt-ie8 .small-col-set1-4 .col {
  width: 19.95%; }
.lt-ie8 .small-col3-4 {
  width: 74.95%; }


.lt-ie8 .medium-col-full,
.lt-ie8 .medium-col-set-full .col {
  width: 99.95%; }
.lt-ie8 .medium-col1-2,
.lt-ie8 .medium-col-set1-2 .col {
  width: 47.45%; }
.lt-ie8 .medium-col1-3,
.lt-ie8 .medium-col-set1-3 .col {
  width: 29.55%; }
.lt-ie8 .medium-col2-3 {
  width: 64.95%; }
.lt-ie8 .medium-col1-4,
.lt-ie8 .medium-col-set1-4 .col {
  width: 19.95%; }
.lt-ie8 .medium-col3-4 {
  width: 74.95%; }


.lt-ie8 .large-col-full,
.lt-ie8 .large-col-set-full .col {
  width: 99.95%; }
.lt-ie8 .large-col1-2,
.lt-ie8 .large-col-set1-2 .col {
  width: 47.45%; }
.lt-ie8 .large-col1-3,
.lt-ie8 .large-col-set1-3 .col {
  width: 29.55%; }
.lt-ie8 .large-col2-3 {
  width: 64.95%; }
.lt-ie8 .large-col1-4,
.lt-ie8 .large-col-set1-4 .col {
  width: 19.95%; }
.lt-ie8 .large-col3-4 {
  width: 74.95%; }