SCSS grid using flexbox

grid.scss

// Grid system based in flexbox.
// OR wait until css grid covers all our browsers! :(

// overridable values based on grid desires.
$cols: 12;
$gutter-width: 30px;
$outer-margin: 15px;

$gutter-compensation: ($gutter-width * 0.5) * -1;
$half-gutter-width: $gutter-width / 2;

// BS 3.x breakpoints:
// https://github.com/twbs/bootstrap-sass/blob/v3.3.7/assets/stylesheets/bootstrap/_variables.scss#L292
$xs-min: 480;
$sm-min: 768;
$md-min: 992;
$lg-min: 1200;

$screen-xs-min: #{$xs-min}px;
$screen-sm-min: #{$sm-min}px;
$screen-md-min: #{$md-min}px;
$screen-lg-min: #{$lg-min}px;

$container-sm: $sm-min + $gutter-width;
$container-md: $md-min + $gutter-width;
$container-lg: $lg-min + $gutter-width;

.container-fluid, .container {
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    @extend %clearfix;
}

.container-fluid {
    padding-right: $outer-margin;
    padding-left: $outer-margin;
}

.full-height {
    height: 100%;
}

.text-center{
    text-align: center;
}

.row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: $gutter-compensation;
    margin-left: $gutter-compensation;
    .reverse {
        flex-direction: row-reverse;
    }
}

.col.reverse {
    flex-direction: column-reverse;
}

@function calc-grid-width($col, $cols) {
    @return 100% / $cols * $col;
}

@mixin col(
    $col,
    $cols,
    $padding-width: $half-gutter-width,
    $offset: false
) {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: $half-gutter-width;
    padding-left: $half-gutter-width;
    $width: calc-grid-width($col, $cols);
    @if $offset == true {
        margin-left: $width;

    } @else {
        flex-basis: $width;
        max-width: $width;
    }
}

.col-xs {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: $half-gutter-width;
    padding-left: $half-gutter-width;
}

@for $col from 1 through $cols {
    .col-xs-#{$col} {
        @include col($col, $cols);
    }
}

@for $col from 1 through $cols {
    .col-xs-offset-#{$col} {
        @include col($col, $cols, $offset: true);
    }
}

@media only screen and (min-width: $screen-sm-min) {
    .container {
        width: $container-sm;
    }

    .col-sm {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
    }

    @for $col from 1 through $cols {
        .col-sm-#{$col} {
            @include col($col, $cols);
        }
    }

    @for $col from 1 through $cols {
        .col-sm-offset-#{$col} {
            @include col($col, $cols, $offset: true);
        }
    }
}

@media only screen and (min-width: $screen-md-min) {
    .container {
        width: $container-md;
    }

    .col-md {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
    }

    @for $col from 1 through $cols {
        .col-md-#{$col} {
            @include col($col, $cols);
        }
    }

    @for $col from 1 through $cols {
        .col-md-offset-#{$col} {
            @include col($col, $cols, $offset: true);
        }
    }
}

@media only screen and (min-width: $screen-lg-min) {
    .container {
        width: $container-lg;
    }

    .col-lg {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
    }

    @for $col from 1 through $cols {
        .col-lg-#{$col} {
            @include col($col, $cols);
        }
    }

    @for $col from 1 through $cols {
        .col-lg-offset-#{$col} {
            @include col($col, $cols, $offset: true);
        }
    }
}

// Helpers for alignment using flex justify-content
$screen-sizes: (
    xs: null,
    sm: $screen-sm-min,
    md: $screen-md-min,
    lg: $screen-lg-min
);
@each $size, $screen-min-width in $screen-sizes {
    @if $screen-min-width {
        @media only screen and (min-width: $screen-min-width) {
            .start-#{$size} {
                justify-content: start;
                text-align: start;
            }

            .center-#{$size} {
                justify-content: center;
                text-align: end;
            }

            .end-#{$size} {
                justify-content: flex-end;
                text-align: end;
            }

            .top-#{$size} {
                align-items: flex-start;
            }

            .middle-#{$size} {
                align-items: center;
            }

            .bottom-#{$size} {
                align-items: flex-end;
            }

            .around-#{$size} {
                justify-content: space-around;
            }

            .between-#{$size} {
                justify-content: space-between;
            }

            .first-#{$size} {
                order: -1;
            }

            .last-#{$size} {
                order: 1;
            }
        }
    } @else {
        .start-#{$size} {
            justify-content: start;
            text-align: start;
        }

        .center-#{$size} {
            justify-content: center;
            text-align: end;
        }

        .end-#{$size} {
            justify-content: flex-end;
            text-align: end;
        }

        .top-#{$size} {
            align-items: flex-start;
        }

        .middle-#{$size} {
            align-items: center;
        }

        .bottom-#{$size} {
            align-items: flex-end;
        }

        .around-#{$size} {
            justify-content: space-around;
        }

        .between-#{$size} {
            justify-content: space-between;
        }

        .first-#{$size} {
            order: -1;
        }

        .last-#{$size} {
            order: 1;
        }
    }
}