Add flexbox grid

[kino90]

Forked a SCSS flexbox-grid from http://flexboxgrid.com/ 's issues. It would be cool to add it to the base styles!

I fixed names to be injectable in wok without actually breaking anything and to use wok's breakpoints! (Though it could need a check!)

// containers
.l-flex-container,
.l-flex-container-fluid {
    margin-right: auto;
    margin-left: auto;
}

.l-flex--container-fluid {
    padding-right: 2rem;
    padding-left: 2rem;
}

// rows
.l-flex-row {
    display: flex;
    flex-direction: row;
    flex: 0 1 auto;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

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

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

// column helpers
@mixin col-offset($flex-column) {
    margin-left: 100% / 12 * $flex-column;
}

@mixin col-numbered($flex-column) {
    flex-basis: 100% / 12 * $flex-column;
    max-width: 100% / 12 * $flex-column;
}

@mixin break($mq-key) {
    @if $mq-key {
        @include mq($mq-key) { @content; }
    }
    @else {
        @content;
    }
}

// build columns for each size is sizes map
@each $mq-size, $mq-key in $mq-breakpoints {

    @include break($mq-key) {

        %col-base-#{$mq-size} {
            box-sizing: border-box;
            flex: 0 0 auto;
            padding-right: 0.5rem;
            padding-left: 0.5rem;
        }

        %col-auto-#{$mq-size} {
            flex-grow: 1;
            flex-basis: 0;
            max-width: 100%;
        }

        .l-flex-col--#{$mq-size} {
            @extend %col-base-#{$mq-size};
            @extend %col-auto-#{$mq-size};
        }

        @for $num from 0 through 12 {

            .l-flex-col--#{$mq-size}-offset-#{$num} {
                @extend %col-base-#{$mq-size};
                @include col-offset($num);
            }
        }

        @for $num from 1 through 12 {

            .l-flex-col--#{$mq-size}-#{$num} {
                @extend %col-base-#{$mq-size};
                @include col-numbered($num);
            }
        }

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

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

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

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

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

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

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

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

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

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

[kino90]

https://github.com/kristoferjoseph/flexboxgrid/issues/270

[dwightjack]

Hi,

looks great! Could you push a PR for that?

[kino90]

Indeed! I just found a weird behavior in the responsive media queries. That's because the original object $sizes: (xs: null, sm: 49rem, md: 65rem, lg: 76rem); is different from Wok's $mq-breakpoints. (Note: xs:null)

This causes classes like .l-flex-col--xs-n to behave unexpectedly (in my case a "xs-12 sm-6" column isn't displaying at full width when on mobile).

I don't know sass-mq really much, and I could need some time to look into it.. Have you got an idea of how could we fix that issue?

I'll post the PR after fixing this problem 👍

[dwightjack]

@kino90 breakpoints in wok work a little differently. xs breakpoint targets large mobile devices, while no-breakpoint means small devices.

I've adapted your code and put it into a test branch here: https://github.com/fevrcoding/wok/tree/feature/flex-grid

Check out the /grid-demo.html view for an example implementation and let me know if that works for you.

Also if you need a battle-tested framework check out https://github.com/Objectway/super-gigi

[kino90]

I forked the file of the new branch in my actual project, but was having the same issue because .l-flex__col--#{$mq-size}-#{$num} is not generated for the small-mobile breakpoint (outside @media queries). I fixed this by adding

@for $num from 1 through 12 {
    .l-flex__col--#{$mq-size}-#{$num} {
        @include flex-col-numbered(12);
    }
}

right after @each $mq-size, $mq-key in $mq-breakpoints { (Notice the fixed 12 as argument for the mixin)

This way I'm generating the standard 12-column state for small-mobiles (with no @media queries)

[dwightjack]

I tested your solution but then the rendered stylesheet contains something like this as well:

.l-flex__col--sm-10 {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
}

Not sure if that is wanted or a side effect.