YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

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.

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings