YUI Library Examples: Layout Manager: Using a Layout 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.

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

Create the Grid Markup

Creating the Layout Instance

Configuration for This Example

Layout Manager Examples:

More Layout Manager Resources: