Transformer layout 3 (CSS media queries for all)

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.

Inspiration

The Transformer layout plugin is the culmination of ideas from:

This plugin is also based on the work of Alexander Farkas. I have improved on Alexander’s implementation by:

  • Supplementing functionality for browsers that support media queries but don’t recalculate the layout on zoom (for example: Chrome and Safari).
  • Supporting em units in media queries (providing seamless account for text size along with resolution).

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.4.2.js"></script>
<script type="text/javascript" src="jquery.transformer-layout.js"></script>
<script type="text/javascript" src="jquery.resize-events.js"></script>
<script type="text/javascript" src="pxToEm.js"></script><!-- Optional: Adds support for em units in media queries -->

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.

The first link contains “all” in the media attribute, making this link the default stylesheet used by browsers that don’t support JavaScript or media queries. By making your ‘small layout’ the default you are providing the most suitable layout for mobile devices that don’t support JavaScript or media queries.

To avoid flicker in browsers that don’t support CSS3 media queries natively, initialise the script as soon as possible after the opening <body> tag:

<body>
<script type="text/javascript">
	$.transformer({
		addClasses : true // optional classes added to body in all browsers
	});
</script>
...

Browser support

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

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 3.1 example package (.zip)

Individual files

Posted in

1 Comment

One Response to "Transformer layout 3 (CSS media queries for all)"

Leave a reply