YUI CSS Grids Source

From Fishcakes Wiki

Jump to: navigation, search
Edit Menu

Image:Icon_Yui_40px.png YUI CSS Grids Source


This is the source CSS for the YUI Grids version 2.4.1.


Contents

Grids Files

  • /yui/build/grids/grids.cssview file.
  • /yui/build/grids/grids-min.cssview file.
  • yui/build/reset-fonts-grids/reset-fonts-grids.cssview 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;
}


Image:Icon Resources 20px.png YUI Resources

Official Resources

Unofficial Resources


Personal tools