Transformer layout (version 2)

Transformer layout jQuery plugin adds layout classes to the body tag depending on window width, text size and zoom level.

These classes can then be used to adapt a design into different layouts for different window widths (as measured relative to text size, see empixels).

Each layout can then be liquid so as to always make the best use of space. This provides the benefits of both liquid and elastic layout approaches!

This is a solution that means a design can be optimised independently for an almost limitless range of different devices, screen resolutions and text sizes.

The Transformer layout plugin is based on combining ideas from:

Transformer layout plugin relies on the resize events plugin to report when the window or text size has changed.

I believe COPR to be a similar theoretical technique, although no concrete examples of COPR have been provided.

Examples

Place the following code in the <head> of your XHTML document.

Note: For best performance, it is recommended that you combine all JavaScript files below into a single minified file.

<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.resize-events.js"></script>
<script type="text/javascript" src="jquery.transformer-layout.js"></script>

To avoid flicker, initialise the script as soon as possible after the opening <body> tag:

<body>
	<script type="text/javascript">
		$('body').transformer({
			layouts : [
				// [minimum window width in empixels, layout-class to apply],
				['60', 'layout-very-large'],
				['50', 'layout-large'],
				['40', 'layout-medium'],
				['20', 'layout-small'],
				['0',  'layout-very-small']
			]
		});
	</script>
...

Usually, three layouts are enough for most sites (for example: small, medium, and large), but there’s no limit to the number of different layouts that can be specified.

The number specified in the array before each layout-class represents the minimum value for window width in empixels that the layout should apply to. That layout will then apply for all values up to the next layout specified with a greater empixel value.

Download

Transformer layout is licensed under the The GNU General Public License (GPL), by downloading and/or using it you are agreeing to abide by the terms of that license.

Package

Download the complete Transformer layout 2.2 example package (.zip)

Individual files

Posted in

Leave a reply