Dynamic Layout

Dynamic Layout is a simple JavaScript library that allows you to easily adjust page layout based on the current browser width.

The script works by modifying the class property on the body element, adding a new class that will look something like bw-1000, where "1000" is one of the numbers in a predefined list of possible browser widths.

By default, the script uses three window sizes: 800px, 1000px, and 1200px. Dynamic layout chooses the largest possible size that fits within the window. If the window width is smaller than the smallest specified width, the bw-min value will be used as the class name.

Usage

You must first add the following line of code into your HTML file, right after the <body> tag:

<script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.min.js"
        type="text/javascript"></script>

Important: Make sure you place this line of code right after the <body> tag, and not within the <head> tag, otherwise this script will not work (see below for an explanation why)

Note: You will almost certainly want to copy the script to your own server. If you do so, make sure to update the src property to point to your local copy of the script file

You can tell the script to use custom screen widths by setting the sizes query string property to a comma delimited list of numbers. For example, to set the window sizes to 600, 800, and 1200 you would use the following code:

<script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.min.js?sizes=600,800,1200"
        type="text/javascript"></script>

You're now ready to write CSS rules that depend upon the screen size. To do so, make sure you use CSS selectors based on the browser width you're trying to target. Here's an example:

/* Default: Basic padding, no fixed size */
#content
{
  padding: .5em;
}

/* 800px: Set content to 500px and center */
.bw-800 #content
{
  margin: 0 auto; /* Center content */
  width: 600px; /* Fixed width */
}

/* 1000px: Wider content, plus larger line-spacing */
.bw-1000 #content
{
  margin: 0 auto; /* Center content */
  width: 800px; /* Fixed width */
  line-height: 2; /* Larger line spacing due to longer lines */
}

Tip: Note that, in the example above, we had to specify the margin property for both the 800px and 1000px cases. If you wish to share code between sizes, you must use the correct CSS selectors to do so.

Download

Live Demos

FAQ

Why must the script be placed within the <body>?

Because this script modifies the class property on the body, we must wait until the body element has been created before we can modify it.

Why not just use a `load` handler to get around that restriction?

  1. It's more code
  2. It creates more of a delay before the class property is changed, which can cause a jarring change in the page's layout.

But I thought scripts were supposed to go at the end of the document?

Generally, they are. However, in this case the script is causing the document's layout to be changed, and we generally want that to happen as soon as possible -- otherwise, users can end up seeing a jarring layout transition after the page has fully loaded.

Browser Compatibility

Tested in, and compatible with:

Source Code / Collaboration

If you're interested in SVN access, or possible collaboration, see the Dynamic Layout project at Google Code.

Bugs / Issues

Please report issues in the issues list on Google code.

License

All code (including demos and tests) is available under the MIT license.

Credits

The original inspiration for this script comes from the Man in Blue. I modified his code to enable sandbox-style CSS selectors, and to accept query string arguments for sizes.