| We need Your Support. Make a Donation now! or |  |
The foundational YUI Grids CSS file offers three preset page widths, seven core templates, and the ability to nest subdivided regions of one to four columns. All told, the file offers almost 200 preset layouts and an unlimited number of custom permutations that work across all A-grade browsers, all for less than 2.5kb of minimized file weight. Other features include:
We use and recommend this !DOCTYPE to trigger Standards Mode in browsers with multiple rendering modes:
To use YUI Grids CSS, include the following source file in your web page with the link element.
Grids rely on the width of an "em" provided by Fonts CSS; therefore, that file must be included. For the sake of this document, the level playing field provided by Reset CSS are also assumed. Including the doctype declaration and links to the files, the top and head of your document should contain the following information:
Note: If you are using the entire YUI CSS foundation, including the Reset, Fonts, and Grids packages, we have provided a concatenated and minified aggregate file for you to use. Including the "reset-fonts-grids.css" file will give you more efficient pageload performance as compared to including each of the foundation files separately.
Note: The files included using the text above will be served from Yahoo! servers; see "Serving YUI Files from Yahoo!" for important information about this service. JavaScript files are minified, meaning that comments and white space have been removed to make them more efficient to download. To use the full, commented versions or the -debug versions of YUI JavaScript files, please download the library distribution and host the files on your own server.
This sections describes how to implement YUI Grids CSS. It contains these sub-sections:
In addition to the recommended doctype and YUI's foundational CSS files, we find it useful to construct a page in three stacked regions. We define one region for the header (or masthead), one for the body region, and one for the footer. These regions aren't strictly required, but we will use them in our examples. Including the above, the base markup looks like this:
Change the id of the outer div to choose the width of the page. For a 750px width, use #doc. For a 950px width, use #doc2. For a 100% width, also known as fluid width, choose #doc3. You can find examples of each on the Grids examples page.
On the advice of our designers, the 100% grid (#doc3) has 10px of margin on the left and right sides. This prevents the content from bleeding into the browser's chrome. If you prefer, you can set it back to zero by adding this to your document:
We've made it easy to customize the page width. Divide your desired pixel width by 13; the result is your width in ems for all non-IE browsers. Take the em width you just calculated and multiply it by .9759 to find the width in ems for IE. Here's an example of a custom page width of 600px, and here's what the CSS looks like:
Here are some other things to keep in mind: 1) The width is set in ems because ems scale with user-initiated font-size adjustment, and therefore provide a superior user experience. 2) YUI Fonts does a good job of normalizing the width of an em, but we're still obligated to provide a slightly different value for IE. 3) Be sure the width value for IE comes after the value for everybody else. 4) Setting the min-width is optional, but helps the grid maintain integrity as the viewport shrinks. 5) The text-align and margin are used to help center the page, and should not be modified.
Most web pages have a main block of content and a secondary block of content. The "template" part of Grids allows you to choose the orientation of these blocks, as well as the width of the secondary block. The main block will take the remaining available space, which varies depending on the overall page width.
The two blocks on the page are both defined as div.yui-b, where "b" stands for block. Wrap the block considered "main" in another div, div#yui-main. It will look like this:
In some cases you may want your secondary content block to appear before your main content block in your markup. For example, some sites put their navigation in the secondary block, yet want it to appear first in the markup for accessibility or search engine optimization (SEO) reasons. YUI Grids offers source-order independence at the yui-b level, without impacting the visual layout of your page. In other words, the "b" wrapped in "main" can come before or after the naked "b" without impacting your visual layout.
| Template Class | Preset Description | Example |
|---|---|---|
.yui-t1 | 160 on left | Example |
.yui-t2 | 180 on left | Example |
.yui-t3 | 300 on left | Example |
.yui-t4 | 180 on right | Example |
.yui-t5 | 240 on right | Example |
.yui-t6 | 300 on right | Example |
.yui-t7 | One full-width column | Example |
Here's what the code looks like to choose a template preset:
We offer the template presets we do because they accommodate standard IAB ad unit dimensions, and because they represent the vast majority of common page structures we use.
YUI Grids CSS provides a system for subdividing sections of your page with nestable grids. Use this technique to easily create complex layouts that go beyond the two column layouts offered by the template presets. The picture below shows, for example, how a two-column grid is "nested" within the main block:
The basic idea is that "grids" are holders of "units". The standard grid holder is a div with a class of "yui-g" (g is for grid). The contained units are divs with a "yui-u" class (u is for unit). Except in special cases we'll examine later, a grid holds two units and instructs each unit to take up half the available space. Here's what a basic nested two-unit grid looks like:
You can see an example of a basic nested two-unit grid in action.
Because not all A-grade browser support the :first-child pseudo-class selector, we manually indicate which node is "first" by adding an additional value to the class attribute. This is useful information to have because, for example, we sometimes float siblings apart.
You can nest grids within other nested grids to create more columns. Here is an example of deeper nesting to create four columns. In the markup below, be sure to note two things. First: If the direct child of a grid is itself a grid, it need not be within a unit; in this case grids behave as units. Second: Be sure to denote the "first" of each set:
The standard grid-unit interplay always divides space in two, evenly. To create layouts of more than two units (e.g., three), and to create layouts divided unevenly (e.g., 66% and 33%), we employ special grid holders. While "yui-g" tells the two contained units to each take up half the space, "yui-gc" tells the first unit to take up two-thirds of the space, and the other unit to take up one-third of the space. Everything else remains the same: units live within grids, and the first of a set must be indicated. Here is an example of a special grid for a two-thirds / one-third layout, and here's what the markup looks like:
| Special Grid Class | Description | Example |
|---|---|---|
.yui-gb | 1/3 - 1/3 - 1/3 | Example |
.yui-gc | 2/3 - 1/3 | Example |
.yui-gd | 1/3 - 2/3 | Example |
.yui-ge | 3/4 - 1/4 | Example |
.yui-gf | 1/4 - 3/4 | Example |
Combining Page Widths, Template Presets, and Nesting Grids, a nearly infinite number of complex page layouts are possible. No matter how you put the pieces together, you just need the unmodified YUI Grids CSS file - it's all in there, for less than 2.5kb! Give it a shot, check out all the examples, and enjoy.
The YUI Library and related topics are discussed on the on the ydn-javascript mailing list.
In addition, please visit the YUIBlog for updates and articles about the YUI Library written by the library's developers.
The YUI Library's public bug tracking and feature request repositories are located on the YUI SourceForge project site. Before filing new feature requests or bug reports, please review our reporting guidelines.
Choose the overall page width.
Optionally choose the secondary column's width and orientation with one of seven templates.
Optionally nest standard grids (.yui-g) and special grids (.yui-b, ... .yui-f) to subdivide.
Copyright © 2007 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings
