New, Bad Ass, Layout System... CLICK NOW!!!
(ps. its not an add, but a real layout system.)Layout Customization Guide
(Yahoo! YUI)Using YUI Grids CSS
This sections describes how to implement YUI Grids CSS. It contains these sub-sections:
Starting Base Markup
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:
| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>YUI Grids CSS </title> |
| 5 | <!-- Source File --> |
| 6 | <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> |
| 7 | </head> |
| 8 | <body> |
| 9 | <div id="doc"> |
| 10 | <div id="hd"><!-- header --></div> |
| 11 | <div id="bd"><!-- body --></div> |
| 12 | <div id="ft"><!-- footer --></div> |
| 13 | </div> |
| 14 | </body> |
| 15 | </html> |
Choose the Overall Page Width
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. Beginning in version 2.3.0, #doc4 provides the increasingly prevelant 974px page width.
| 1 | <!-- #doc = 750px width, centered--> |
| 2 | <div id="doc"></div> |
| 3 | |
| 4 | <!-- #doc2 = 950px width, centered --> |
| 5 | <div id="doc2"></div> |
| 6 | |
| 7 | <!-- #doc3 = 100% width --> |
| 8 | <div id="doc3"></div> |
| 9 | |
| 10 | <!-- #doc4 = 974px width, centered --> |
| 11 | <div id="doc4"></div> |
Note:
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:
| 1 | <style> |
| 2 | #doc3 {margin:auto;} |
| 3 | </style> |
Customizing the Page Width
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. For IE, divide your desired pixel with by 13.3333 to find the width in ems for IE. Here's what the CSS looks like:
| 1 | <style> |
| 2 | #custom-doc { |
| 3 | margin:auto;text-align:left; /* leave unchanged */ |
| 4 | width:46.15em;/* non-IE */ |
| 5 | *width:45.00em;/* IE */ |
| 6 | min-width:600px;/* optional but recommended */ |
| 7 | } |
| 8 | </style> |
Note:
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 obliged 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.
Using Template Presets
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 (does the narrow one go on the left or the right), as well as the fixed width of the secondary (narrow) 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:
| 1 | ... |
| 2 | <div id="bd"> |
| 3 | <div id="yui-main"> |
| 4 | <div class="yui-b"></div> |
| 5 | </div> |
| 6 | <div class="yui-b"></div> |
| 7 | </div> |
| 8 | ... |
Source-Order Independence
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.
Available Template Presets
| Template Class | Preset Description |
|---|---|
.yui-t1 |
160 on left |
.yui-t2 |
180 on left |
.yui-t3 |
300 on left |
.yui-t4 |
180 on right |
.yui-t5 |
240 on right |
.yui-t6 |
300 on right |
Here's what the code looks like to choose a template preset:
| 1 | ... |
| 2 | <div id="doc" class="yui-t4"> <!-- change class to change preset --> |
| 3 | <div id="hd"></div> |
| 4 | <div id="bd"> |
| 5 | <div id="yui-main"> |
| 6 | <div class="yui-b"></div> |
| 7 | </div> |
| 8 | <div class="yui-b"></div> |
| 9 | </div> |
| 10 | <div id="ft"></div> |
| 11 | </div> |
| 12 | ... |
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.
Using Nesting Grids
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
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:
| 1 | ... |
| 2 | <div id="yui-main"> |
| 3 | <div class="yui-b"> |
| 4 | <div class="yui-g"> |
| 5 | <div class="yui-u first"></div> |
| 6 | <div class="yui-u"></div> |
| 7 | </div> |
| 8 | </div> |
| 9 | </div> |
| 10 | ... |
Note: Indicating :first-child
Because not all A-grade browsers 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.
Deeper Nesting
You can nest grids within other nested grids to create more 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:
| 1 | ... |
| 2 | <div id="yui-main"> |
| 3 | <div class="yui-b"> |
| 4 | <div class="yui-g"> |
| 5 | <div class="yui-g first"> |
| 6 | <div class="yui-u first"></div> |
| 7 | <div class="yui-u"></div> |
| 8 | </div> |
| 9 | <div class="yui-g"> |
| 10 | <div class="yui-u first"></div> |
| 11 | <div class="yui-u"></div> |
| 12 | </div> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | ... |
Using Special Nesting Grids
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% or 75% and 25%), we employ special grid holders. While "yui-g" tells the two children each take up half the space each, "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's what the markup looks like:
| 1 | ... |
| 2 | <div id="yui-main"> |
| 3 | <div class="yui-b"> |
| 4 | <div class="yui-gc"> <!-- the "special grid" --> |
| 5 | <div class="yui-u first"></div> |
| 6 | <div class="yui-u"></div> |
| 7 | </div> |
| 8 | </div> |
| 9 | </div> |
| 10 | ... |
Available Special Nesting Grids
| Special Grid Class | Description |
|---|---|
.yui-gb |
1/3 - 1/3 - 1/3 |
.yui-gc |
2/3 - 1/3 |
.yui-gd |
1/3 - 2/3 |
.yui-ge |
3/4 - 1/4 |
.yui-gf |
1/4 - 3/4 |
Putting It All Together
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 the single file! Give it a shot and enjoy.
YUI on Mobile: Using Grids CSS with "A-Grade" Mobile Browsers
About this Section: YUI generally works well with mobile browsers that are based on A-Grade browser foundations. For example, Nokia's N-series phones, including the N95, use a browser based on Webkit ? the same foundation shared by Apple's Safari browser, which is found on the iPhone. The fundamental challenges in developing for this emerging class of full, A-Grade-derived browsers on handheld devices are:
- Screen size: You have a much smaller canvas;
- Input devices: Mobile devices generally do not have mouse input, and therefore are missing some or all mouse events (like mouseover);
- Processor power: Mobile devices have slower processors that can more easily be saturated by JavaScript and DOM interactions ? and processor usage affects things like battery life in ways that don't have analogues in desktop browsers;
- Latency: Most mobile devices have a much higher latency on the network than do terrestrially networked PCs; this can make pages with many script, css or other types of external files load much more slowly.
There are other considerations, many of them device/browser specific (for example, current versions of the iPhone's Safari browser do not support Flash). The goal of these sections on YUI User's Guides is to provide you some preliminary insights about how specific components perform on this emerging class of mobile devices. Although we have not done exhaustive testing, and although these browsers are revving quickly and present a moving target, our goal is to provide some early, provisional advice to help you get started as you contemplate how your YUI-based application will render in the mobile world.
More Information:
- Challenges of Interface Design for Mobile Devices - YUI Blog article by Lucas Pettinati, Yahoo! Sr. Interaction Designer.
- Performance Research, Part 5: iPhone Cacheability - Making it Stick - YUI Blog article by Tenni Theurer and Wayne Shea from the Yahoo! Exceptional Performance Team
YUI Grids CSS works well with the high-end mobile devices on which we've tested it. Specifically, the versions of Webkit found on Nokia N-Series phones and Apple's iPhone both render Grids layouts well. Both browsers' birds-eye view modes give you a high-level picture of the page. On the iPhone, you can quickly navigate to a specific subsection of a Grid by double-clicking it; the iPhone's renderer correctly zooms in on Grid units as you would expect. Any of the Grids examples found here can be used as a starting point for evaluating the user experience with these devices.
From a design perspective, Grids CSS is probably a good choice for applications that are meant to be consumed by both PC browsers and mobile A-Grade browsers; because the Grids model tends to assume a larger screen size, it's not recommended as a starting point for applications that are mobile-specific.