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).
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.
Place the following code in the
<head> of your XHTML document.
To avoid flicker, initialise the script as soon as possible after the opening
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.
A complete demonstration of the Transformer layout plugin is available.
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.
Download the complete Transformer layout 2.2 example package (.zip)