blog/_src/_assets/styl/grid.styl

//
// kremalicious3
// --------------
// Grid
//


// Prevents padding to be added
*
    box-sizing: border-box

// 320px and up
.container
    padding: 0 7%
    width: 100%

.row
    margin-top: $line-height-computed
    margin-bottom: $line-height-computed

.col1,
.col2,
.col3,
.col4,
.col5,
.col6
    width: 100%
    margin-left: 0
    // ensures empty columns won't collapse
    min-height: 1px

// clear
.container,
.row
    @extend .clearfix

@media $breakpoint2
    .container
        padding: 0 15%

    .row
        max-width: 35em
        margin: ($line-height-computed*2) auto
        padding-left: 0
        padding-right: 0

    .col1,
    .col2,
    .col3,
    .col4,
    .col5,
    .col6
        float: left
        margin-left: 4%

    .col1:first-child,
    .col2:first-child,
    .col3:first-child,
    .col4:first-child,
    .col5:first-child,
    .col6,
    .col3:nth-child(2n+3),
    .col2:nth-child(3n+4),
    .col1:nth-child(6n+7)
        margin-left: 0
        clear: both

    .col1
        width: 13%
    .col2
        width: 30.6%
    .col3
        width: 48%
    .col4
        width: 65%
    .col5
        width: 82%
    .col6
        width: 100%