Ass kicking grid system

akgs.scss

/////////////
// Options //
/////////////

$gutter: 6px;
$color: #D5D5D5;

$bg-img: "http://i.imgur.com/3YfrKG7.png";
$dropdown-img: "http://i.imgur.com/kXsFVER.png";

////////////
// Mixins //
////////////

@mixin breakpoint($display) {
  @if $display == widescreen {
    @media (min-width: 1224px) { @content; }
  }
  @else if $display == desktop {
    @media (min-width: 769px) { @content; }
  }
  @else if $display == tablet {
    @media (min-width: 481px) { @content; }
  }
  @else if $display == mobile {
    @media (min-width: 320px)  { @content; }
  }
  @else if $display == mini {
    @media (min-width: 0px)  { @content; }
  }
}

@mixin placeholder {
  &.placeholder { @content }
  &:-moz-placeholder { @content }
  &::-webkit-input-placeholder { @content }
}

@mixin shadow($context) {
  -webkit-box-shadow: $context;
  -moz-box-shadow: $context;
  box-shadow: $context;
}

///////////
// Rules //
///////////

* {
  @include box-sizing(border-box);
  margin:0;
  padding:0;
  text-align: center;
  font-weight:bold;
  outline:none;
  word-wrap:break-word; }

img{
  width:100%;max-width:100%; }

body,html{
  font-family: tahoma;
  float: left;
  padding: $gutter*2;
  background:#ecf0f1;
  background-image: url($bg-img); }

h1 {
  font-size: $gutter*5.3333333333;
  font-weight: 900;
  margin-bottom: $gutter*4 !important;
  color: #2c3e50; }

h2 {
  font-size: $gutter*4.3333333333;
  font-weight: 700;
  color: #34495e;
  text-align: left; }

h3 {
  font-size: $gutter*4;
  font-weight: 700; }

h4 {
  font-size: $gutter*3;
  font-weight: 500;
  margin-top: $gutter*1.5; }

h5 {
  font-size: $gutter*2.6666666667;
  font-weight: 500;
  text-transform: uppercase; }

h6 {
  font-size: $gutter*2.1666666667;
  text-weight: 500;
  text-transform: uppercase; }

label {
  float: left;
  margin-bottom: $gutter;
  color: #7f8c8d; }

input {
  text-align: left;
  width:100%; }

.row{
  float: left;
  width: 100%;
  //margin-bottom: $gutter;
  @include breakpoint(mini)       {
    margin-bottom: $gutter;
  }
  @include breakpoint(mobile)     {
    margin-bottom: $gutter/2;
  }
  @include breakpoint(tablet)     {
    margin-bottom: $gutter/1.5;
  }
  @include breakpoint(desktop)    {
    margin-bottom: $gutter;
  }
  @include breakpoint(widescreen) {
    margin-bottom: $gutter*1.5;
  }

    & [class*="col"] {
      position: relative;
      word-wrap: break-word;

      &:after {
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        //background: $color;
        //@include background-image(linear-gradient(white, #ccc));
        z-index: -999;
        //box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        //left: $gutter/2;
        //right: $gutter/2;
        
        @include breakpoint(mini)       {
          left:  0;
          right: 0;
          margin-bottom: $gutter*2;
        }
        @include breakpoint(mobile)     {
          left: ($gutter/2)/2;
          right: ($gutter/2)/2;
        }
        @include breakpoint(tablet)     {
          left: ($gutter/2)/1.5;
          right: ($gutter/2)/1.5;
        }
        @include breakpoint(desktop)    {
          left: $gutter/2;
          right: $gutter/2;
        }
        @include breakpoint(widescreen) {
          left: ($gutter/2)*1.5;
          right: ($gutter/2)*1.5;
        }
         

      }

      &:first-of-type {
        &:after {
          left: 0;
        }
      }
      
      &:last-of-type {
        &:after {
          right: 0;
      }
          
      }

    }//col

}//row

@for $i from 1 through 12 {

  .padding_#{$i} {
    padding: $gutter*$i;
  }
}

@for $i from 1 through 12 {
  .col_#{$i} { 
    float: left;
    
    @include single-transition(padding, 0.5s, ease-out);

    @include breakpoint(mini)       {
      padding: 0;
      width: 100/1+0%;
    }
    @include breakpoint(mobile)     {
      padding: $gutter/2;
    }
    @include breakpoint(tablet)     {
      padding: $gutter/1.5;
      width: 100/1+0%;
    }
    @include breakpoint(desktop)    {
      padding: $gutter;
      width: 100/$i+0%;
    }
    @include breakpoint(widescreen) {
      padding: $gutter*1.5;
    }
  }
}

askgs.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: center;
  font-weight: bold;
  outline: none;
  word-wrap: break-word;
}

img {
  width: 100%;
  max-width: 100%;
}

body, html {
  font-family: tahoma;
  float: left;
  padding: 12px;
  background: #ecf0f1;
  background-image: url("http://i.imgur.com/3YfrKG7.png");
}

h1 {
  font-size: 32.0px;
  font-weight: 900;
  margin-bottom: 24px !important;
  color: #2c3e50;
}

h2 {
  font-size: 26.0px;
  font-weight: 700;
  color: #34495e;
  text-align: left;
}

h3 {
  font-size: 24px;
  font-weight: 700;
}

h4 {
  font-size: 18px;
  font-weight: 500;
  margin-top: 9px;
}

h5 {
  font-size: 16.0px;
  font-weight: 500;
  text-transform: uppercase;
}

h6 {
  font-size: 13.0px;
  text-weight: 500;
  text-transform: uppercase;
}

label {
  float: left;
  margin-bottom: 6px;
  color: #7f8c8d;
}

input {
  text-align: left;
  width: 100%;
}

.row {
  float: left;
  width: 100%;
}
@media (min-width: 0px) {
  .row {
    margin-bottom: 6px;
  }
}
@media (min-width: 320px) {
  .row {
    margin-bottom: 3px;
  }
}
@media (min-width: 481px) {
  .row {
    margin-bottom: 4px;
  }
}
@media (min-width: 769px) {
  .row {
    margin-bottom: 6px;
  }
}
@media (min-width: 1224px) {
  .row {
    margin-bottom: 9px;
  }
}
.row [class*="col"] {
  position: relative;
  word-wrap: break-word;
}
.row [class*="col"]:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  z-index: -999;
}
@media (min-width: 0px) {
  .row [class*="col"]:after {
    left: 0;
    right: 0;
    margin-bottom: 12px;
  }
}
@media (min-width: 320px) {
  .row [class*="col"]:after {
    left: 1.5px;
    right: 1.5px;
  }
}
@media (min-width: 481px) {
  .row [class*="col"]:after {
    left: 2px;
    right: 2px;
  }
}
@media (min-width: 769px) {
  .row [class*="col"]:after {
    left: 3px;
    right: 3px;
  }
}
@media (min-width: 1224px) {
  .row [class*="col"]:after {
    left: 4.5px;
    right: 4.5px;
  }
}
.row [class*="col"]:first-of-type:after {
  left: 0;
}
.row [class*="col"]:last-of-type:after {
  right: 0;
}

.padding_1 {
  padding: 6px;
}

.padding_2 {
  padding: 12px;
}

.padding_3 {
  padding: 18px;
}

.padding_4 {
  padding: 24px;
}

.padding_5 {
  padding: 30px;
}

.padding_6 {
  padding: 36px;
}

.padding_7 {
  padding: 42px;
}

.padding_8 {
  padding: 48px;
}

.padding_9 {
  padding: 54px;
}

.padding_10 {
  padding: 60px;
}

.padding_11 {
  padding: 66px;
}

.padding_12 {
  padding: 72px;
}

.col_1 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_1 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_1 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_1 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_1 {
    padding: 6px;
    width: 100%;
  }
}
@media (min-width: 1224px) {
  .col_1 {
    padding: 9px;
  }
}

.col_2 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_2 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_2 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_2 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_2 {
    padding: 6px;
    width: 50%;
  }
}
@media (min-width: 1224px) {
  .col_2 {
    padding: 9px;
  }
}

.col_3 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_3 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_3 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_3 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_3 {
    padding: 6px;
    width: 33.33333%;
  }
}
@media (min-width: 1224px) {
  .col_3 {
    padding: 9px;
  }
}

.col_4 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_4 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_4 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_4 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_4 {
    padding: 6px;
    width: 25%;
  }
}
@media (min-width: 1224px) {
  .col_4 {
    padding: 9px;
  }
}

.col_5 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_5 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_5 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_5 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_5 {
    padding: 6px;
    width: 20%;
  }
}
@media (min-width: 1224px) {
  .col_5 {
    padding: 9px;
  }
}

.col_6 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_6 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_6 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_6 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_6 {
    padding: 6px;
    width: 16.66667%;
  }
}
@media (min-width: 1224px) {
  .col_6 {
    padding: 9px;
  }
}

.col_7 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_7 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_7 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_7 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_7 {
    padding: 6px;
    width: 14.28571%;
  }
}
@media (min-width: 1224px) {
  .col_7 {
    padding: 9px;
  }
}

.col_8 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_8 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_8 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_8 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_8 {
    padding: 6px;
    width: 12.5%;
  }
}
@media (min-width: 1224px) {
  .col_8 {
    padding: 9px;
  }
}

.col_9 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_9 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_9 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_9 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_9 {
    padding: 6px;
    width: 11.11111%;
  }
}
@media (min-width: 1224px) {
  .col_9 {
    padding: 9px;
  }
}

.col_10 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_10 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_10 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_10 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_10 {
    padding: 6px;
    width: 10%;
  }
}
@media (min-width: 1224px) {
  .col_10 {
    padding: 9px;
  }
}

.col_11 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_11 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_11 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_11 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_11 {
    padding: 6px;
    width: 9.09091%;
  }
}
@media (min-width: 1224px) {
  .col_11 {
    padding: 9px;
  }
}

.col_12 {
  float: left;
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -o-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}
@media (min-width: 0px) {
  .col_12 {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 320px) {
  .col_12 {
    padding: 3px;
  }
}
@media (min-width: 481px) {
  .col_12 {
    padding: 4px;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .col_12 {
    padding: 6px;
    width: 8.33333%;
  }
}
@media (min-width: 1224px) {
  .col_12 {
    padding: 9px;
  }
}