YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Layout Manager: Using a Layout with Grids CSS

# Layout Manager: Using a Layout with Grids CSS

This example shows how to use the Layout Manager with Grids CSS.

View example in new window.

## Create the Grid Markup

We will start by using the CSS Grid Builder and creating a page with the following settings:

- Body Size: 750px
- Body Type: Sidebar left 160px
- Row: 1 Column (100)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>YUI Base Page</title> <link rel="stylesheet" href="reset-fonts-grids.css" type="text/css"> </head> <body> <div id="doc1" class="yui-t1"> <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> <div class="yui-g"> <div class="yui-u first">Lorem ipsum dolor lacus feugiat.</div> <div class="yui-u">Lorem ipsum dolor sit amet, acus feugiat.</div> </div> </div> </div> <div id="nav" class="yui-b">Navigation Pane</div> </div> <div id="ft">Footer is here.</div> </div> </body> </html>

## Creating the Layout Instance

Now we need to create an element based layout associated with the `#doc1` element (the root of the Grids based page).

Notice that we are setting a `height` and `width` config on the layout. These are needed since we are not attaching the layout to the body.

Now we create the Layout Unit configs to match the Grids CSS markup. Note: We are using the `grids` config option in the left and center units. The `grids` config option will attempt to remove some of the Grids CSS classes that interfere with the Layout's design.

Finally we add a listener to the Layout instance for the `beforeResize` event. Here we again want to set the height of the `#doc1` element to the height of the browser window.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; Event.onDOMReady(function() { var layout = new YAHOO.widget.Layout('doc1', { height: Dom.getClientHeight(), //Height of the viewport width: Dom.get('doc1').offsetWidth, //Width of the outer element minHeight: 150, //So it doesn't get too small units: [ { position: 'top', height: 45, body: 'hd' }, { position: 'left', width: 160, body: 'nav', grids: true }, { position: 'bottom', height: 25, body: 'ft' }, { position: 'center', body: 'bd', grids: true } ] }); layout.on('beforeResize', function() { Dom.setStyle('doc1', 'height', Dom.getClientHeight() + 'px'); }); layout.render(); //Handle the resizing of the window Event.on(window, 'resize', layout.resize, layout, true); }); })();

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### Layout Manager Examples:

- Full Page Layout
- Layout inside a resizable Panel
- Using a Layout with Grids CSS
- Nesting a layout
- Layout with Menu Controls
- Simple Application
- Complex Application
- Skinning a Layout

### More Layout Manager Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings