skeleton-stylus/stylus/modules/grid.styl

The (un)official stylus Version of Skeleton (2.0.4): A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development

/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/9/2014
* Sass Version by Seth Coelen https://github.com/whatsnewsaes
*/

.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-larger-than-mobile) {
  .container {
    width: $container-width-larger-than-mobile;
    padding: 0;
  }
}

// For devices larger than 550px
@media ($bp-larger-than-phablet) {
  .container {
    width: $container-width-larger-than-phablet;
  }
  .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);  }


}

// Clearing
//––––––––––––––––––––––––––––––––––––––––––––––––––

// Self Clearing Goodness

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