If you would like to talk about your project call (02) 4474 5861

Reducing ZURB’s Foundation 5 grid CSS output with pre-built SASS mixins

Learning SASS & Understanding Zurb’s Foundation Framework

2014 was the year for learning a pre processor and a framework.

After a lot of reading and consideration I chose to focus on SASS and Foundation.

Before starting though one of the arguments to not using a framework was all the unnecessary or unused CSS code output and in my naivety I believed this to be the case with Foundation.

Happily this has all changed with digging that little bit deeper on how to work with Foundation 5.

Before this I questioned myself have I been using ZURB Foundation wrong, I’ve just been letting it punch out all the grid CSS but then this article from Sitepoint demonstrates how to trim that CSS fat – Semantic Markup with Foundation 5 and Sass

In general what does this mean, well for starters I need to get a better grasp of Foundations 5 pre-built Sass mixins and with that you can get Foundation to spit out a reduced amount of CSS for the responsive grid.

(Add Foundation 5 & SASS mixins examples for the Grid)

Learn about – Set some of its values to “false”, you limit the compiled CSS to include only what you need in your pages. Eg: modify the value of this variable “$include-html-grid-classes: false”. If you don’t change this one, in the CSS output you’ll see all the classes related to grid (“small-1”, “small-2”, etc.)

By using the @include directive it allows you to use mixins within your Sass files.
(The below code examples are copied from the Sitepoint article as linked above)

.services {
    @include grid-row;

    article {
        @include grid-column(12);

        @media #{$medium-up} {
            @include grid-column(6);
        }

        @media #{$large-up} {
            @include grid-column(3);
        }
    }
}

Which outputs the following CSS

.services {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 62.5rem;
}

.services article {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    width: 100%;
    float: left;
}

@media only screen and (min-width: 40.063em) {
    .services article {
        width: 50%;
        float: left;
    }
}

@media only screen and (min-width: 64.063em) {
    .services article {
        width: 25%;
        float: left;
    }
}