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”

@Rusco – I do believe it should theoretically be possible to accomplish that using CSSTL, but unfortunately not currently with the script. This is because you’d need the template element to be positioned absolutely, which doesn’t work as expected using the script. Hopefully I’ll get around to adding support for that in the future.

For now, take a look at this demo. It uses some CSS hacks for IE and an extra DIV, but aside from that I believe it accomplishes what you want (without that text overflow issue).

By Post Author

Hi Alexis,
I put an example here: http://pastebin.com/d5fdc59eb

Have a look at the css where I wrote:
position: absolute; top: 50%; margin-top: -170px;

If you enlarge/reduce the screensize, the relationship of the header/body/footer somehow follows, you have a “centering” effect.
In your plugin, if I assign a fixed “hhh” /200px in the header, I will always stick to the 200px.

How would I translate my pastebin into css3 layout ? Is there an equivalent ? If I am not wrong your samples do not cover that.

Another issue I have with this sample is that with a very narrow screen the blue background does not cover all the text, but this is another story.

@Mitch – That is a good question. I don’t see where the spec addresses this, though I’m pretty sure it should just leave the slot empty. I’ll make the appropriate change in my next update. Thanks!

By Post Author

@c10 – The current version of the draft mentions that only the following styles can be applied to slots:

  • All background-* properties (including the ‘background’ shorthand).
  • ‘vertical-align’
  • The ‘overflow’ property.

So borders can not be speficied. However, support for borders has been requested so it may be possible in future versions of the spec.

If you provide me with a demo page of what you’re trying to do, perhaps I can help find a solution?

Also, while I think it should work in jQuery 1.2.*, it was tested in 1.3, so that’s the version I would recommend you use.

By Post Author

@Rusco – I’m afraid I’m not sure how to recreate the problem you refer to in regards to the effects of changes in resolution. While I think I know what you mean, I don’t see how it could be done using tables either. So, if you could provide me with a demo where it is done using tables, I’ll be happy to look into it (and I suspect it should be possible in that case)

Also, thanks for the CSSugar suggestion. Looks good, but the problem is that there’d be no styles applied for users without JavaScript. And while indeed the CSSTL rules could theoretically be defined outside of the stylesheet, I really wanted people to be able to use the rules as if they were implemented by the browser today.

By Post Author

Thanks for your reply Alexis. You recommend using a linked stylesheet which is fine when linking to an external server. However, in some cases this code will need to access a local stylesheet which of course can’t be directly retrieved via JS.

In the case where local access is required I can load the stylesheet into a style tag or I could load it into a variable and pass it in via the options object. Unfortunately when I tried this last method I wasn’t able to get it to work at all, probably because I have the syntax wrong.

Would you be able to give me a detailed example of calling in a stylesheet via the text option? Alternatively, could you explain in more detail the possible dangers of leaving the code as is with a call to html() instead of text().

Thanks very much for your help,
Michael 🙂

@Mike – While html() indeed appears to work in IE it actually returns a parsed version of the text, removing some of the unknown rules/values. So detecting a text() failure and using an alternate solution works better. Actually I’d recommend Just using a linked stylesheet.

By Post Author

Hi Alexis

Wonderful work mate and exactly what I was looking for in a templating application. Thanks very much!

I have a code change suggestion to make and would appreciate your comments. When loading the CSS from a style tag you use:

css_data = st_el.text();

which doesn’t work in IE. Instead for IE you use a “get” of the whole page which in some cases doesn’t work (e.g. when embedding IE). I switched this code to use

css_data = st_el.html();

and it all seems to work fine, but I have only tested under IE. I’m a complete newbie to jquery so I’m wondering if there is some reason why text() is used instead of html()?

Cheers,
Michael

Just to let you know, this might be a way to avoid the additional stylesheet call in the $.setTemplateLayout(…); function:
its the cssugar project, which wraps all css statements in a json format.

Quick note: I’ve been a bit busy lately, but do I eventually intend to fully address the issues that have raised here recently.

Thanks for the feedback, keep it coming!

By Post Author

I took a look — great work, very commendable to put something like this out.

Suppose that we define a template:
display:
“aabr” /65px
“cccr”
“ffff”
* * * 5px
;
where some div is assigned to each position except for “f” . Then jquery.tpl_layout1.1.4.js does not format the CSS3. I’ve tried two other examples that suggest that whenever an “unused” letter is placed into a display string, the emulation fails entirely.
Is it an error in CSS3 to define a slot but not put something into it, or is this a bug?

src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”
src=”http://css-template-layout.googlecode.com/files/jquery.tpl_layout1.1.1.js”

Sorry I am messing up your comments. This time without the script tags

BTW.
If I use this in my header:

$(document).ready(function()
{
$.setTemplateLayout()
});

do I also need to download the latest version of Jquery?

Hi,

This is great new stuf!! Thanx! I build one testpage and the one thing I really hoped for was the border left and right to work the same as the background color (till the bottom of the longest collumn

body::slot(a) { border: 1px solid; } this is not possible yet I believe?!

or….. is there maybe a way to get that done?

Hi Alexis,
your great plugin solved my layout troubles, thanks a lot !

Well, almost. Now I tested my site with various screen resolutions and found out that specifying an initial height for the header hides my footer if the screen resolution is low (ex. 1024*768), but pulls my screen content up if the resolution is high (ex. 1280*1024).

So what could help me is a percentage rather a fixed height. But I don’t know whether this is foreseen by the css3 spec. Have you any ideas/proposals ?

Good old tables could handle that !

Oi Alexis,

why using $.setTemplateLayout(“JQtp.css”) works well in all browsers and
using $.setTemplateLayout(“../../JQtp.css”) don’t works only on firefox?

How do I fix it?