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.

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


.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) {

  /*
   *establishing the extend within each breakpoint
  */
  %grid-col {
    float: left;
    padding-right: 0.75em;
  }

  .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) {

  /*
   *establishing the extend within each breakpoint
  */
  %grid-col {
    float: left;
    padding-right: 0.75em;
  }

  .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) {

  /*
   *establishing the extend within each breakpoint
  */
  %grid-col {
    float: left;
    padding-right: 0.75em;
  }

  .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