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 (column-based) (gallery-layout-cols) 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 columns of modules stacked 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.

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

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

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-cols', function(Y)
{
  // instantiate the component -- automatically scans the DOM
  var layout = new Y.PageLayout();
});