Here is the complete grid css file that I'm using. It is modified from the original bootstrap. Different class names. It's wrapped in a media query so that the grid only applies above 768px. It gives you a 12 grid system.
@media only screen and (min-width: 768px) {
/* Grids only applied to desktop and tablet
---------------------------------------------------------------------- ------------------------------*/
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12
{
display: inline;
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.127659574%;
*margin-left: 2.0744680846382977%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.row [class*="col"]:first-child {
margin-left: 0;
}
.row .col12 {
width: 99.99999998999999%;
*width: 99.94680850063828%;
}
.row .col11 {
width: 91.489361693%;
*width: 91.4361702036383%;
}
.row .col10 {
width: 82.97872339599999%;
*width: 82.92553190663828%;
}
.row .col9 {
width: 74.468085099%;
*width: 74.4148936096383%;
}
.row .col8 {
width: 65.95744680199999%;
*width: 65.90425531263828%;
}
.row .col7 {
width: 57.446808505%;
*width: 57.3936170156383%;
}
.row .col6 {
width: 48.93617020799999%;
*width: 48.88297871863829%;
}
.row .col5 {
width: 40.425531911%;
*width: 40.3723404216383%;
}
.row .col4 {
width: 31.914893614%;
*width: 31.8617021246383%;
}
.row .col3 {
width: 23.404255317%;
*width: 23.3510638276383%;
}
.row .col2 {
width: 14.89361702%;
*width: 14.8404255306383%;
}
.row .col1 {
width: 6.382978723%;
*width: 6.329787233638298%;
}
/* Prefix Extra Space >> 12 Columns
---------------------------------------------------------------------- ------------------------------*/
.prefix_1 {
padding-left: 8.333%;
}
.prefix_2 {
padding-left: 16.667%;
}
.prefix_3 {
padding-left: 25.0%;
}
.prefix_4 {
padding-left: 33.333%;
}
.prefix_5 {
padding-left: 41.667%;
}
.prefix_6 {
padding-left: 50.0%;
}
.prefix_7 {
padding-left: 58.333%;
}
.prefix_8 {
padding-left: 66.667%;
}
.prefix_9 {
padding-left: 75.0%;
}
.prefix_10 {
padding-left: 83.333%;
}
.prefix_11 {
padding-left: 91.667%;
}
/* Suffix Extra Space >> 12 Columns
---------------------------------------------------------------------- ------------------------------*/
.suffix_1 {
padding-right: 8.333%;
}
.suffix_2 {
padding-right: 16.667%;
}
.suffix_3 {
padding-right: 25.0%;
}
.suffix_4 {
padding-right: 33.333%;
}
.suffix_5 {
padding-right: 41.667%;
}
.suffix_6 {
padding-right: 50.0%;
}
.suffix_7 {
padding-right: 58.333%;
}
.suffix_8 {
padding-right: 66.667%;
}
.suffix_9 {
padding-right: 75.0%;
}
.suffix_10 {
padding-right: 83.333%;
}
.suffix_11 {
padding-right: 91.667%;
}
/* Push Space >> 12 Columns
---------------------------------------------------------------------- ------------------------------*/
.push_1 {
left: 8.333%;
}
.push_2 {
left: 16.667%;
}
.push_3 {
left: 25.0%;
}
.push_4 {
left: 33.333%;
}
.push_5 {
left: 41.667%;
}
.push_6 {
left: 50.0%;
}
.push_7 {
left: 58.333%;
}
.push_8 {
left: 66.667%;
}
.push_9 {
left: 75.0%;
}
.push_10 {
left: 83.333%;
}
.push_11 {
left: 91.667%;
}
/* Pull Space >> 12 Columns
---------------------------------------------------------------------- ------------------------------*/
.pull_1 {
left: -8.333%;
}
.pull_2 {
left: -16.667%;
}
.pull_3 {
left: -25.0%;
}
.pull_4 {
left: -33.333%;
}
.pull_5 {
left: -41.667%;
}
.pull_6 {
left: -50.0%;
}
.pull_7 {
left: -58.333%;
}
.pull_8 {
left: -66.667%;
}
.pull_9 {
left: -75.0%;
}
.pull_10 {
left: -83.333%;
}
.pull_11 {
left: -91.667%;
}
}
/* Clear Floated Elements
---------------------------------------------------------------------- ------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning -the-clearfix-css-hack */
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
.row {
display: inline-block;
}
* html .row {
height: 1%;
}
.row {
display: block;
}
.row .first {
margin-left: 0;
}
