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:
|1||<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">|
|4||<title>YUI Grids CSS </title>|
|5||<!-- Source File -->|
|6||<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">|
|10||<div id="hd"><!-- header --></div>|
|11||<div id="bd"><!-- body --></div>|
|12||<div id="ft"><!-- footer --></div>|
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-->|
|4||<!-- #doc2 = 950px width, centered -->|
|7||<!-- #doc3 = 100% width -->|
|10||<!-- #doc4 = 974px width, centered -->|
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. 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:
|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 */|
Here are some other things to keep in mind: 1) The width is set in
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
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 (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:
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|
||160 on left|
||180 on left|
||300 on left|
||180 on right|
||240 on right|
||300 on right|
Here's what the code looks like to choose a template preset:
|2||<div id="doc" class="yui-t4"> <!-- change class to change 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:
|5||<div class="yui-u first"></div>|
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.
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:
|5||<div class="yui-g first">|
|6||<div class="yui-u first"></div>|
|10||<div class="yui-u first"></div>|
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:
|4||<div class="yui-gc"> <!-- the "special grid" -->|
|5||<div class="yui-u first"></div>|
|Special Grid Class||Description|
||1/3 - 1/3 - 1/3|
||2/3 - 1/3|
||1/3 - 2/3|
||3/4 - 1/4|
||1/4 - 3/4|
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.
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:
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.
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.