plain-ui/src/includes/_grid.scss

// --------------------------------------------------
// reflex containers
// --------------------------------------------------

.#{$reflex-prefix}container,
.#{$reflex-prefix}container-full {
    @include box-sizing(border-box);
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: ($reflex-grid-spacing * 2);
    padding-left: ($reflex-grid-spacing * 2);

    .#{$reflex-prefix}grid {
        margin-right: -$reflex-grid-spacing;
        margin-left: -$reflex-grid-spacing;
    }
}

.#{$reflex-prefix}container {
    @media (min-width: $reflex-xs) {
        max-width: $reflex-xs;
    }

    @media (min-width: $reflex-sm) {
        max-width: $reflex-sm;
    }

    @media (min-width: $reflex-md) {
        max-width: $reflex-md;
    }

    @media (min-width: $reflex-lg) {
        max-width: $reflex-lg;
    }

    @media (min-width: $reflex-xlg) {
        max-width: $reflex-xlg;
    }
}

// --------------------------------------------------
// reflex grid
// --------------------------------------------------

.#{$reflex-prefix}grid {
    @include box-sizing(border-box);
    display: block;
    @include display-flex();
    @include flex-wrap();
    padding: 0;
    margin: 0 auto;
    position: relative;
    @include setup-whitespace();

    &::before,
    &::after {
        @include box-sizing(border-box);
        @include reset-whitespace();
    }

    // handle when lists are used as a grid
    list-style-type: none;
}

// --------------------------------------------------
// reflex col defaults
// --------------------------------------------------

[class*="#{$reflex-prefix}col-"] {
    @include box-sizing(border-box);
    @include reset-whitespace();
    position: relative;
    width: 100%;
    vertical-align: top;
    padding: $reflex-grid-spacing;

    &::before,
    &::after {
        @include box-sizing(border-box);
        @include reset-whitespace();
    }

    // handle grids nested in columns
    .#{$reflex-prefix}grid {
        @include flex(1, 1, auto);
        margin: -$reflex-grid-spacing;
    }

    @if $legacy-support == true {
        display: inline-block;
        *display: inline;
        zoom: 1;
    }
}

// --------------------------------------------------
// reflex grid generation
// --------------------------------------------------

@include make-reflex-grid(col-);

@media (min-width: $reflex-xs) {
    @include make-reflex-grid(col-xs-);
}

@media (min-width: $reflex-sm) {
    @include make-reflex-grid(col-sm-);
}

@media (min-width: $reflex-md) {
    @include make-reflex-grid(col-md-);
}

@media (min-width: $reflex-lg) {
    @include make-reflex-grid(col-lg-);
}

@media (min-width: $reflex-xlg) {
    @include make-reflex-grid(col-xlg-);
}

// --------------------------------------------------
// reflex col-auto
// --------------------------------------------------

.#{$reflex-prefix}col-auto {
    @include setup-auto-cols();
}

@media (min-width: $reflex-xs) {
    .#{$reflex-prefix}col-xs-auto {
        @include setup-auto-cols();
    }
}

@media (min-width: $reflex-sm) {
    .#{$reflex-prefix}col-sm-auto {
        @include setup-auto-cols();
    }
}

@media (min-width: $reflex-md) {
    .#{$reflex-prefix}col-md-auto {
        @include setup-auto-cols();
    }
}

@media (min-width: $reflex-lg) {
    .#{$reflex-prefix}col-lg-auto {
        @include setup-auto-cols();
    }
}

@media (min-width: $reflex-xlg) {
    .#{$reflex-prefix}col-xlg-auto {
        @include setup-auto-cols();
    }
}

// --------------------------------------------------
// reflex order helpers generation
// --------------------------------------------------

@include make-order-helpers();

@media (min-width: $reflex-xs) {
    @include loop-order-helpers($reflex-columns, '-xs');
}

@media (min-width: $reflex-sm) {
    @include loop-order-helpers($reflex-columns, '-sm');
}

@media (min-width: $reflex-md) {
    @include loop-order-helpers($reflex-columns, '-md');
}

@media (min-width: $reflex-lg) {
    @include loop-order-helpers($reflex-columns, '-lg');
}

@media (min-width: $reflex-xlg) {
    @include loop-order-helpers($reflex-columns, '-xlg');
}

// --------------------------------------------------
// reflex offset helpers generation
// --------------------------------------------------

@include make-offset-helpers();

@media (min-width: $reflex-xs) {
    @include loop-offset-helpers($reflex-columns - 1, '-xs');
}

@media (min-width: $reflex-sm) {
    @include loop-offset-helpers($reflex-columns - 1, '-sm');
}

@media (min-width: $reflex-md) {
    @include loop-offset-helpers($reflex-columns - 1, '-md');
}

@media (min-width: $reflex-lg) {
    @include loop-offset-helpers($reflex-columns - 1, '-lg');
}

@media (min-width: $reflex-xlg) {
    @include loop-offset-helpers($reflex-columns - 1, '-xlg');
}