Code license:	GNU General Public License v2
Labels:	CSS, CSS3, CSSTemplateLayout, JavaScript, jQuery, plug-in, CSSAdvancedLayout

Show all Featured downloads:
jquery.tpl_layout1.1.4.js

Links:	Related blog post W3 Specification
Feeds:	Project feeds

People details

Project owners:
	adeveria

JavaScript (jQuery) implementation of the CSS Template Layout Module

The project aims at providing web designers with a way to use the W3's CSS Template Layout Module today. As a jQuery plug-in, the script parses a given set of CSS rules and displays the content as indicated in the specification.

Options include the ability to select the CSS parsed, as well as an optional prefix to use for the CSS rules. Specifying a prefix allows style rules that are interoperable with a possible future browser implementations.

Script Usage

Any usage requires jQuery and this script to be referenced in the document's head:

<script src="jQuery.js" type="text/javascript"></script>
<script src="tpl_layout.js" type="text/javascript"></script>

Then, $.setTemplateLayout needs to be run once the DOM is ready. Thus by running it under:

$(document).ready(function() { /* run $.setTemplateLayout here */ });

Or simply:

$(function() { /* run $.setTemplateLayout here */ });

There are several ways provide the source CSS data and additional options for your template:

No parameters

$.setTemplateLayout();

Use the CSS from any STYLE elements on the page, no prefix.

File and prefix parameters

$.setTemplateLayout(filename, [prefix]);

filename is the CSS file name as a string.
prefix is the optional prefix to use for the template properties

Object parameter

$.setTemplateLayout(options);

options is an object with the following possible keys:

file (string) Same as filename mentioned above
prefix (string) Same as prefix mentioned above
text (string), CSS data with template information
delay (integer) Milliseconds for the script to wait until it applies the template information
fallback (string) Name of class to give to fallback link/style elements. This way you can set a stylesheet for non-JS users, without the styles being used for those using the template.

Examples

$(function() {
	$.setTemplateLayout('style.css', 'js');
});

Will use the template data found in style.css where the display and property rules start with -js-

$(function() {
	$.setTemplateLayout({
		text:	$('textarea').val(),
		delay:	1000
	});
});

Will use the CSS data given in a textarea, but only after a one second delay. No prefix is given, so it will just use regular display and property values.

Additional features

$.templateLayoutShowOnReady() - Run this before the DOM is loaded to prevent the brief appearance of the un-templated page.
$.redoTemplateLayout() - Use if you need to run the template process again, already done by default on a window's resize.
To change display and position template properties on elements, you can use jQuery's css( name, value ) function.

CSS Usage

The script is designed to be fully compatible with the W3 CSS Template Layout Module, so the specification is probably the best source for examples on how to use it.

Since the spec hasn't been finalized yet, it is recommended that you specify and use a prefix for the "display" and "position" template properties. The prefix can be any specified string, though you should avoid those used by browsers like moz, ms, o, webkit, and khtml.

For example, when using $.setTemplateLayout('style.css', 'foo') you will want to want your style.css file to include rules like:

body {
	margin: 0;
	padding: 0;
	-foo-display: "abc";
}

div#navigation { -foo-position: a; }
div#content { -foo-position: b; }
div#more { -foo-position: c; }