calc-grid.css

/*
* calc-grid.css v1.1 by Joah Gerstenberg
* a 2.8kb bootstrap-esque grid built purely from calc() calls
* support: http://caniuse.com/#feat=calc
*/ 

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  box-sizing: border-box;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
  position: relative;
  box-sizing: border-box;
}

.row::after {
  content: '';
  display:block;
  clear: both;
}

*[class*=col-] {
  padding-right: 15px;
  padding-left: 15px;
  min-height: 1px;
  float: left;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
}

.col-xs-12 { width: 100%; }
.col-xs-11 { width: calc(100%/12*11); }
.col-xs-10 { width: calc(100%/12*10); }
.col-xs-9  { width: calc(100%/12*9);  }
.col-xs-8  { width: calc(100%/12*8);  }
.col-xs-7  { width: calc(100%/12*7);  }
.col-xs-6  { width: calc(100%/12*6);  }
.col-xs-5  { width: calc(100%/12*5);  }
.col-xs-4  { width: calc(100%/12*4);  }
.col-xs-3  { width: calc(100%/12*3);  }
.col-xs-2  { width: calc(100%/12*2);  }
.col-xs-1  { width: calc(100%/12*1);  }

.col-xs-offset-11 { margin-left: calc(100%/12*11); }
.col-xs-offset-10 { margin-left: calc(100%/12*10); }
.col-xs-offset-9  { margin-left: calc(100%/12*9);  }
.col-xs-offset-8  { margin-left: calc(100%/12*8);  }
.col-xs-offset-7  { margin-left: calc(100%/12*7);  }
.col-xs-offset-6  { margin-left: calc(100%/12*6);  }
.col-xs-offset-5  { margin-left: calc(100%/12*5);  }
.col-xs-offset-4  { margin-left: calc(100%/12*4);  }
.col-xs-offset-3  { margin-left: calc(100%/12*3);  }
.col-xs-offset-2  { margin-left: calc(100%/12*2);  }
.col-xs-offset-1  { margin-left: calc(100%/12*1);  }


@media (min-width: 768px) {
.container { width: 750px; }

.col-sm-12 { width: 100%; }
.col-sm-11 { width: calc(100%/12*11); }
.col-sm-10 { width: calc(100%/12*10); }
.col-sm-9  { width: calc(100%/12*9);  }
.col-sm-8  { width: calc(100%/12*8);  }
.col-sm-7  { width: calc(100%/12*7);  }
.col-sm-6  { width: calc(100%/12*6);  }
.col-sm-5  { width: calc(100%/12*5);  }
.col-sm-4  { width: calc(100%/12*4);  }
.col-sm-3  { width: calc(100%/12*3);  }
.col-sm-2  { width: calc(100%/12*2);  }
.col-sm-1  { width: calc(100%/12*1);  }

.col-sm-offset-11 { margin-left: calc(100%/12*11); }
.col-sm-offset-10 { margin-left: calc(100%/12*10); }
.col-sm-offset-9  { margin-left: calc(100%/12*9);  }
.col-sm-offset-8  { margin-left: calc(100%/12*8);  }
.col-sm-offset-7  { margin-left: calc(100%/12*7);  }
.col-sm-offset-6  { margin-left: calc(100%/12*6);  }
.col-sm-offset-5  { margin-left: calc(100%/12*5);  }
.col-sm-offset-4  { margin-left: calc(100%/12*4);  }
.col-sm-offset-3  { margin-left: calc(100%/12*3);  }
.col-sm-offset-2  { margin-left: calc(100%/12*2);  }
.col-sm-offset-1  { margin-left: calc(100%/12*1);  }
}

@media (min-width: 991px) {
.container { width: 970px; }

.col-md-12 { width: 100%; }
.col-md-11 { width: calc(100%/12*11); }
.col-md-10 { width: calc(100%/12*10); }
.col-md-9  { width: calc(100%/12*9);  }
.col-md-8  { width: calc(100%/12*8);  }
.col-md-7  { width: calc(100%/12*7);  }
.col-md-6  { width: calc(100%/12*6);  }
.col-md-5  { width: calc(100%/12*5);  }
.col-md-4  { width: calc(100%/12*4);  }
.col-md-3  { width: calc(100%/12*3);  }
.col-md-2  { width: calc(100%/12*2);  }
.col-md-1  { width: calc(100%/12*1);  }

.col-md-offset-11 { margin-left: calc(100%/12*11); }
.col-md-offset-10 { margin-left: calc(100%/12*10); }
.col-md-offset-9  { margin-left: calc(100%/12*9);  }
.col-md-offset-8  { margin-left: calc(100%/12*8);  }
.col-md-offset-7  { margin-left: calc(100%/12*7);  }
.col-md-offset-6  { margin-left: calc(100%/12*6);  }
.col-md-offset-5  { margin-left: calc(100%/12*5);  }
.col-md-offset-4  { margin-left: calc(100%/12*4);  }
.col-md-offset-3  { margin-left: calc(100%/12*3);  }
.col-md-offset-2  { margin-left: calc(100%/12*2);  }
.col-md-offset-1  { margin-left: calc(100%/12*1);  }
}

@media (min-width: 1200px) { 
.container { width: 1170px; }

.col-lg-12 { width: 100%; }
.col-lg-11 { width: calc(100%/12*11); }
.col-lg-10 { width: calc(100%/12*10); }
.col-lg-9  { width: calc(100%/12*9);  }
.col-lg-8  { width: calc(100%/12*8);  }
.col-lg-7  { width: calc(100%/12*7);  }
.col-lg-6  { width: calc(100%/12*6);  }
.col-lg-5  { width: calc(100%/12*5);  }
.col-lg-4  { width: calc(100%/12*4);  }
.col-lg-3  { width: calc(100%/12*3);  }
.col-lg-2  { width: calc(100%/12*2);  }
.col-lg-1  { width: calc(100%/12*1);  }

.col-lg-offset-11 { margin-left: calc(100%/12*11); }
.col-lg-offset-10 { margin-left: calc(100%/12*10); }
.col-lg-offset-9  { margin-left: calc(100%/12*9);  }
.col-lg-offset-8  { margin-left: calc(100%/12*8);  }
.col-lg-offset-7  { margin-left: calc(100%/12*7);  }
.col-lg-offset-6  { margin-left: calc(100%/12*6);  }
.col-lg-offset-5  { margin-left: calc(100%/12*5);  }
.col-lg-offset-4  { margin-left: calc(100%/12*4);  }
.col-lg-offset-3  { margin-left: calc(100%/12*3);  }
.col-lg-offset-2  { margin-left: calc(100%/12*2);  }
.col-lg-offset-1  { margin-left: calc(100%/12*1);  }
}