col, off, row class names... just idea with easy implementation.

[lotestudio]

I've just use your flex grid for one of my projects. The idea of the project was to implement some admin panel in already built sites. Some of them use bootstrap and the class names of the grid (.col-- and .row ) are the same as in bootstrap.
I've just set three more variables in sass:

    $fg-row-class-name: 'row' !default;
    $fg-col-class-name: 'col' !default;
    $fg-off-class-name: 'offset' !default;

and use them in that way:

/**
 * Row wrapper class, flex box parent.
 */

.#{$fg-row-class-name} {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    @include spacing( ( -$fg-gutter), margin, horizontal);
}

%#{$fg-col-class-name} {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    @include spacing( ( $fg-gutter), padding, horizontal);
}

%#{$fg-col-class-name}-flex {
    @extend %#{$fg-col-class-name};
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
}


/**
 * Generate a set of grid column classes using a namespace
 *
 * .col-[namespace] for intelligent column division
 * .col-[namespace]-[number] for a column that covers a specific number of columns (e.g. 1-12 by default)
 * .off-[namespace]-[number] for pushing a col a specific number of columns (e.g. 1-11 by default)
 */

@mixin grid-base( $namespace) {
    .#{$fg-col-class-name}-#{$namespace} {
        @extend %#{$fg-col-class-name}-flex;
    }
    @for $i from 1 through $fg-columns {
        .#{$fg-col-class-name}-#{$namespace}-#{$i} {
            @extend %#{$fg-col-class-name};
        }
    }
}

@mixin grid-sizes( $namespace) {
    // Run the loop for as many columns as speficied
    @for $i from 1 through $fg-columns {
        .#{$fg-col-class-name}-#{$namespace}-#{$i} {
            flex-basis: get-col-percent($i);
            max-width: get-col-percent($i);
        }
    }
    @for $i from 1 through $fg-columns {
        // Don't include the .off class for the last column
        @if ( $i !=$fg-columns) {
            .#{$fg-off-class-name}-#{$namespace}-#{$i} {
                margin-left: get-col-percent($i);
            }
        }
    }
}


/**
 * Build the grid in two steps, to help minimize file size
 * Step 1, for each namespace, create the grid-base
 * Step 2, for each namespace, wrap the col width/offset measurements in their breakpoint media query
 */

@each $val in $fg-breakpoints {
    $namespace: nth($val, 1);
    @include grid-base( $namespace);
}

@each $val in $fg-breakpoints {
    @if length($val)==1 {
        $namespace: nth($val, 1);
        @include grid-sizes( $namespace);
    }
    @else {
        $namespace: nth($val, 1);
        $size: nth($val, 2);
        @media only screen and (min-width: #{$size}) {
            @include grid-sizes( $namespace);
        }
    }
}

Now I can change the names of the grid classes without name collisions.

[matthewsimo]

I like this idea, with the Cambrian explosion of css frameworks and libraries out there I think this is a responsible and good practice. I'll think over implementation details and cut a release. Thanks @lotestudio!

[lotestudio]

👍 You are welcome! I thank you! Love the simplicity in your work!