Simple 12 Grid Column

grid.styl

.grid
    clear both
    padding 0px
    margin 0px
    display block
    zoom 1 /* For IE 6/7 */

.grid:before,
.grid:after
    content ""
    display table

.grid:after
    clear both

/*  COLUMN SETUP  */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12
    display block
    float left
    margin 0
    padding 0 .8% 0 .8%

/*  GRID OF TWELVE  */
.col-12
    width 100%
.col-11
    width 91.66%
.col-10
    width 83.33%
.col-9
    width 75%
.col-8
    width 66.66%
.col-7
    width 58.33%
.col-6
    width 50%
.col-5
    width 41.66%
.col-4
    width 33.33%
.col-3
    width 25%
.col-2
    width 16.66%
.col-1
    width 8.333%

.offset-11
    margin-left 91.66%
.offset-10
    margin-left 83.33%
.offset-9
    margin-left 75%
.offset-8
    margin-left 66.66%
.offset-7
    margin-left 58.33%
.offset-6
    margin-left 50%
.offset-5
    margin-left 41.66%
.offset-4
    margin-left 33.33%
.offset-3
    margin-left 25%
.offset-2
    margin-left 16.66%
.offset-1
    margin-left 8.333%

@media all and (max-width 480px)
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12
        width 100%