d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <meta http-equiv="content-type" content="text/html; charset=utf-8">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <title>YUI 3.x: CSS Grids Units Example</title>
fa99b3cab01c8622489456804078ff7814fac260Matt Sweeney <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/cssreset.css" type="text/css">
fa99b3cab01c8622489456804078ff7814fac260Matt Sweeney <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts/cssfonts.css" type="text/css">
fa99b3cab01c8622489456804078ff7814fac260Matt Sweeney <link rel="stylesheet" href="{{yuiBuildUrl}}/cssgrids/cssgrids.css" type="text/css">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney/* everything below is custom styling to demonstrate how to create a page layout using yui grid units */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney/* Fixed, Centered Layout */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin:auto; /* center in viewport */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney width: 970px; /* fix page width */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney background:#efefef;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#main .content {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin-right: 10px; /* gutter between center and right columns */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney.thumb-captions .yui3-u-1-3 {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney vertical-align: bottom;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#main .yui3-u-1-2,
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#more .yui3-u-1-4 {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney vertical-align: middle;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney.advertisement .yui3-g,
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney text-align: center; /* horizontally center content */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney text-align: left; /* reset for content */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney.advertisement .align-stub { /* empty stub used to fix the parent height and vertically align */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney height: 200px;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney.advertisement .yui3-u-1-2,
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney.advertisement .align-stub {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney vertical-align: middle; /* vertically center content */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney/* content presentation (completely arbitrary, remove or customize) */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#hd, .content, #more {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney border: 1px solid #000;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney font: bold 180% arial;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney padding: 1em;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney border-top: 0;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney.content p, .content li, #nav li a {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney padding: 0.5em 1em;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#nav li a, #extra li a, #more li a {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney display: block;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney padding: 0.25em 0;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney border: 1px dashed black;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney padding: 0.5em 1em;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#nav .content {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney border-right: 0;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#main .thumb-captions {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney text-align: center;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#main .thumb-captions a {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney background: #ddd;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney border: 1px solid #000;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney display: block;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney padding: 5px;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin: 0 5px;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#main .thumb-captions img {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney border: 1px solid #000;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin: 0.5em auto;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney display: block;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#top-stories {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney background: #dcdcdc;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney border-bottom: 1px solid #000;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin-bottom: 1em;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#top-stories ol {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney background: #dcdcdc;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin: 0 0 0 3.5em;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#top-stories li {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney list-style-type: decimal;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#top-stories li a {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin-left: -1em; /* collapse some space between list marker and content */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#extra .advertisement {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney background: #666;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney color: #fff;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney background: #ccc;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin-top: 1em;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney padding: 0.5em 0;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney list-style-type: disc;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin: 0 0 0 2.5em;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney font:83% tahoma;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney background: #999;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney font:80% verdana;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney padding: 1em;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney text-align: center;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <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>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <a href="#"><img width="80" height="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <a href="#"><img height="80" width="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <a href="#"><img height="80" width="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <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>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>Suspendisse congue sapien a nibh venenatis sit amet aliquet elit suscipit. Vestibulum nulla enim, bibendum ut vestibulum at, laoreet a felis.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p class="yui3-u-1-2">Nulla venenatis ante in enim ornare dapibus. Integer placerat ligula diam.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu arcu, volutpat vel volutpat vel, varius ac odio.</p>