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!
Tags: CSS, CSS3, JavaScript, jQuery, template layout
April 23rd, 2009 at 10:17 am
I love this news !
Hopefully it’ll push browsers implementers that way.
Great !
i suppose it doesn’t (yet) support dynamic template/DOM changes ?
April 23rd, 2009 at 10:32 am
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
April 23rd, 2009 at 11:03 am
@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.
April 23rd, 2009 at 10:19 pm
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.
April 23rd, 2009 at 11:10 pm
Fantastic! I can’t wait to try some things with this.
April 24th, 2009 at 3:57 am
Thanks for creating this! Will definately try it on my experimental website.
April 24th, 2009 at 8:12 am
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.
April 26th, 2009 at 6:57 pm
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…
April 28th, 2009 at 8:30 am
[...] full blog entry goes into a bit more [...]
April 28th, 2009 at 8:44 am
[...] layout using CSS. Until recently it was known as the “CSS Advanced Layout Module”. His full blog entry goes into a bit more detail.We covered John Resig’s thoughts on the CSS3 Advanced Layout [...]
April 28th, 2009 at 9:40 am
[...] full blog entry goes into a bit more [...]
April 28th, 2009 at 10:56 am
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!
April 29th, 2009 at 11:27 am
[...] full blog entry goes into a bit more [...]
April 29th, 2009 at 11:28 pm
[...] full blog entry goes into a bit more [...]
April 30th, 2009 at 8:01 am
I use a JavaScript based layout on my website since november 2007: http://www.cromoteca.com/en/blog/tablebasedlayoutswithsemantichtml
April 30th, 2009 at 12:33 pm
@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.
May 1st, 2009 at 1:07 am
[...] Ready for use: CSS3 Template Layout (Fyrdility) [...]
May 1st, 2009 at 9:54 am
Thanks- this is pretty much all I’ll be using in my websites for the near future.
May 1st, 2009 at 4:13 pm
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..
May 1st, 2009 at 9:22 pm
[...] CSS3 Template Layout [...]
May 2nd, 2009 at 7:04 am
[...] Ready for use: CSS3 Template Layout | Fyrdility [...]
May 2nd, 2009 at 4:38 pm
[...] jQuery plug-in for use with the CSS Template Layout Module [...]
May 3rd, 2009 at 9:19 am
@Alexis: Wow! I didn’t know that, thanks for letting me know.
May 3rd, 2009 at 6:42 pm
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!
May 5th, 2009 at 12:07 pm
“Incredibelievable!”
May 5th, 2009 at 7:46 pm
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; }
May 6th, 2009 at 7:54 am
@Neal – Good point, thanks for reporting that. I believe it’s an issue that’s been fixed in V1.1.1. Here’s your example code with the latest version of the script, which seems to be working.
May 6th, 2009 at 9:48 pm
Thanks Alexis! Much better! I was starting to re-write my article’s code and was getting stuck on that.
May 6th, 2009 at 9:55 pm
Doing website is like making software nowadays. Nice article to read.
May 7th, 2009 at 9:21 pm
[...] full blog entry goes into a bit more [...]
May 8th, 2009 at 6:52 pm
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
May 13th, 2009 at 3:06 pm
[...] Ready for use: CSS3 Template Layout | Fyrdility A jQuery plug-in to provide support for the CSS Template Layout Module. (tags: a.deveria.com 2009 mes4 dia13 layout jQuery javascript emulator CSS *****) [...]
May 15th, 2009 at 9:24 am
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!
May 15th, 2009 at 9:38 am
@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.
May 15th, 2009 at 9:44 am
I wasn’t aware of that. Excellent !!!
You’re definitely the best.
May 16th, 2009 at 12:11 pm
Next stop: make all css selectors work in all browsers. (css3, css2, css1)
May 16th, 2009 at 12:13 pm
Scratch selectors, make-it all work.
May 16th, 2009 at 12:14 pm
Or everything that it is do-able, at least.
May 28th, 2009 at 10:47 am
@Buguletzu
Actually, it seems that there already is a the full selector support script: http://andykent.bingodisk.com/bingo/public/jss/
As for “everything else”…I’m sure it’s just a matter of time before we see more CSS3 support scripts cropping up.
June 4th, 2009 at 5:47 am
[...] If you want to get a taste of using the CSS 3 Template Layout module, Alex Deveria has written a jQuery plugin which implements the syntax. [...]
June 12th, 2009 at 3:50 pm
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?
June 13th, 2009 at 9:01 am
Hm, I guess that’s something I need to fix for the next version. For now, try using the absolute path, i.e. http://example.com/css/JQtp.css
June 19th, 2009 at 9:28 am
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 !
June 23rd, 2009 at 10:45 am
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?
June 23rd, 2009 at 10:49 am
BTW.
If I use this in my header:
$(document).ready(function()
{
$.setTemplateLayout()
});
do I also need to download the latest version of Jquery?
June 23rd, 2009 at 10:54 am
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
June 23rd, 2009 at 10:51 pm
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?
June 24th, 2009 at 7:13 am
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!
July 1st, 2009 at 7:43 am
Wow! Can’t wait to try it out
That are great news, can’t wait to try it out, many thanx man!!! Your awesome!!!
Respect, Liviu
July 4th, 2009 at 3:26 am
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.
July 9th, 2009 at 8:45 pm
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
July 9th, 2009 at 8:59 pm
@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.
July 13th, 2009 at 2:57 am
[...] Ready for use: CSS3 Template Layout | Fyrdility [...]
July 14th, 2009 at 1:51 am
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
July 14th, 2009 at 7:50 am
@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.
July 14th, 2009 at 8:04 am
@c10 – The current version of the draft mentions that only the following styles can be applied to slots:
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.
July 14th, 2009 at 8:35 am
@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!
July 15th, 2009 at 6:55 am
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.
July 16th, 2009 at 10:23 am
@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).
July 18th, 2009 at 10:32 am
nice
July 19th, 2009 at 8:39 pm
That are great news, can’t wait to try it out, many thanx !
July 20th, 2009 at 6:23 am
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?
July 25th, 2009 at 9:36 am
[...] Ready for use: CSS3 Template Layout | Fyrdility [...]
August 29th, 2009 at 4:40 am
I’d assume that it works similarly to tables, but layouts aren’t hindered by strange rendering of floats and borders and whatever.
December 13th, 2009 at 3:21 am
Is it possible to stich my footer to browser’s window bottom?
February 3rd, 2010 at 12:47 pm
Really useful information! You did good job
February 10th, 2010 at 7:15 am
Anatolia Vasermanu would have loved your post!
June 7th, 2010 at 2:23 am
you did a greaat job, Useful article for me
June 7th, 2010 at 6:45 pm
Great write up, I liked the project page as well! Keep up the hard work!
June 13th, 2010 at 2:52 pm
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.
July 14th, 2010 at 6:14 am
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?
July 20th, 2010 at 5:50 am
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?
July 21st, 2010 at 9:07 am
Really helpful article…
July 28th, 2010 at 11:23 pm
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.
August 9th, 2010 at 10:43 am
@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!
August 16th, 2010 at 7:15 am
Thanks so much for doing this! I am excited about using the new css3 features. ^_^
February 14th, 2013 at 3:50 pm
windows 7 touch screen…
Fyrdility » Blog Archive » Ready for use: CSS3 Template Layout…
February 14th, 2013 at 5:07 pm
online kolikkopelit…
Fyrdility » Blog Archive » Ready for use: CSS3 Template Layout…