736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff <meta http-equiv="content-type" content="text/html; charset=utf-8">
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff <title>YUI 3.x: CSS Grids Units Example</title>
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/cssreset.css" type="text/css">
189003a5b9ed3b1168f3331a2d4213bb08bf0d86Jeff Conniff <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts/cssfonts.css" type="text/css">
189003a5b9ed3b1168f3331a2d4213bb08bf0d86Jeff Conniff <link rel="stylesheet" href="{{yuiBuildUrl}}/cssgrids/cssgrids.css" type="text/css">
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff/* everything below is custom styling to demonstrate how to create a page layout using yui grid units */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff/* Fixed, Centered Layout */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff margin:auto; /* center in viewport */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff width: 970px; /* fix page width */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff background:#efefef;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff#main .content {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff margin-right: 10px; /* gutter between center and right columns */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff.thumb-captions .yui3-u-1-3 {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff vertical-align: bottom;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff#main .yui3-u-1-2,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff#more .yui3-u-1-4 {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff vertical-align: middle;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff.advertisement .yui3-g,
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff text-align: center; /* horizontally center content */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff text-align: left; /* reset for content */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff.advertisement .align-stub { /* empty stub used to fix the parent height and vertically align */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff height: 200px;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff.advertisement .yui3-u-1-2,
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff.advertisement .align-stub {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff vertical-align: middle; /* vertically center content */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff/* content presentation (completely arbitrary, remove or customize) */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff#hd, .content, #more {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff border: 1px solid #000;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff font: bold 180% arial;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff padding: 1em;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff border-top: 0;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff.content p, .content li, #nav li a {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff padding: 0.5em 1em;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff#nav li a, #extra li a, #more li a {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff display: block;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff padding: 0.25em 0;
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff border: 1px dashed black;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff padding: 0.5em 1em;
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff#nav .content {
95291e847f8b5eb9c289221ca612fc7b7dff8bb9Jeff Conniff border-right: 0;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff#main .thumb-captions {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff text-align: center;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff#main .thumb-captions a {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff background: #ddd;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff border: 1px solid #000;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff display: block;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff padding: 5px;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff margin: 0 5px;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff#main .thumb-captions img {
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff border: 1px solid #000;
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff margin: 0.5em auto;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff display: block;
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff#top-stories {
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff background: #dcdcdc;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff border-bottom: 1px solid #000;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff margin-bottom: 1em;
95291e847f8b5eb9c289221ca612fc7b7dff8bb9Jeff Conniff#top-stories ol {
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff background: #dcdcdc;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff margin: 0 0 0 3.5em;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff#top-stories li {
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff list-style-type: decimal;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff#top-stories li a {
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff margin-left: -1em; /* collapse some space between list marker and content */
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff#extra .advertisement {
95291e847f8b5eb9c289221ca612fc7b7dff8bb9Jeff Conniff background: #666;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff color: #fff;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff background: #ccc;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff margin-top: 1em;
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff padding: 0.5em 0;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff list-style-type: disc;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff margin: 0 0 0 2.5em;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff font:83% tahoma;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff background: #999;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff font:80% verdana;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff padding: 1em;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff text-align: center;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff <p>Cras porta venenatis egestas. Vestibulum pretium massa id turpis varius iaculis. Aliquam nec cursus lorem. Sed aliquet hendrerit sem, et consectetur dolor condimentum quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse congue sapien a nibh venenatis sit amet aliquet elit suscipit. Curabitur gravida magna ut diam pellentesque et luctus metus auctor. Nam quis hendrerit enim. Donec tincidunt libero a dolor hendrerit at tempus quam venenatis. In quis tempus ipsum. Vestibulum nulla enim, bibendum ut vestibulum at, laoreet a felis.</p>
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff <a href="#"><img width="80" height="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg">
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff <a href="#"><img height="80" width="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg">
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff <a href="#"><img height="80" width="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg">
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff <p>Cras porta venenatis egestas. Vestibulum pretium massa id turpis varius iaculis. Aliquam nec cursus lorem. Sed aliquet hendrerit sem, et consectetur dolor condimentum quis. Curabitur gravida magna ut diam pellentesque et luctus metus auctor. Nam quis hendrerit enim. </p>
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff <p>Suspendisse congue sapien a nibh venenatis sit amet aliquet elit suscipit. Vestibulum nulla enim, bibendum ut vestibulum at, laoreet a felis.</p>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff <p class="yui3-u-1-2">Nulla venenatis ante in enim ornare dapibus. Integer placerat ligula diam.</p>
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu arcu, volutpat vel volutpat vel, varius ac odio.</p>