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”

One way to ensure the layout degrades gracefully is add an #id or .class to the body, then remove it with js. Then just add specific styling for when js is disabled, eg:

$(“body”).removeAttr(‘id’);

body#nojs #primary { width: 550px; float: left; }
body#nojs #secondary { width: 200px; float: right; }

Etc.. 🙂

Thanks- this is pretty much all I’ll be using in my websites for the near future.

@Neal G – Glad you like it! That’s exactly what I wrote it for, have fun experimenting!

@Luciano – Nice! However, your scripts appears to generate actual table elements. The problem with that is that many screen readers read from the JS-generated HTML rather than the source HTML, so you’ll still have the accessibility issues that come with using tables for layout.

By Post Author

This is pretty cool! I’ve been waiting a long time to finally tinker with the advanced layout module and now I finally can. I’m a bit hesitant to use this in any production environment, but just the ability to work with and learn the CSS syntax is great!

Fantastic work! Just FYI: I was sad when I saw that it seemed to be IE7+ only, but I’ve just tried the example page on IE6 and, with the exception of #3 and #8, they all seem to render pretty much perfectly! I’m definitely going to be playing with this…

Thanks Molly! Your tweet did what mine could never do. 🙂

Also thank you Paul and Tjeerd! To you and anyone else who’s made an experimental design, feel free to share the pages you’ve created or any trouble you’ve ran into.

By Post Author

Wow Alexis! I Twittered about this and within a minute it’s been Retweeted ’round the world. To raise awareness and show what can be done, much less what is desperately needed in terms of layout is a great service that you’ve done here. Thank you so much.

@David – Thanks! No, I’m afraid no dynamic changes are supported yet. That is something I should look into though, so thanks for the reminder.

@Rob – Thanks, and true. There shouldn’t be anything stopping one from using them, though. Should work as expected except for perhaps when a slot consists of multiple elements. Each element would have then have rounded corners, rather than the slot as a whole.

By Post Author

Nice work, hopefully it’ll make it easier for people to do layouts they want. One thing I noticed in all the demos tho, none of the slots have rounded corners 😉

I love this news !

Hopefully it’ll push browsers implementers that way.
Great !

i suppose it doesn’t (yet) support dynamic template/DOM changes ?