blog/_src/_assets/styl/grid.styl

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


*,
*:before,
*:after
    box-sizing: border-box

//
// Base
//
.grid
    display: flex
    flex-wrap: wrap
    list-style: none
    margin: 0
    padding: 0

.grid__col
    flex: 1


//
// Alignment per row
//
.grid--top
    align-items: flex-start

.grid--bottom
    align-items: flex-end

.grid--center
    align-items: center


//
// Alignment per cell
//
.grid_col--top
    align-self: flex-start

.grid_col--bottom
    align-self: flex-end

.grid_col--center
    align-self: center


//
// Gutters
//
.grid--gutters
    margin: -($gutter-space) 0 $gutter-space (-($gutter-space))

    > .grid__col
        padding: $gutter-space 0 0 $gutter-space


//
// Columns
//
.grid
    > .grid__col
        flex: 1

.grid--1of6
    > .grid__col
        flex: 0 0 16.5%

.grid--2of6
    > .grid__col
        flex: 0 0 33%

.grid--3of6,
.grid--half
    > .grid__col
        flex: 0 0 50%

.grid--4of6
    > .grid__col
        flex: 0 0 66%

.grid--5of6
    > .grid__col
        flex: 0 0 82.5%

@media $breakpoint2
    .grid-medium--1of6
        > .grid__col
            flex: 0 0 16.5%

    .grid-medium--2of6
        > .grid__col
            flex: 0 0 33%

    .grid-medium--3of6,
    .grid-medium--half
        > .grid__col
            flex: 0 0 50%

    .grid-medium--4of6
        > .grid__col
            flex: 0 0 66%

    .grid-medium--5of6
        > .grid__col
            flex: 0 0 82.5%

@media $breakpoint3
    .grid-large--1of6
        > .grid__col
            flex: 0 0 16.5%

    .grid-large--2of6
        > .grid__col
            flex: 0 0 33%

    .grid-large--3of6,
    .grid-large--half
        > .grid__col
            flex: 0 0 50%

    .grid-large--4of6
        > .grid__col
            flex: 0 0 66%

    .grid-large--5of6
        > .grid__col
            flex: 0 0 82.5%