Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Layout (row-based) (gallery-layout-rows) on cdn

Last Updated: 04/17/13

+ 0 -

John Lindal

YUI Contributor

See 50 more by this user.

Created: 12/14/11
Last CDN Push: 05/16/12
Build Tag: gallery-2012.05.16-20-37
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

This plugin for Page Layout (http://yuilibrary.com/gallery/show/layout) provides fluid-width and fluid-height layout, supporting any number of rows of modules sandwiched between (optional) page header and footer. The layout is specified in the markup by attaching classes to the appropriate divs, so you can continue to build the contents of each module the way you normally do.

Each module is subdivided into header, body, and footer, and the body adjusts to the available space. Modules can be collapsible.

Row heights and module widths are normally specified as percentages, embedded in the divs' CSS data. (It is possible to set a fixed height for a row or a fixed width for a module, by adding a CSS marker class to the appropriate div and use CSS to specify the size.)

For a column-based layout, see the gallery module: http://yuilibrary.com/gallery/show/layout-cols

Instantiating the component is easy. Refer to the examples to see the required DOM structure.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.05.16-20-37'
}).use('gallery-layout-rows', function(Y)
{
  // instantiate the component -- automatically scans the DOM
  var layout = new Y.PageLayout();
});