Skeleton Custom Grid (SASS)

_grid.scss

/*
* Skeleton V2.0.4 (Customised Grid Only)
* Sass Version by Seth Coelen https://github.com/whatsnewsaes
* 
* Customised by Edu Wass
* Includes:
* - breakpoint variables
* - offset classes
* - push/pull classes
* - visibilty classes
*/

// Functions
//––––––––––––––––––––––––––––––––––––––––––––––––––
@function grid-column-width($n) {
  @return $column-width * $n - ($column-margin*($total-columns - $n)/$total-columns);
}

@function grid-offset-length($n) {
  @return grid-column-width($n) + $column-margin;
}

// Variables
//––––––––––––––––––––––––––––––––––––––––––––––––––

// Breakpoints
$bp-mobile    : "max-device-width:767px" !default;
$bp-desktop   : "min-width: 768px" !default;

//Grid Variables
$container-width: 960px !default;
$container-width-mobile: 85% !default;
$container-width-desktop: 80% !default;
$total-columns: 12 !default;
$column-width: 100 / $total-columns !default; // calculates individual column width based off of # of columns
$column-margin: 4% !default; // space between columns

// Misc
$global-radius: 4px !default;


.container {
  position: relative;
  width: 100%;
  max-width: $container-width;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

// For devices larger than 400px
@media (#{$bp-mobile}) {
  .container {
    width: $container-width-mobile;
    padding: 0;
  }
}

// For devices larger than 768px
@media (#{$bp-desktop}) {
  .container {
    width: $container-width-desktop;
  }
  .column,
  .columns {
    margin-left: $column-margin;
  }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }

  .one.column,
  .one.columns          { width: grid-column-width(1);  }
  .two.columns          { width: grid-column-width(2);  }
  .three.columns        { width: grid-column-width(3);  }
  .four.columns         { width: grid-column-width(4);  }
  .five.columns         { width: grid-column-width(5);  }
  .six.columns          { width: grid-column-width(6);  }
  .seven.columns        { width: grid-column-width(7);  }
  .eight.columns        { width: grid-column-width(8);  }
  .nine.columns         { width: grid-column-width(9);  }
  .ten.columns          { width: grid-column-width(10); }
  .eleven.columns       { width: grid-column-width(11); }
  .twelve.columns       { width: 100%; margin-left: 0;  }

  .one-third.column     { width: grid-column-width(4);  }
  .two-thirds.column    { width: grid-column-width(8);  }

  .one-half.column      { width: grid-column-width(6);  }


  // Offsets
  .offset-by-one.column,
  .offset-by-one.columns       { margin-left: grid-offset-length(1);  }
  .offset-by-two.column,
  .offset-by-two.columns       { margin-left: grid-offset-length(2);  }
  .offset-by-three.column,
  .offset-by-three.columns     { margin-left: grid-offset-length(3);  }
  .offset-by-four.column,
  .offset-by-four.columns      { margin-left: grid-offset-length(4);  }
  .offset-by-five.column,
  .offset-by-five.columns      { margin-left: grid-offset-length(5);  }
  .offset-by-six.column,
  .offset-by-six.columns       { margin-left: grid-offset-length(6);  }
  .offset-by-seven.column,
  .offset-by-seven.columns     { margin-left: grid-offset-length(7);  }
  .offset-by-eight.column,
  .offset-by-eight.columns     { margin-left: grid-offset-length(8);  }
  .offset-by-nine.column,
  .offset-by-nine.columns      { margin-left: grid-offset-length(9);  }
  .offset-by-ten.column,
  .offset-by-ten.columns       { margin-left: grid-offset-length(10); }
  .offset-by-eleven.column,
  .offset-by-eleven.columns    { margin-left: grid-offset-length(11); }


  .offset-by-one-third.column,
  .offset-by-one-third.columns  { margin-left: grid-offset-length(4);  }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns { margin-left: grid-offset-length(8);  }

  .offset-by-one-half.column,
  .offset-by-one-half.column   { margin-left: grid-offset-length(6);  }

  // Push & Pull
  .push-by-one.column,
  .push-by-one.columns       { position:relative; left: grid-offset-length(1);  }
  .push-by-two.column,
  .push-by-two.columns       { position:relative; left: grid-offset-length(2);  }
  .push-by-three.column,
  .push-by-three.columns     { position:relative; left: grid-offset-length(3);  }
  .push-by-four.column,
  .push-by-four.columns      { position:relative; left: grid-offset-length(4);  }
  .push-by-five.column,
  .push-by-five.columns      { position:relative; left: grid-offset-length(5);  }
  .push-by-six.column,
  .push-by-six.columns       { position:relative; left: grid-offset-length(6);  }
  .push-by-seven.column,
  .push-by-seven.columns     { position:relative; left: grid-offset-length(7);  }
  .push-by-eight.column,
  .push-by-eight.columns     { position:relative; left: grid-offset-length(8);  }
  .push-by-nine.column,
  .push-by-nine.columns      { position:relative; left: grid-offset-length(9);  }
  .push-by-ten.column,
  .push-by-ten.columns       { position:relative; left: grid-offset-length(10); }
  .push-by-eleven.column,
  .push-by-eleven.columns    { position:relative; left: grid-offset-length(11); }

  .pull-by-one.column,
  .pull-by-one.columns       { position:relative; left: -grid-offset-length(1);  }
  .pull-by-two.column,
  .pull-by-two.columns       { position:relative; left: -grid-offset-length(2);  }
  .pull-by-three.column,
  .pull-by-three.columns     { position:relative; left: -grid-offset-length(3);  }
  .pull-by-four.column,
  .pull-by-four.columns      { position:relative; left: -grid-offset-length(4);  }
  .pull-by-five.column,
  .pull-by-five.columns      { position:relative; left: -grid-offset-length(5);  }
  .pull-by-six.column,
  .pull-by-six.columns       { position:relative; left: -grid-offset-length(6);  }
  .pull-by-seven.column,
  .pull-by-seven.columns     { position:relative; left: -grid-offset-length(7);  }
  .pull-by-eight.column,
  .pull-by-eight.columns     { position:relative; left: -grid-offset-length(8);  }
  .pull-by-nine.column,
  .pull-by-nine.columns      { position:relative; left: -grid-offset-length(9);  }
  .pull-by-ten.column,
  .pull-by-ten.columns       { position:relative; left: -grid-offset-length(10); }
  .pull-by-eleven.column,
  .pull-by-eleven.columns    { position:relative; left: -grid-offset-length(11); }

}

// Utils
//––––––––––––––––––––––––––––––––––––––––––––––––––

// Self Clearing Goodness

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

// Visibility
.hidden-desktop{
    @media (#{$bp-desktop}) {
        display:none;
    }
}
.hidden-mobile{
    @media (#{$bp-mobile}) {
        display:none;
    }
}