Flexboxgrid Sass-Port with Helper classes

_flexboxgrid.scss

// Flexbox Grid Sass Adpatation, forked ot remove external dependency
// Source: https://github.com/klickreflex/flexboxgrid-sass

// Set the number of columns you want to use on your layout.
$grid-columns: 12 !default;
// Set the gutter between columns.
$gutter-width: 1rem !default;
// Set a margin for the container sides.
$outer-margin: 2rem !default;
// Create or remove breakpoints for your project
// Syntax:
// name SIZErem,

// Grid breakpoints
$grid-sm: 48em !default;
$grid-md: 64em !default;
$grid-lg: 75em !default;

$container-sm: 69rem !default;
$container-md: 65rem !default;
$container-lg: 76rem !default;

$grid-breakpoints: (
    ('sm', $grid-sm, $container-sm),
    ('md', $grid-md, $container-md),
    ('lg', $grid-lg, $container-lg)
) !default;

$flexboxgrid-max-width: 1200px !default;


//
// -- Stop editing -- //
//

$gutter-compensation: $gutter-width * .5 * -1;
$half-gutter-width: $gutter-width * .5;

.wrapper {
    box-sizing: border-box;
    max-width: $flexboxgrid-max-width;
    margin: 0 auto;
}

.container {
    margin-right: auto;
    margin-left: auto;
}

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

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

.row.reverse {
    flex-direction: row-reverse;
}

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

@mixin flexboxgrid-sass-col-common {
    box-sizing: border-box;
    // we leave @include flex-basis(auto) out of common because
    // in some spots we need it and some we dont
    // more why here: https://github.com/kristoferjoseph/flexboxgrid/issues/126
    padding-right: $half-gutter-width;
    padding-left: $half-gutter-width;
    // split @include flex(0, 0, auto) into individual props
    flex-grow: 0;
    flex-shrink: 0;
}

$name: xs;

.col-#{$name} {
    @include flexboxgrid-sass-col-common;
    flex-basis: auto;
}

@for $i from 1 through $grid-columns {
    .col-#{$name}-#{$i} {
        max-width: 100% / $grid-columns * $i;
        @include flexboxgrid-sass-col-common;
        flex-basis: 100% / $grid-columns * $i;
    }
}

@for $i from 1 through $grid-columns {
    .col-#{$name}-offset-#{$i} {
        margin-left: 100% / $grid-columns * $i;
        @include flexboxgrid-sass-col-common;
    }
}

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

.start-#{$name} {
    text-align: start;
    justify-content: flex-start;
}

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

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

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

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

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

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

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

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

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


@each $b in $grid-breakpoints {
    $name:      nth($b, 1);
    $size:      nth($b, 2);
    $container: nth($b, 3);

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

        .col-#{$name} {
            @include flexboxgrid-sass-col-common;
            flex-basis: auto;
        }

        @for $i from 1 through $grid-columns {
            .col-#{$name}-#{$i} {
                max-width: 100% / $grid-columns * $i;
                @include flexboxgrid-sass-col-common;
                flex-basis: 100% / $grid-columns * $i;
            }

            .offset-#{$name}-#{$i} {
                margin-left: 100% / $grid-columns * $i;
            }
        }

        @for $i from 1 through $grid-columns {
            .col-#{$name}-offset-#{$i} {
                margin-left: 100% / $grid-columns * $i;
                @include flexboxgrid-sass-col-common;
            }
        }

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

        .start-#{$name} {
            text-align: start;
            justify-content: flex-start;
        }

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

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

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

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

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

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

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

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

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


// Helper Classes to conditionally Show/Hide elements

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important;
}

@include mappy-bp(max medium) {
    .visible-xs {
        display: block !important;
    }

    .row.visible-xs {
        display: flex !important;
    }

    table.visible-xs {
        display: table !important;
    }

    tr.visible-xs {
        display: table-row !important;
    }

    th.visible-xs,
    td.visible-xs {
        display: table-cell !important;
    }
}

@include mappy-bp(medium large) {
    .visible-sm {
        display: block !important;
    }

    .row.visible-sm {
        display: flex !important;
    }

    table.visible-sm {
        display: table !important;
    }

    tr.visible-sm {
        display: table-row !important;
    }

    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}

@include mappy-bp(large xlarge) {
    .visible-md {
        display: block !important;
    }

    .row.visible-md {
        display: flex !important;
    }

    table.visible-md {
        display: table !important;
    }

    tr.visible-md {
        display: table-row !important;
    }

    th.visible-md,
    td.visible-md {
        display: table-cell !important;
    }
}

@include mappy-bp(xlarge) {
    .visible-lg {
        display: block !important;
    }

    .row.visible-lg {
        display: flex !important;
    }

    table.visible-lg {
        display: table !important;
    }

    tr.visible-lg {
        display: table-row !important;
    }

    th.visible-lg,
    td.visible-lg {
        display: table-cell !important;
    }
}

@include mappy-bp(max medium) {
    .hidden-xs {
        display: none !important;
    }
}

@include mappy-bp(medium large) {
    .hidden-sm {
        display: none !important;
    }
}

@include mappy-bp(large xlarge) {
    .hidden-md {
        display: none !important;
    }
}

@include mappy-bp(xlarge) {
    .hidden-lg {
        display: none !important;
    }
}