Menu icon Foundation
Flex grid mixins comparison to pre-compiled CSS

I'm attempting to create a fairly straightforward responsive three-column layout using the Sass flex grid: a central 'main' content area with left and right sidebars. I've been able to achieve what I want fairly easily with the pre-compiled custom output CSS, but I'm having trouble replicating the results with Sass mixins (Sass fits in better with our build process, and I'm hoping to use a smaller number of our own semantic classes). I'm hoping someone can give me some guidance on the Sass mixins.

With the pre-compiled CSS, I've got the layout set up at breakpoints:

  • small: stack all
  • medium: left sidebar and main on one row, right sidebar stacked below
  • large: left sidebar, main, and right sidebar all on one row

I've got a container for that whole block, with one child 'main' and two children 'aside'. Using the compiled CSS (I'm extending standard classes in my Sass), this works as expected

.container--body-section--main {
    @extend .row;
    @extend .expanded;
}

main {
    @extend .column;
}

[class*="sidebar"] {
    @extend .column;
    @extend .small-12;
}

.sidebar--left {
    @extend .medium-4;
    @extend .large-3;
}

.sidebar--right {
    @extend .medium-12; // drop below
    @extend .large-3;
}

 

I'm attempting to replicate that with Sass mixins:

.container--body-section--main {
     @include flex-grid-row;
}

main {
    @include flex-grid-column;

    @include breakpoint(medium only) {
        @include grid-col-size(8);
    }

    @include breakpoint(large up) {
        @include grid-col-size(6);
    }
}

[class*="sidebar"] { // full width (stacked) by default
    @include flex-grid-column;
    @include breakpoint(small up) {
        @include grid-col-size(12);
    }
}

.sidebar--left {

    @include breakpoint(medium only) {
        @include grid-col-size(4);
    }

    @include breakpoint(large up) {
        @include grid-col-size(3);
    }
}

.sidebar--right {

    @include breakpoint (medium down) {
        @include grid-col-size(12);
    }

    @include breakpoint(large up) {
        @include grid-col-size(3);
    }
}

 

Unfortunately, it's not working the same way. At large size, with the pre-compiled CSS (ignoring browser prefixes for simplicity), the left and right sidebars have:
flex

flex: 0 0 25%;
max-width: 25%;

while my CSS compiled from mixins have:

flex: 1 1 0px;
width: 25%;

Thus, the layout doesn't work the same. The right sidebar also does not stack below at medium width. At small width, it does but the left sidebar and main are still on a single line. 

What am I missing? Suggestions would be greatly appreciated!

Sassflexflex-gridfoundation 6Responsive

I'm attempting to create a fairly straightforward responsive three-column layout using the Sass flex grid: a central 'main' content area with left and right sidebars. I've been able to achieve what I want fairly easily with the pre-compiled custom output CSS, but I'm having trouble replicating the results with Sass mixins (Sass fits in better with our build process, and I'm hoping to use a smaller number of our own semantic classes). I'm hoping someone can give me some guidance on the Sass mixins.

With the pre-compiled CSS, I've got the layout set up at breakpoints:

  • small: stack all
  • medium: left sidebar and main on one row, right sidebar stacked below
  • large: left sidebar, main, and right sidebar all on one row

I've got a container for that whole block, with one child 'main' and two children 'aside'. Using the compiled CSS (I'm extending standard classes in my Sass), this works as expected

.container--body-section--main {
    @extend .row;
    @extend .expanded;
}

main {
    @extend .column;
}

[class*="sidebar"] {
    @extend .column;
    @extend .small-12;
}

.sidebar--left {
    @extend .medium-4;
    @extend .large-3;
}

.sidebar--right {
    @extend .medium-12; // drop below
    @extend .large-3;
}

 

I'm attempting to replicate that with Sass mixins:

.container--body-section--main {
     @include flex-grid-row;
}

main {
    @include flex-grid-column;

    @include breakpoint(medium only) {
        @include grid-col-size(8);
    }

    @include breakpoint(large up) {
        @include grid-col-size(6);
    }
}

[class*="sidebar"] { // full width (stacked) by default
    @include flex-grid-column;
    @include breakpoint(small up) {
        @include grid-col-size(12);
    }
}

.sidebar--left {

    @include breakpoint(medium only) {
        @include grid-col-size(4);
    }

    @include breakpoint(large up) {
        @include grid-col-size(3);
    }
}

.sidebar--right {

    @include breakpoint (medium down) {
        @include grid-col-size(12);
    }

    @include breakpoint(large up) {
        @include grid-col-size(3);
    }
}

 

Unfortunately, it's not working the same way. At large size, with the pre-compiled CSS (ignoring browser prefixes for simplicity), the left and right sidebars have:
flex

flex: 0 0 25%;
max-width: 25%;

while my CSS compiled from mixins have:

flex: 1 1 0px;
width: 25%;

Thus, the layout doesn't work the same. The right sidebar also does not stack below at medium width. At small width, it does but the left sidebar and main are still on a single line. 

What am I missing? Suggestions would be greatly appreciated!

Brian Hewitt almost 3 years ago

I think I've answered my own question here, but I could use some confirmation.

 

I'm using 'grid-col-size', which doesn't actually exist -- I was thinking of 'grid-column-size' from the float grid, but I believe I need to use 'flex-grid-column' instead. Is that the right way to do this?