Categories
Web development

Ready for use: CSS3 Template Layout

Example of template layout system

I’m happy to announce the latest project I’ve been working on:

A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the “CSS Advanced Layout Module”.

The spec is still a “working draft”, so it can still change significantly. But while that status hasn’t stopped browsers from implementing other CSS3 modules, so far none have tried implementing this one.

Inspired by Eric Meyer‘s Call for a layout system as well as his suggestion that many CSS features can be made to work using JavaScript, I went to work. Why wait for browsers to implement something when we can have JavaScript take care of it today?

The advantages to using this system include:

  • Source independence, so there’s lots of possibilities with the same markup
  • All the benefits of a table-like design without the drawbacks
  • Instant overview of how the basic layout works just by looking at the CSS
  • No need for div-heavy CSS frameworks just to accomplish a simple design
  • Easy rearranging for different media (print, mobile)

The disadvantage to using JS rather than native support means of course that those with JavaScript disabled won’t see the intended layout. However, considering the HTML content can me put in almost any order, there is still a lot of flexibility in how it will appear to non-JS users.

The script has been tested and confirmed to work in the following browsers:

  • Internet Explorer 7+
  • Firefox 2+
  • Opera 9.6+
  • Safari 3.1+
  • Chrome 1+

For download, demos, and usage, see the Project page. Contributions welcome!

76 replies on “Ready for use: CSS3 Template Layout”

@linuxchiq, Henry

After an inexcusable delay, I’m happy to say this has been fixed in version 1.1.6. Update available on the project page. Thanks for letting me know!

By Post Author

I agree with linuxchiq, the script doesn’t work on IE 8 if using jQuery 1.4.2. If I use jQuery 1.3, it works well.

Adding “height:100%” to the CSS of the slot-containing element completely destroys the whole layout. Is this expected behavior or is this a bug in your great script?

Hello Alex
Adding “height:100%” to the CSS of the slot-containing element completely destroys the whole layout. Is this expected behavior or is this a bug in your great script?

Thanks so much for doing this! I am excited about using the new css3 features. ^_^

I did encounter an issue in IE (7 & 8) when using the latest jQuery (1.4.2), where the page would not display (worked perfectly in firefox). By downgrading to jQuery1.3.1 the page displays more or less correctly, though I still get an “error on page”. Just thought you’d want to know.

Wow, this got me really excited again about css!

Just a remark: if I use this:
display: “.hh.” /100px
“.nc.”
“.ff.” /200px
5% 200px * 5%;
Then the layout doesn’t work, it’s not centered anymore.
If I remove the last height declaration “/200px” it works again (the first /100px works correctly).

This in pursuit of my personal “holy grail”: a layout without tables, where my footer is on the bottom of the page, even if the 2nd row (“.nc.”) has not enough content.
Do you have any idea how to accomplish this, with CSS Layout?