How App.net uses YUI3 grids

app_net_grids.md

How you can create a responsive grid system using YUI3 grids and SASS

This is a quick rundown of how and why we use YUI3 grids at App.net

As far as I can tell there are three types of CSS grids: a static-width pre-defined grid, a flexible-width pre-defined grid, and a generative grid. In the first two grids (pre-defined width), you basically decide how many columns you have across the screen, and then create blocks in any multiple of those. This pattern often looks like "span-4", "span-6", "pull-10", "push-5", etc. You find this style in popular frameworks like Bootstrap and Blueprint.

The third way, the generative/recursive grid system, doesn't seem to be as popular as the others. I am not entirely sure why, because the generative grid can pack more punch in less lines. In this vein is there is OOCSS and YUI3 CSS Grids.

YUI Grids are slick. They allow you to be incredibly expressive in your grid system, with a very small amount of code. They are equally powerful for making large page layout decisions, as well as the smallest, most detailed portion of your page.

YUI Grids were created before the whole responsive design paradigm took off, so they didn't have anything built in to handle different window sizes. We initially managed to make our pages responsive with some helper classes that would change small parts of the grid when in mobile mode. But I realized that this approach was only handling mobile vs. non-mobile, and was insufficient to handle the full range of device widths out there. So I realized that we needed to create something that would work at multiple device width breakpoints.

We started with the YUI3 grids:

...
.yui3-u-1 {
    display: block;
}

.yui3-u-1-2 {
    width: 50%;
}

.yui3-u-1-3 {
    width: 33.33333%;
}

.yui3-u-2-3 {
    width: 66.66666%;
}
...
http://yui.yahooapis.com/3.6.0/build/cssgrids/grids.css

And created a mixin function for them.

@mixin yui_grid($namespace:'') {

    ...

    .#{$namespace}yui3-u-1 {
        display: block;
        width: auto;
    }

    .#{$namespace}yui3-u-1-2 {
        width: 50%;
    }

    .#{$namespace}yui3-u-1-3 {
        width: 33.33333%;
    }

    .#{$namespace}yui3-u-2-3 {
        width: 66.66666%;
    }

    ...

}
// https://gist.github.com/3362562

At this point we can re-create the original YUI Grid we all know and love by calling the function and not passing in any namespace.

@include yui_grid();

But the magic happens when we also use media queries. We can use the awesome respond-to mixin to handle this part.

html {
    @include yui_grid();

    @include respond-to(handhelds) {
        yui_grid('h-');
    }

    @include respond-to(wide-handhelds) {
        yui_grid('wh-');
    }

    @include respond-to(tablets) {
        yui_grid('t-');
    }
}

So we now have four different YUI3 grids for various breakpoints. This supports various device widths, the grid is very small, there is no conditional fetching and it is very simple. It will make banging out responsive websites easier.

Now we can easily create layouts for each different width:

<div class='yui3-g'>
    <div class='yui3-u-1 t-yui3-u-2-3 wh-yui3-u-3-4 h-yui3-u-1'>

    </div>
    <div class='yui3-u-1 t-yui3-u-1-3 wh-yui3-u-1-4 h-yui3-u-1'>

    </div>
</div>

(Thanks to @mstorus for editing and checking my ideas)

grids.css

/* from: http://yui.yahooapis.com/3.6.0/build/cssgrids/grids.css
YUI 3.6.0 (build 5521)
Copyright 2012 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
.yui3-g {
    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}

.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}
.yui3-u-1,
.yui3-u-1-2,
.yui3-u-1-3,
.yui3-u-2-3,
.yui3-u-1-4,
.yui3-u-3-4,
.yui3-u-1-5,
.yui3-u-2-5,
.yui3-u-3-5,
.yui3-u-4-5,
.yui3-u-1-6,
.yui3-u-5-6,
.yui3-u-1-8,
.yui3-u-3-8,
.yui3-u-5-8,
.yui3-u-7-8,
.yui3-u-1-12,
.yui3-u-5-12,
.yui3-u-7-12,
.yui3-u-11-12,
.yui3-u-1-24,
.yui3-u-5-24,
.yui3-u-7-24,
.yui3-u-11-24,
.yui3-u-13-24,
.yui3-u-17-24,
.yui3-u-19-24,
.yui3-u-23-24 {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

.yui3-u-1 {
    display: block;
}

.yui3-u-1-2 {
    width: 50%;
}

.yui3-u-1-3 {
    width: 33.33333%;
}

.yui3-u-2-3 {
    width: 66.66666%;
}

.yui3-u-1-4 {
    width: 25%;
}

.yui3-u-3-4 {
    width: 75%;
}

.yui3-u-1-5 {
    width: 20%;
}

.yui3-u-2-5 {
    width: 40%;
}

.yui3-u-3-5 {
    width: 60%;
}

.yui3-u-4-5 {
    width: 80%;
}

.yui3-u-1-6 {
    width: 16.656%;
}

.yui3-u-5-6 {
    width: 83.33%;
}

.yui3-u-1-8 {
    width: 12.5%;
}

.yui3-u-3-8 {
    width: 37.5%;
}

.yui3-u-5-8 {
    width: 62.5%;
}

.yui3-u-7-8 {
    width: 87.5%;
}

.yui3-u-1-12 {
    width: 8.3333%;
}

.yui3-u-5-12 {
    width: 41.6666%;
}

.yui3-u-7-12 {
    width: 58.3333%;
}

.yui3-u-11-12 {
    width: 91.6666%;
}

.yui3-u-1-24 {
    width: 4.1666%;
}

.yui3-u-5-24 {
    width: 20.8333%;
}

.yui3-u-7-24 {
    width: 29.1666%;
}

.yui3-u-11-24 {
    width: 45.8333%;
}

.yui3-u-13-24 {
    width: 54.1666%;
}

.yui3-u-17-24 {
    width: 70.8333%;
}

.yui3-u-19-24 {
    width: 79.1666%;
}

.yui3-u-23-24 {
    width: 95.8333%;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssgrids { display: none; }

yui3_grids.scss

@mixin yui_grid($namespace:'') {
    /*
    Copyright (c) 2010, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:
    http://developer.yahoo.com/yui/license.html
    version: 3.3.0
    build: 3167
    */
    .#{$namespace}yui3-g {
        letter-spacing: -0.31em; /* webkit: collapse white-space between units */
        *letter-spacing: normal; /* reset IE < 8 */
        word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
    }

    .#{$namespace}yui3-u,
    .#{$namespace}yui3-u-1,
    .#{$namespace}yui3-u-1-2,
    .#{$namespace}yui3-u-1-3,
    .#{$namespace}yui3-u-2-3,
    .#{$namespace}yui3-u-1-4,
    .#{$namespace}yui3-u-3-4,
    .#{$namespace}yui3-u-1-5,
    .#{$namespace}yui3-u-2-5,
    .#{$namespace}yui3-u-3-5,
    .#{$namespace}yui3-u-4-5,
    .#{$namespace}yui3-u-1-6,
    .#{$namespace}yui3-u-5-6,
    .#{$namespace}yui3-u-1-8,
    .#{$namespace}yui3-u-3-8,
    .#{$namespace}yui3-u-5-8,
    .#{$namespace}yui3-u-7-8,
    .#{$namespace}yui3-u-1-12,
    .#{$namespace}yui3-u-5-12,
    .#{$namespace}yui3-u-7-12,
    .#{$namespace}yui3-u-11-12,
    .#{$namespace}yui3-u-1-24,
    .#{$namespace}yui3-u-5-24,
    .#{$namespace}yui3-u-7-24,
    .#{$namespace}yui3-u-11-24,
    .#{$namespace}yui3-u-13-24,
    .#{$namespace}yui3-u-17-24,
    .#{$namespace}yui3-u-19-24,
    .#{$namespace}yui3-u-23-24 {
        display: inline-block;
        zoom: 1; *display: inline; /* IE < 8: fake inline-block */
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
    }

    .#{$namespace}yui3-u-1 {
        display: block;
        width: auto;
    }

    .#{$namespace}yui3-u-1-2 {
        width: 50%;
    }

    .#{$namespace}yui3-u-1-3 {
        width: 33.33333%;
    }

    .#{$namespace}yui3-u-2-3 {
        width: 66.66666%;
    }

    .#{$namespace}yui3-u-1-4 {
        width: 25%;
    }

    .#{$namespace}yui3-u-3-4 {
        width: 75%;
    }

    .#{$namespace}yui3-u-1-5 {
        width: 20%;
    }

    .#{$namespace}yui3-u-2-5 {
        width: 40%;
    }

    .#{$namespace}yui3-u-3-5 {
        width: 60%;
    }

    .#{$namespace}yui3-u-4-5 {
        width: 80%;
    }

    .#{$namespace}yui3-u-1-6 {
        width: 16.656%;
    }

    .#{$namespace}yui3-u-5-6 {
        width: 83.33%;
    }

    .#{$namespace}yui3-u-1-8 {
        width: 12.5%;
    }

    .#{$namespace}yui3-u-3-8 {
        width: 37.5%;
    }

    .#{$namespace}yui3-u-5-8 {
        width: 62.5%;
    }

    .#{$namespace}yui3-u-7-8 {
        width: 87.5%;
    }

    .#{$namespace}yui3-u-1-12 {
        width: 8.3333%;
    }

    .#{$namespace}yui3-u-5-12 {
        width: 41.6666%;
    }

    .#{$namespace}yui3-u-7-12 {
        width: 58.3333%;
    }

    .#{$namespace}yui3-u-11-12 {
        width: 91.6666%;
    }

    .#{$namespace}yui3-u-1-24 {
        width: 4.1666%;
    }

    .#{$namespace}yui3-u-5-24 {
        width: 20.8333%;
    }

    .#{$namespace}yui3-u-7-24 {
        width: 29.1666%;
    }

    .#{$namespace}yui3-u-11-24 {
        width: 45.8333%;
    }

    .#{$namespace}yui3-u-13-24 {
        width: 54.1666%;
    }

    .#{$namespace}yui3-u-17-24 {
        width: 70.8333%;
    }

    .#{$namespace}yui3-u-19-24 {
        width: 79.1666%;
    }

    .#{$namespace}yui3-u-23-24 {
        width: 95.8333%;
    }

    .#{$namespace}yui3-u-none {
        display: none;
    }

}