simple-flex.scss

/**
 * Default variables and helper mixins
 */

@import 
    'defaults',
    'mixins';


/**
 * Grid scaffolding
 */

.container {
    max-width: $grid-max-width;
    margin: 0 auto;
    padding: 0 $grid-gutter;

    &[class*="container--"] {
        display: flex;
        flex-wrap: wrap;
    }

    @each $breakpoint in $breakpoints {
        $name: nth($breakpoint, 1);
        $declaration: nth($breakpoint, 2);
        @media only screen and #{$declaration} {
            &.container--#{$name}-start {
                justify-content: flex-start;
                text-align: start;
            }
            &.container--#{$name}-center {
                justify-content: center;
            }
            &.container--#{$name}-end {
                justify-content: flex-end;
                text-align: end;
            }
            &.container--#{$name}-top {
                align-items: flex-start;
            }
            &.container--#{$name}-middle {
                align-items: center;
            }
            &.container--#{$name}-bottom {
                align-items: flex-end;
            }
            &.container--#{$name}-around {
                justify-content: space-around;
            }
            &.container--#{$name}-between {
                justify-content: space-between;
            }
            &.container--#{$name}-row {
                flex-direction: row;
            }
            &.container--#{$name}-row-reverse {
                flex-direction: row-reverse;
            }
            &.container--#{$name}-column {
                flex-direction: column;
            }
            &.container--#{$name}-column-reverse {
                flex-direction: column-reverse;
            }
        }
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -#{$grid-gutter};
    @each $breakpoint in $breakpoints {
        $name: nth($breakpoint, 1);
        $declaration: nth($breakpoint, 2);
        @media only screen and #{$declaration} {
            &.row--#{$name}-gutterless {
                margin-left: 0;
            }
            &.row--#{$name}-start {
                justify-content: flex-start;
                text-align: start;
            }
            &.row--#{$name}-center {
                justify-content: center;
                text-align: center;
            }
            &.row--#{$name}-end {
                justify-content: flex-end;
                text-align: end;
            }
            &.row--#{$name}-top {
                align-items: flex-start;
            }
            &.row--#{$name}-middle {
                align-items: center;
            }
            &.row--#{$name}-bottom {
                align-items: flex-end;
            }
            &.row--#{$name}-around {
                justify-content: space-around;
            }
            &.row--#{$name}-between {
                justify-content: space-between;
            }
            &.row--#{$name}-row {
                flex-direction: row;
            }
            &.row--#{$name}-row-reverse {
                flex-direction: row-reverse;
            }
            &.row--#{$name}-column {
                flex-direction: column;
            }
            &.row--#{$name}-column-reverse {
                flex-direction: column-reverse;
            }
        }
    }
}

.col {
    padding-left: $grid-gutter;
    box-sizing: border-box;
    .row--gutterless & {
        padding-left: 0;
    }
}



/**
 * Columns generator
 */

@each $breakpoint in $breakpoints {
    $name: nth($breakpoint, 1);
    $declaration: nth($breakpoint, 2);

    @media only screen and #{$declaration} {
        @include grid-loop($name);
    }
}