Tuesday, April 28th, 2009

CSS3 Template Layout through jQuery

Category: CSS, jQuery

<p>

Alexis Deveria of “When Can I Use…” fame recently told us about his latest project:

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”.

His full blog entry goes into a bit more detail.

We covered John Resig’s thoughts on the CSS3 Advanced Layout Module before; you know, the idea of visually writing a table layout in your CSS file?

Alexis’ project is hosted at Google Code, and it includes various examples. Check it out!

Related Content:

Posted by Ben Galbraith at 8:30 am
16 Comments

+++--
3.4 rating from 51 votes

16 Comments »

Comments feed TrackBack URI

As we say here in Germany: Olle Kamellen! (stale news)

Comment by tonythunfish — April 28, 2009

This “solution” to layout continues to baffle me. The Advanced Layout Module has all the beauty of a pig and all the power of a moped. It does not specify relationships and constraints, substituting “eyeballing it” for the actual kinds of control that we really need. We can’t get hbox/vbox or layout springs/constraints…yet this is continually put forward as a solution? I thought the point of markup was to specify structure and the relationships between elements. If we’re going to do a template language, lets do a *good* one…one based on markup, not ASCII art.

It’s stunning, really. The spec editors should be forced to try to build real application layouts (say, the home screen of Google Docs) with this type of a system.

Regards

Comment by slightlyoff — April 28, 2009

@slightlyoff

What what I’ve read in the w3c mailing lists, plenty of the spec authors and browser developers think this is nonsense as well, and are actively discussing better approaches. Hopefully they’ll settle on one and Advanced Layout can be quietly dropped from CSS3.

Comment by Amtiskaw — April 28, 2009

We need MigLayout for the web!

Comment by ilazarte — April 28, 2009

Seems there should be a simpler way to do this without the ascii art. Plus this just seems to be another method of doing something we can already do with frames or tables. If we don’t like using frames or tables for layout then why is this better?

I look at that diagram and I see a simple table. So why shouldn’t I use a table for that case? Oh that’s right, because somebody says we shouldn’t use tables for layout but for tabular data.

Gotcha.

Seems that we have issues with how CSS works in terms of layout and instead of just making the existing CSS better we’re going to go to a layout system? More bloat? Is that what we need?

How about we take the CSS features that are lacking and fix them? Since most of the CSS issues I usually have are related to browser bugs how about we push to get those fixed? Can we get a real vertical align for gosh sakes?

As someone on Meyer’s site suggested, start asking web designers that have print experience what they think is wrong with CSS layout and go from there.

Comment by travisalmand — April 28, 2009

I agree that the Template Layout system is far from the ideal solution for all layout possibilities. I don’t think anyone in the W3C believes this either, which is why various different options are being explored.

However, I do believe the system has its merits and is worth keeping in place. Keep in mind that a LOT of websites are happy with table or table-like layouts. That’s the whole reason we got in this don’t-use-tables-for-layout mess. That’s the reason the “holy grail” layout emulates a table-like layout. This is the solution to that particular problem.

The Template Layout system also provides a way for non-professional authors to easily achieve what they’re likely to be looking for. They should be able to easily set up the basic layout of their site in CSS, without resorting to the use of tables, without requiring CSS frameworks and while still having control over the order of their content in their markup. That’s another reason to have this system.

So again, professional web designers are right to demand enough flexibility in CSS to not be restricted to table-like design. But at the same time, it can be very helpful in many situations, and deserves to be available as one of our layout options.

Comment by Fyrd — April 28, 2009

Ironic comments just after the post “Even designers are using CSS3?”… I don’t see the problem with using ASCII for layout? Basically what it comes down to is that layout for the web is a complete mess at the moment, and CSS3 templates is a proposed solution to address that, and it does it quite well. Perhaps someone could point to a post discussing the alternative – I’d love to see the options.

Fantastic work on this implementation Alexis! Only downside is that it requires Javascript ;-)

Comment by theallan — April 29, 2009

Ok, I understand. Layout with CSS is not always a simple task. Beginners wanting to layout a basic site may have issues without resorting to a template. But that’s what templates are for.

But I still think any solution of this nature that essentially builds a table, though simplified, is no different than just using a table. If I take a round, five-legged table and cut two legs off, is it not still a table?

How about we just take something we already have that does the job and make it better? As opposed to creating something new?

Comment by travisalmand — April 29, 2009

The problem with using a table for layout isn’t that it doesn’t do the job (we all know it does, it provided the main layout method on the web for many years), it’s that it is semantically incorrect. Template layout provides a method which gives us nearly all of the advantages and ease of use of tables, but provides a correct semantics for it. I don’t see the problem with that?

Template layout also separates layout from the markup, thus giving much better maintainability. Another point is that it provides future options for flowing some elements around others (a distinct advantage over tables), but they decided that was too difficult for layout engines to do in this first pass (shame).

The need for CSS templates seems to sum it up for me. If it’s such a barrier to entry that templates are needed – then there is a big problem somewhere. It’s like a software “wizard”. If you need a wizard for the software, then the software isn’t easy to use – a wizard is a bolt on “fix”, rather than addressing the actual issue.

Comment by theallan — April 29, 2009

@theallan

Thanks! And yeah, I hope some browser maker will give implementation a shot to deal with that slight problem… :)

@travisalmand

There’s a difference between a “table” as a construct to display tabular data, and a table as a layout design mechanism. We should not be using one when we want to be using the other.

Certainly the CSS display: table, etc values can be used to create the layout mechanism, but this is limited (no col/row-span, HTML still needs to be structured similar to a table, etc). That’s what the Template Layout system covers.

Comment by Fyrd — April 29, 2009

@Fyrd

I agree completely that some kind of templating system is desirable, but not in CSS! CSS is a styling language and its syntax is not designed for this, hence the horrible ASCII art syntax. As slightlyoff said in the second post in this thread, what’s needed is a template language based on markup, not CSS. So I can put some something like <link type=”text/template” href=”main.tpl” media=”screen” /> into my header and have it pull in a markup-based template sheet. That way we could keep content, styling and layout all separated, and we could write tools that just spit out template XML, instead of stuffing ASCII art midway through some CSS file.

Comment by Amtiskaw — April 29, 2009

@Amtiskaw – Doesn’t layout fall under the ‘style’ heading? It does at the moment with CSS2 (position, float, top etc etc) – so are you suggesting we should introduce some new specification for layout? What form would the markup for layout take? I can’t think of any markup examples which would be easier to understand than (for example):

abbc
dddd
eeff

Comment by theallan — April 29, 2009

@fyrd – If I use a table element for tabular data then it’s a table holding tabular data. If I use a table element for content layout then it’s a table holding content. The difference is only in how you describe what it is being used for. Granted this is just my opinion, but the layout system proposed is just a fancy table. There’s no reason I couldn’t use the layout system to display tabular data instead of the table element. It’s all in how you use it.

Now, you say it’s semantically incorrect and I can’t disagree. I would also say we have that problem in several cases in HTML/CSS but I don’t think adding more as opposed to make existing elements better is the solution. It’s like creating the datagrid element in HTML5 which is essentially a better table element, why not make table better?

Let me ask this, if it is incorrect to use a table to separate sections of content on the page then why is it correct to separate sections of content with divs on the page? What’s the difference other than saying “tables are for tabular data”?

Comment by travisalmand — April 29, 2009

@travisalmand – I believe changing the purpose of HTML tables to also support non-tabular data has been discussed and rejected by the W3C / WHATWG. Basically it comes down to the fact that it’s a styling issue, and therefor belongs in CSS.

Indeed, using divs to separate data isn’t ideal. That’s why HTML5 introduces sectioning elements (section, nav, article, header, footer). For now, divs are still better than table cells though, since it’s better to say “this is a section and this is a section” than “the content of this section is described by/related to the content in this other section”, which is basically what table semantics say.

The semantic thing is a big deal for screen readers, since looking at the types of elements used is their main method of figuring out what kind of content they hold.

Comment by Fyrd — April 29, 2009

@fyrd – Issues with screen readers is an excellent point.

Comment by travisalmand — April 29, 2009

@theallan

No, I think “style” should be things such as typefaces, colours, borders, etc, but not the layout of the page itself. I don’t believe the CSS syntax is at all suited to providing this kind of information. There are certainly elements in CSS that are (mis-)used for layout. Float, for example, was originally intended simply to control the position of an image within inline content, yet has become the workhorse of arcane and unintuitive CSS design practices. It is as much abused as the table element is/was. CSS needs simplifying and focusing on what it is good for, not expanding to be some monstrous panacea for every aspect of presentation.

There is a 2006 paper by Mozilla’s David Baron where he discusses the need for a user interface layout mechanism for the web ( http://xtech06.usefulinc.com/schedule/paper/146 ). It is a real eye opener, and it’s easy to see after reading this that a big driver behind the complexity of CSS-based development is the mismatch between the document layout algorithm and the desire for traditional user interfaces on the web. The reason table layouts are so popular is that they come closer to providing this kind of layout, albeit at the cost of semantic meaning in the HTML document.

What is needed is a UI/templating language. This language would probably look like Mozilla’s XUL or Microsoft’s XAML. That ASCII art syntax is not enough, as there is no way to specify sizes, constraints, etc. It would pull content from the HTML document into different sections, which could then be laid out using the document algorithm, and the content could be styled using CSS.

An approach that split these three elements, content, layout and style, would ease design and development, make tooling easier, and enforce a better separation of concerns in web content.

Comment by Amtiskaw — April 30, 2009

Leave a comment

You must be logged in to post a comment.