YUI Library Home

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.

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)

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.

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.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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