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.

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

// using a mixin since we can't use placeholder selectors
@mixin grid-col {
  float: left;
  padding-right: 0.75em;

}

// the last column
.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 {
    @include grid-col;
    width: 100%;
    padding-right: 0;
  }

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

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

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

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

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

} // end mobile styles


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

  .t-all {
    @include grid-col;
    width: 100%;
    padding-right: 0;
  }

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

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

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

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

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

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

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

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

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

} // end tablet

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

  .d-all  {
    @include grid-col;
    width: 100%;
    padding-right: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

} // end desktop styles