public
Last active

How App.net uses YUI3 grids

  • Download Gist
app_net_grids.md
Markdown

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
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
/* 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
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
@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;
}
 
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.