_skeleton.scss

/*
* Skeleton-SASS V1.0
*
* Branched off of:
* Copyright 2012 by Michael Lazer-Walker
* https://github.com/lazerwalker/Skeleton-Sass
*
* Based off of Skeleton v1.1:
* https://github.com/dhgamache/Skeleton
*
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

/* #Variable Definitions
================================================== */
    $base-width: 960px;
    $tablet-width: 768px;
    $mobile-portrait-width: 300px;
    $mobile-landscape-width: 420px;

    $num-columns: 16;
    $margin: 10px;
    $border-width: 0;
  

/* Grid
================================================== */

    @function skeleton-third-width($num: 1, $width: $base-width, $this-border-width: $border-width ) {
        @return $num * ($width / 3) - (2 * $margin) - $this-border-width;
    }

    @function skeleton-column-width($num: 1, $width: $base-width, $this-border-width: $border-width) {
        @return ($num * ($width / $num-columns)) - (2 * $margin) - $this-border-width ;
    }

    @mixin container {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: $base-width;

        &:after {
            content: "\0020";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden; }

        @media only screen and (min-width: 768px) and (max-width: 959px) {
        //    width: $tablet-width; 
        }

        @media only screen and (max-width: 767px) {
        //    width: $mobile-portrait-width; 
        }

        @media only screen and (min-width: 480px) and (max-width: 767px) {
        //    width: $mobile-landscape-width; 
        }
    }

    @mixin column {
        float: left;
        display: inline;
        margin-left: $margin;
        margin-right: $margin;

        @media only screen and (max-width: 767px) {
          // margin: 0; 
        }
    }

    @mixin row {
        @include clearfix;
        margin-bottom: 2 * $margin;
   }


    @mixin alpha { margin-left: 0; }
    @mixin omega { margin-right: 0; }

    @mixin columns($num: 1, $this-border-width: $border-width) {
        @include column;
        width: skeleton-column-width($num, $base-width, $this-border-width);

        @media only screen and (min-width: 768px) and (max-width: 959px) {
            //width: skeleton-column-width($num, $tablet-width); 
        }

        @media only screen and (max-width: 767px) {
            //width: $mobile-portrait-width; 
        }

        @media only screen and (min-width: 480px) and (max-width: 767px) {
            //width: $mobile-landscape-width; 
        } 
    }

    @mixin third($num: 1, $this-border-width: $border-width) {
        @include column;
        width: skeleton-third-width($num, $base-width, $this-border-width);

        @media only screen and (min-width: 768px) and (max-width: 959px) {
            //width: skeleton-third-width($num, $tablet-width); 
        }

        @media only screen and (max-width: 767px) {
            //width: $mobile-portrait-width; 
        }

        @media only screen and (min-width: 480px) and (max-width: 767px) {
            //width: $mobile-landscape-width; 
        }
    }

    @mixin offset($num: 1) {
        $offset: 2 * $margin;
        padding-left: skeleton-column-width($num, $base-width) + $offset;

        @media only screen and (min-width: 768px) and (max-width: 959px) {
            //padding-left: skeleton-column-width($num, $tablet-width) + $offset; 
        }

        @media only screen and (max-width: 767px) {
            //padding-left: 0; 
        }
    }


  /*-- replicate original skeleton classes for backward compat --*/
  .container {
    @include container;
  }

    .container .column,
    .container .columns
    {
      @include column;
    }
    .row {
      @include row;
    }


    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { @include columns(1); }
    .container .two.columns                     { @include columns(2); }
    .container .three.columns                   { @include columns(3); }
    .container .four.columns                    { @include columns(4); }
    .container .five.columns                    { @include columns(5); }
    .container .six.columns                     { @include columns(6); }
    .container .seven.columns                   { @include columns(7); }
    .container .eight.columns                   { @include columns(8); }
    .container .nine.columns                    { @include columns(9); }
    .container .ten.columns                     { @include columns(10);}
    .container .eleven.columns                  { @include columns(11); }
    .container .twelve.columns                  { @include columns(12); }

    .container .thirteen.columns                {  @include columns(13); }
    .container .fourteen.columns                {  @include columns(14); }
    .container .fifteen.columns                 {  @include columns(15); }
    .container .sixteen.columns                 {  @include columns(16); }

    .container .one-third.column                { @include third(1); }
    .container .two-thirds.column               { @include third(2); }

    /* Offsets */
    .container .offset-by-one                   { @include offset(1);}
    .container .offset-by-two                   { @include offset(2);}
    .container .offset-by-three                 { @include offset(3);}
    .container .offset-by-four                  { @include offset(4);}
    .container .offset-by-five                  { @include offset(5);}
    .container .offset-by-six                   { @include offset(6);}
    .container .offset-by-seven                 { @include offset(7);}
    .container .offset-by-eight                 { @include offset(8);}
    .container .offset-by-nine                  { @include offset(9);}
    .container .offset-by-ten                   { @include offset(10);}
    .container .offset-by-eleven                { @include offset(11);}
    .container .offset-by-twelve                { @include offset(12);}
    .container .offset-by-thirteen              { @include offset(13);}
    .container .offset-by-fourteen              { @include offset(14);}
    .container .offset-by-fifteen               { @include offset(15);}

    /* Nested Column Classes */
    /* Had to add container b/c it was being overriden */
    .column.alpha, .columns.alpha, .container .columns.alpha, .container .column.alpha  { @include alpha; }
    .column.omega, .columns.omega , .container .columns.omega, .container .column.omega { @include omega; }