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
    // Firefox grid fix for whatever reason
    min-height: 0
    min-width: 0


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

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

.grid--center
    align-items: center

.grid--justifycenter
    justify-content: 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

@media $breakpoint1
    .grid-small--gutters
        margin: -($gutter-space) 0 $gutter-space (-($gutter-space))

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

@media $breakpoint2
    .grid-medium--gutters
        margin: -($gutter-space) 0 $gutter-space (-($gutter-space))

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

@media $breakpoint3
    .grid-large--gutters
        margin: -($gutter-space) 0 $gutter-space (-($gutter-space))

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


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

.grid--full
    > .grid__col
        flex: 0 0 100%

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

.grid--2of6,
.grid--third
    > .grid__col
        flex: 0 0 33.3333%

.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 $breakpoint1
    .grid-small--fit
        > .grid__col
            flex: 1

    .grid-small--full
        > .grid__col
            flex: 0 0 100%

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

    .grid-small--2of6,
    .grid-small--third
        > .grid__col
            flex: 0 0 33.3333%

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

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

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


@media $breakpoint2
    .grid-medium--fit
        > .grid__col
            flex: 1

    .grid-medium--full
        > .grid__col
            flex: 0 0 100%

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

    .grid-medium--2of6,
    .grid-medium--third
        > .grid__col
            flex: 0 0 33.3333%

    .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--fit
        > .grid__col
            flex: 1

    .grid-large--full
        > .grid__col
            flex: 0 0 100%

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

    .grid-large--2of6,
    .grid-large--third
        > .grid__col
            flex: 0 0 33.3333%

    .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%