YUI CSS Grids Source
From Fishcakes Wiki
This is the source CSS for the YUI Grids version 2.4.1.
Contents |
Grids Files
- /yui/build/grids/grids.css — view file.
- /yui/build/grids/grids-min.css — view file.
- yui/build/reset-fonts-grids/reset-fonts-grids.css — view file.
Grids HTML Codes
<!-- YUI standard grids --> <link rel="stylesheet" type="text/css" href="http://fishcakesmedia.com/adev/yui/build/grids/grids-min.css">
<!-- YUI standard reset, fonts and grids --> <link rel="stylesheet" type="text/css" href="http://fishcakesmedia.com/adev/yui/build/reset-fonts-grids/reset-fonts-grids.css">
Grids CSS
/* Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.4.1 */ /* for all templates and grids */ body { text-align:center; } #ft { clear:both; } /* 750 centered, and backward compatibility */ #doc, #doc2, #doc3, #doc4, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5, .yui-t6, .yui-t7 { margin:auto; text-align:left; width:57.69em; *width:56.301em; min-width:750px; } /* 950 centered */ #doc2 { width:73.074em; *width:71.313em; } /* 100% with 10px viewport side matting */ #doc3 { margin:auto 10px; /* not for structure, but so content doesn't bleed to edge */ width:auto; } /* 974 centered */ #doc4 { width:74.923em; *width:73.117em; } /* below required for all fluid grids; adjust widths and margins above accordingly */ /* to preserve source-order independence for Gecko */ .yui-b { position:relative; } .yui-b { _position:static; } /* for IE < 7 */ #yui-main .yui-b { position:static; } #yui-main { width:100%; } .yui-t1 #yui-main, .yui-t2 #yui-main, .yui-t3 #yui-main { float:right; margin-left:-25em; /* IE: preserve layout at narrow widths */ } .yui-t4 #yui-main, .yui-t5 #yui-main, .yui-t6 #yui-main { float:left; margin-right:-25em; /* IE: preserve layout at narrow widths */ } .yui-t1 .yui-b { float:left; width:12.3207em; *width:12.0106em; } .yui-t1 #yui-main .yui-b { margin-left:13.3207em; *margin-left:13.0106em; } .yui-t2 .yui-b { float:left; width:13.8456em; *width:13.512em; } .yui-t2 #yui-main .yui-b { margin-left:14.8456em; *margin-left:14.512em; } .yui-t3 .yui-b { float:left; width:23.0759em; *width:22.52em; } .yui-t3 #yui-main .yui-b { margin-left:24.0759em; *margin-left:23.52em; } .yui-t4 .yui-b { float:right; width:13.8456em; *width:13.512em; } .yui-t4 #yui-main .yui-b { margin-right:14.8456em; *margin-right:14.512em; } .yui-t5 .yui-b { float:right; width:18.4608em; *width:18.016em; } .yui-t5 #yui-main .yui-b { margin-right:19.4608em; *margin-right:19.016em; } .yui-t6 .yui-b { float:right; width:23.0759em; *width:22.52em; } .yui-t6 #yui-main .yui-b { margin-right:24.0759em; *margin-right:23.52em; } .yui-t7 #yui-main .yui-b { display:block; margin:0 0 1em 0; } #yui-main .yui-b { float:none; width:auto; } .yui-g .yui-gb .yui-u, .yui-gb .yui-g, .yui-gb .yui-gb, .yui-gb .yui-gc, .yui-gb .yui-gd, .yui-gb .yui-ge, .yui-gb .yui-gf, .yui-gb .yui-u, .yui-gc .yui-u, .yui-gc .yui-g, .yui-gd .yui-u { float:left; margin-left:2%; width:32%; } .yui-gb .yui-gb .yui-u, .yui-gb .yui-gc .yui-u { *margin-left:1.8%; _margin-left:4%; } .yui-g .yui-gb .yui-u { _margin-left:.8%; } .yui-gb .yui-u { float:right; } .yui-gb div.first { margin-left:0; float:left; } .yui-g .yui-gb div.first, .yui-gb .yui-gb div.first { *margin-right:0; *width:32%; _width:31.7%; } .yui-gb .yui-gc div.first, .yui-gb .yui-gd div.first { *margin-right:0; } .yui-gb .yui-gd .yui-u { *width:66%; _width:61.2%; } .yui-gb .yui-gd div.first { *width:31%; _width:29.5%; } .yui-g .yui-gc .yui-u, .yui-gb .yui-gc .yui-u { width:32%; _float:right; margin-right:0; _margin-left:0; } .yui-gb .yui-gc div.first { width:66%; *float:left; *margin-left:0; } .yui-gb .yui-ge .yui-u, .yui-gb .yui-gf .yui-u { margin:0; } /*Float units (and sub grids) to the right */ .yui-g .yui-u, .yui-g .yui-g, .yui-g .yui-gb, .yui-g .yui-gc, .yui-g .yui-gd, .yui-g .yui-ge, .yui-g .yui-gf, .yui-gc .yui-u, .yui-gd .yui-g, .yui-g .yui-gc .yui-u, .yui-ge .yui-u, .yui-ge .yui-g, .yui-gf .yui-g, .yui-gf .yui-u { float:right; } /*Float units (and sub grids) to the left */ .yui-g .yui-gc div.first, .yui-g .yui-ge div.first, .yui-g div.first, .yui-gc div.first, .yui-gc div.first div.first, .yui-gd div.first, .yui-ge div.first, .yui-gf div.first { float:left; } .yui-g .yui-g .yui-u, .yui-gb .yui-g .yui-u, .yui-gc .yui-g .yui-u, .yui-gd .yui-g .yui-u, .yui-ge .yui-g .yui-u, .yui-gf .yui-g .yui-u { width:49%; *width:48.1%; *margin-left:0; } .yui-g .yui-g div.first { *margin:0; } .yui-gb .yui-g div.first { *margin-right:4%; _margin-right:1.3%; } .yui-gb .yui-gb .yui-u { _margin-left:.7%; } .yui-gb .yui-g div.first, .yui-gb .yui-gb div.first { *margin-left:0; } .yui-gc .yui-g .yui-u, .yui-gd .yui-g .yui-u { *width:48.1%; *margin-left:0; } .yui-g .yui-u, .yui-g .yui-g, .yui-g .yui-gb, .yui-g .yui-gc, .yui-g .yui-gd, .yui-g .yui-ge, .yui-g .yui-gf { width:49.1%; } .yui-g .yui-gb div.first, .yui-gb div.first, .yui-gc div.first, .yui-gd div.first { margin-left:0; } .yui-g .yui-gc div.first, .yui-gc div.first, .yui-gd .yui-g, /* for 056, 057 */ .yui-gd .yui-u { width:66%; } .yui-gd div.first, .yui-gb .yui-gd div.first { width:32%; } .yui-g .yui-gd div.first { _width:29.9%; } .yui-ge .yui-u, .yui-ge .yui-g, .yui-gf div.first { width:24%; } .yui-gb .yui-ge div.yui-u, .yui-gb .yui-gf div.yui-u { float:right; } .yui-gb .yui-ge div.first, .yui-gb .yui-gf div.first { float:left; } .yui-ge div.first, .yui-gf .yui-g, .yui-gf .yui-u { width:74.2%; } /* narrower width in nexted contexts */ .yui-gb .yui-ge .yui-u, .yui-gb .yui-gf div.first { *width:24%; _width:20%; } /* narrower width in nexted contexts */ .yui-gb .yui-ge div.first, .yui-gb .yui-gf .yui-u { *width:73.5%; _width:65.5%; } /* clearing */ #bd:after, .yui-g:after, .yui-gb:after, .yui-gc:after, .yui-gd:after, .yui-ge:after, .yui-gf:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #bd, .yui-g, .yui-gb, .yui-gc, .yui-gd, .yui-ge, .yui-gf { zoom:1; } .yui-gb .yui-u { float:left; }
YUI Resources
Official Resources
- developer.yahoo.com/yui — developer documentation.
- yuiblog.com — developer's blog.
- groups.yahoo.com/group/ydn-javascript — user group and mailing list.
Unofficial Resources
- Davs Blog — loads of YUI code samples.
- YUI Grids Builder — excellenttool to layout the page for you.
- EXT YUI Javascript Library — very good application layer for web app developers.

