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”

@Sammy – Thanks! Glad to be of help.

@David – Actually, it already does. 🙂 I’m not 100% sure it works of course, but there’s a “hasNativeSupport” function that creates an element with a display value of ‘ “@” ‘. If that value is returned when checking the value of its display property afterwards, it is assumed that the functionality is supported and the script will stop running.

By Post Author

Hi Alexis,

do you think you can add adapt the script so that it will be compatible with browsers supporting the spec natively ?
i mean detect if the UA already do the layout as expected, and then stop the script.
i know you like challenges 😉

well maybe it’s way too early to bother with such a problem, since there is no native implementation yet. but i think it’s something that you will have to do, sooner or later.

cheers!

Dear Alex Deveria,

I just want to say thank you. Thank you so much for your wonderful contribution to the web community.

I was aware of “Advanced Layout module” for about 2 years and always dreamed of laying out sites with this module. I knew It was just a dream and it is years away, however with your wonderful javascript plugin I can build websites that are much more accessible than tables.

All the best and keep the good work
Sammy Sumer

Alexis, how do I give a :slot() or a child such as #content padding while keeping the background-color. I’ve tried putting padding on #content and #container::slot(c) but neither give me the desired result.

#container {
display:
“hhh” / 100px
“nnn”
“sca”
“fff” / 100px
200px 600px 200px
;
margin: auto;
width: 1000px;
}

#header { position: h; }
#content { position: c; }
#subnav { position: s; }
#nav { position: n; }
#aside { position: a; }
#footer { position: f; }

#container::slot(h) { background: #eee; }
#container::slot(n) { background: #ddd; }
#container::slot(s) { background: #ccc; }
#container::slot(c) { background: #bbb; }
#container::slot(a) { background: #aaa; }
#container::slot(f) { background: #999; }

Interesting. Now all I’ve to do is make sure everybody has js working…

Jokes aside, this should really come in handy when it’s actually implemented by the browser makers, since available solutions for no scripting users( like the one proposed by Chris) imply a lot of duplicate work which kind of defeats the purpose of all this. Whew!