rl-theme/library/scss/partials/_grid.scss

/******************************************************************
Site Name:
Author:

Stylesheet: Grid Stylesheet

I've seperated the grid so you can swap it out easily. It's
called at the top the style.scss stylesheet.

There are a ton of grid solutions out there. You should definitely
experiment with your own. Here are some recommendations:

http://gridsetapp.com - Love this site. Responsive Grids made easy.
http://susy.oddbird.net/ - Grids using Compass. Very elegant.
http://gridpak.com/ - Create your own responsive grid.
https://github.com/dope/lemonade - Neat lightweight grid.


The grid below is a custom built thingy I modeled a bit after
Gridset. It's VERY basic and probably shouldn't be used on
your client projects. The idea is you learn how to roll your
own grids. It's better in the long run and allows you full control
over your project's layout.

******************************************************************/


// each column has these styles
%grid-col {
  float: left;
  padding-right: 0.75em;
}

.last-col {
  float: right;
  padding-right: 0;
}


/*
Mobile Grid Styles
These are the widths for the mobile grid.
There are four types, but you can add or customize
them however you see fit.
*/
@media (max-width: 767px) {

  .m-all {
    @extend %grid-col;
    width: 100%;
  }

  .m-1of2 {
    @extend %grid-col;
    width: 50%;
  }

  .m-1of3 {
    @extend %grid-col;
    width: 33.33%;
  }

  .m-2of3 {
    @extend %grid-col;
    width: 66.66%;
  }

  .m-1of4 {
    @extend %grid-col;
    width: 25%;
  }

  .m-3of4 {
    @extend %grid-col;
    width: 75%;
  }

} // end mobile styles


/* Portrait tablet to landscape */
@media (min-width: 768px) and (max-width: 1029px) {

  .t-all {
    @extend %grid-col;
    width: 100%;
  }

  .t-1of2 {
    @extend %grid-col;
    width: 50%;
  }

  .t-1of3 {
    @extend %grid-col;
    width: 33.33%;
  }

  .t-2of3 {
    @extend %grid-col;
    width: 66.66%;
  }

  .t-1of4 {
    @extend %grid-col;
    width: 25%;
  }

  .t-3of4 {
    @extend %grid-col;
    width: 75%;
  }

  .t-1of5 {
    @extend %grid-col;
    width: 20%;
  }

  .t-2of5 {
    @extend %grid-col;
    width: 40%;
  }

  .t-3of5 {
    @extend %grid-col;
    width: 60%;
  }

  .t-4of5 {
    @extend %grid-col;
    width: 80%;
  }

} // end tablet

/* Landscape to small desktop */
@media (min-width: 1030px) {

  .d-all  {
    @extend %grid-col;
    width: 100%;
  }

  .d-1of2 {
    @extend %grid-col;
    width: 50%;
  }

  .d-1of3 {
    @extend %grid-col;
    width: 33.33%;
  }

  .d-2of3 {
    @extend %grid-col;
    width: 66.66%;
  }

  .d-1of4 {
    @extend %grid-col;
    width: 25%;
  }

  .d-3of4 {
    @extend %grid-col;
    width: 75%;
  }

  .d-1of5 {
    @extend %grid-col;
    width: 20%;
  }

  .d-2of5 {
    @extend %grid-col;
    width: 40%;
  }

  .d-3of5 {
    @extend %grid-col;
    width: 60%;
  }

  .d-4of5 {
    @extend %grid-col;
    width: 80%;
  }

  .d-1of6 {
    @extend %grid-col;
    width: 16.6666666667%;
  }

  .d-1of7 {
    @extend %grid-col;
    width: 14.2857142857%;
  }

  .d-2of7 {
    @extend %grid-col;
    width: 28.5714286%;
  }

  .d-3of7 {
    @extend %grid-col;
    width: 42.8571429%;
  }

  .d-4of7 {
    @extend %grid-col;
    width: 57.1428572%;
  }

  .d-5of7 {
    @extend %grid-col;
    width: 71.4285715%;
  }

  .d-6of7 {
    @extend %grid-col;
    width: 85.7142857%;
  }

  .d-1of8 {
    @extend %grid-col;
    width: 12.5%;
  }

  .d-1of9 {
    @extend %grid-col;
    width: 11.1111111111%;
  }

  .d-1of10 {
    @extend %grid-col;
    width: 10%;
  }

  .d-1of11 {
    @extend %grid-col;
    width: 9.09090909091%;
  }

  .d-1of12 {
    @extend %grid-col;
    width: 8.33%;
  }

} // end desktop styles