YUI Grids

The Yahoo Grids CSS reference documents how to use Yahoo’s Grid. Compass helps you make the Yahoo Grid apply to your semantic document. It does this by allowing you to customize the selectors used to identify your elements participating in the document layout. For more information see Making Semantic YUI Grids.

Source

See the YUI Grids Module.

Importing

To import the YUI Grids Module to any Sass File:

@import yui/modules/grids.sass

Constants

The YUI Grids Module uses the !yui_default_base_font_size constant defined in the fonts module to determine what em values it should generate to achieve a desired pixel width.

Class & Element Mixins

Class mixins provide classes and/or define styles for elements. These will be scoped according to the selector you mix them into or they can be mixed into the top level of your stylesheet.

Mixin	Description
+yui-grids	Generates the YUI Standard grid templates and grid divisions. This is a short cut for mixing in +yui-grids-init, +yui-grid-templates, and +yui-grid-divisions mixins.
+yui-grids-init([footer, body])	Initilizes the page to work with YUI grids. This will also define a footer and body selectors that default to “#ft” and “#bd”.
+yui-grid-templates	The default YUI document templates as described here. These are built on the +yui-document, +yui-two-column-left-template, and +yui-two-column-right-template Style mixins
+yui-grid-divisions	Generates the YUI Standard grid divisions. These class names can be customized for semantic markup. See Making Semantic YUI Grids for details.

Style Mixins

Style mixins provide styles that can be mixed into any selector.

Mixin	Description
+yui-grids-footer	Sets styles required by YUI for the footer of your page. By default an element with the ID of ft will be considered the footer. The selector to use for your footer can be supplied as an argument to +yui-grids-init mixin.
+yui-grids-body	Sets styles required by YUI for the main content div of your page. By default an element with the ID of ft will be considered the footer. The selector to use for your footer can be supplied as an argument to +yui-grids-init mixin.
+em-size(style, px_size[, base_font_size])	Emits the style specified set in ems that will display as the size in pixels specified. E.g. +em-size("width", 50px). The base_font_size defaults to the !yui_default_base_font_size which defaults to 13px and is used to properly calculate the em value.
+em-size-hacked(style, px_size[, base_font_size])	Like +em-size, but will generate an additional style rule hacked to account for IE6 bugs.
+yui-document(width[, min_width, base_font_size])	This mixin is used to generate YUIs #doc thru #doc4. You can use it to create a document container of the specified width. Width can be any number specified in pixels or “fluid” to create a document that flexes with the width of the browser. min_width and base_font_size default to 750px !yui_default_base_font_size respectively.
+yui-two-column-left-template(column_width[, main_selector, block_selector, document_width, min_width , base_font_size])	This mixin builds on top of +yui-document; the arugments document_width, min_width, and base_font_size are passed through to it. column_width specifies the width of the left column. The optional argument main_selector default to “#yui-main” and the optional argument block_selector defaults to “.yui-block” which you should recognize from yahoo’s documentation.
+yui-two-column-right-template(column_width[, main_selector, block_selector, document_width, min_width , base_font_size])	Like +yui-two-column-left-template but places the fixed width column on the right side of the page.