Transformer layout jQuery plugin adds support for CSS3 media queries (min-width and max-width) across all browsers allowing you to develop layouts that adapt depending on the current window width, text size and zoom level without horizontal scrolling.
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! That said, media queries can also be used to create fixed-width layouts that adapt for low resolutions.
The Transformer layout plugin is the culmination of ideas from:
- Supplementing functionality for browsers that support media queries but don’t recalculate the layout on zoom (for example: Chrome and Safari).
emunits in media queries (providing seamless account for text size along with resolution).
Place the following code in the
<head> of your XHTML document.
Next: Add your linked stylesheets using media queries to the
<head> of your document.
<link href="layout-small.css" media="all" rel="stylesheet" type="text/css" /> <link href="layout-medium.css" media="only all and (min-width: 30em) and (max-width: 60em)" rel="stylesheet" type="text/css" /> <link href="layout-large.css" media="only all and (min-width: 60em)" rel="stylesheet" type="text/css" />
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.
link contains “
all” in the
media attribute, making this
To avoid flicker in browsers that don’t support CSS3 media queries natively, initialise the script as soon as possible after the opening
The transformer layout plugin has been tested in:
- Firefox 3.6.3
- Chrome 4
- Safari 4
- Internet Explorer 6, 7 and 8
- Opera 10.51
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 3.1 example package (.zip)
- jquery.transformer-layout.js 3.1 (10 kB uncompressed)