Introducing the Dynamic Layout Library

July 14, 2008 Tagged: css, dynamiclayout, javascript, layout, library

I’m happy to introduce version 1.0 of my Dynamic Layout JavaScript library.

Dynamic Layout is a simple 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 name that will look something like bw-1000, where 1000 is one of the numbers in a predefined list of possible browser widths.

Unless you’re reading this in your RSS reader, you can see a live demo by resizing your browser window. I’ve also created a simple multi-column demo, which will display one, two, or three columns depending on your browser width.

To download, and for details, see the Dynamic Layout project page.

Noam A.

Hey Filipe, whats the advantage of using this library compared to floating divs and % for widths?

Fortes

The advantage is that even percentage-based layouts won't look great at all sizes (columns can end up too big or too small as you get to very large or small screens). Floating divs can work OK in some situations, but not always.

It really depends on the situation though, not all pages would get much use out of the script, but for some projects, it's been really useful for me, so I decided to release in case others wanted to use it as well.

Noam A.

Cool, thanks for releasing it. I'll try to play around with it when I get a chance. As for the column sizes too small or large I agree it's an issue, same with weired floating behaviors. My current solution is to set min widths, so that it doesn't get crazy once the browser is smaller than the standard screen size (960px).

Fortes