Yahoo Grids add-on

An interface to Yahoo Grids. Improves layout of topics by enabling columns in topics. Various column widths and configurations are supported. Nested columns are possible.

This add-on only installs 1 css file, and can be used safely with non-Yahoo javascript libraries.

Examples

Sandbox.YahooGridsAddOnExamples

Usage

Creating a 2 column grid - at a glance:

1. Create content sections, one for each column
2. Include the column definition
3. Load the required stylesheet

Step 1: Create content sections

We have 2 columns, let's call them mainleft and mainright (you are free to choose section names). The section stubs are:

%STARTSECTION{"mainleft"}%
contents of the main left column
%ENDSECTION{"mainleft"}%

%STARTSECTION{"mainright"}%
contents of the right side column
%ENDSECTION{"mainright"}%

If you do not want to have the section definitions appear twice on the page, wrap these inside a hidden verbatim:

<verbatim class="foswikiHidden">
%STARTSECTION etcetera
</verbatim>

Step 2: Include the column definition

Include TwoColumnDefinition? and pass column type and section names.

To make the section contents appear in a two column grid, where the right column is 300px wide:

%INCLUDE{
"%SYSTEMWEB%.TwoColumnDefinition"
section="300right"
CONTENTTOPIC="%BASEWEB%.%BASETOPIC%"
COL1="mainleft"
COL2="mainright"
}%

Explanation of the attributes passed to this macro:

• section name: one of the column type configurations of the definition topic
  • for example: onethirdleft, 160left, 300right
• CONTENTTOPIC: the topic the content resides in. This can be a different topic.
• For 2 columns (defined in TwoColumnDefinition? ):
  • COL1: name of the section that contains left column contents
  • COL2: name of the section that contains left column contents
• For 4 columns (defined in FourColumnDefinition? ):
  • COL1: name of the section that contains column 1 contents
  • COL2, COL3, COL4: section names for the other columns

Step 3: Load the stylesheet

Load the CSS file either in a template or in a topic.

In a template write:

<style type="text/css" media="all">
   @import url("%PUBURLPATH%/%SYSTEMWEB%/YahooGridsAddOn/grids-min.css");
</style>

To use this in a topic only:

%ADDTOHEAD{"yahoogridsaddon" text="<style type=\"text/css\" media=\"all\">
@import url(\"%PUBURLPATH%/%SYSTEMWEB%/YahooGridsAddOn/grids-min.css\");
</style>"}%

Column definitions

Choose from several configurations:

• TwoColumnDefinition? - defines for example: onethirdleft, 160left, 300right
• ThreeColumnDefinition?
• FourColumnDefinition?

Stylesheet classes

This addon uses a number of CSS classes, mainly to set extra paddings or background colors:

• .ygColumnLeft - right column
• .ygColumnRight - right column
• .ygColumn - a column that is not a left nor a right column

To create even spacing of .5em between columns, use this style definition:

.ygColumn {
   padding:0 .5em;
}
.ygColumnLeft {
   padding:0 .5em 0 0;
}
.ygColumnRight {
   padding:0 0 0 .5em;
}

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Test

If installed, you will see 2 columns. View the source (view raw) if you want to start with a working example.

%STARTSECTION{"testleft"}%
3/4 <br />
contents of the main left column
%ENDSECTION{"testleft"}%

%STARTSECTION{"testright"}%
1/4 <br />
contents of the right side column
%ENDSECTION{"testright"}%

Warning: Can't find topic System.TwoColumnDefinition

Troubleshooting

TML formatting messed up

If TML markup doesn't create proper HTML, a reason could be that you have written STARTSECTION in a condensed way, like:

%STARTSECTION{"mainleft"}%---+ Topic title%ENDSECTION{"mainleft"}%

This doesn't work out, because the content of the section definition does not start on a newline. Instead, put the contents on a new line:

%STARTSECTION{"mainleft"}%
---+ Topic title
%ENDSECTION{"mainleft"}%

Overlapping columns

Overlapping can occur when columns are nested - this is a known bug with the grid library. Even if you don't do the nesting yourself, it can occur if you use a skin with a sidebar that is based on Yahoo Grids.

Further information

This add-on uses YUI Grids version 2. See http://developer.yahoo.com/yui/grids/

AddOn Info

Copyright ©:	2009, 2010 Arthur Clemens
License:	GPL, Yahoo licence (BSD)
Dependencies:	None
AddOn Version:	1.1 (02 Jan 2010)
02 Jan 2010	1.1 Changed LEFTCOL and RIGHTCOL to COL1 and COL2. The definitions now ignore empty section names. Added examples.
04 Dec 2009	1.0 First release.
Demo url:
Home:	http://foswiki.org/Extensions/YahooGridsAddOn
Support:	http://foswiki.org/Support/YahooGridsAddOn