Re: [css3-layout] Is Template Layout just syntactic sugar?

On Mon, Oct 19, 2009 at 4:37 PM, Giovanni Campagna
<scampa.giovanni@gmail.com> wrote:
> In the other thread [1], starting from a syntactic addition to the
> beloved Template Layout syntax, we slipped into a big discussion about
> the Final CSS Layout System for Everything™.
>
> And I thought: we have a flexible, tabular layout system (tables), we
> have a method to control shadow trees (binding), we have a method to
> rearrange the formatting structure (named flows). What else is covered
> by Template Layout, except doing it very very quickly and having an
> awful lot of magic?
>
> That is, consider the template
> "aaa" / 5em
> "b@c" / auto
> "ddc" / 3em
> It is a standard 3 column layout with one column longer (running along
> the footer).
> Then I put things within the appropriate slot with "position:<letter>".
>
> Now consider:
> <table><tr><td colspan="3" id="a">A</td></tr>
> <tr><td id="b">B</td><td>@</td><td rowspan="2" id="c">C</td></tr>
> <tr><td colspan="2" id="d">D</td></tr></table>
> It is the same layout, but in my document, logically, the content goes
> immediately after the header, the footer, then the sidebar, then the
> longer navigation bar.
>
> How do I solve the problem?
> <table><tr><td colspan="3" id="a"></td></tr>
> <tr><td id="b"></td><td><div>everything, including header, footer,
> navigations, etc.</div></td><td rowspan="2" id="c"></td></tr>
> <tr><td colspan="2" id="d"></td></tr></table>
> <style>
> #a { content: from(slot-a); }
> #b { content: from(slot-b); }
> #c { content: from(slot-c); }
> #d { content: from(slot-d); }
> tr:first-of-type { height: 5em; }
> tr:last-of-type { height: 3em; }
> </style>
> Again, same layout, and I got source order independence. But
> unfortunately, I cannot include those elements in my document, it
> would break semantic.
>
> So the final solution is:
> <xbl xmlns="http://www.w3.org/ns/xbl">
> <binding id="my-template">
> <template><div id="table"><div class="tr"><div id="a" /></div>
> <div class="tr"><div id="b" /><div id="content"><content /></div><div
> id="c" /></div>
> <div class="tr"><div id="d" /></div></div></template>
> <style>
> #table { display:table; }
> .tr { display:table-row; }
> #a, #b, #c, #d { display:table-cell; }
> #a { content: from(slot-a); column-span: 3 }
> #b { content: from(slot-b); }
> #c { content: from(slot-c); row-span: 2 }
> #d { content: from(slot-d); column-span: 2 }
> tr:first-of-type { height: 5em; }
> tr:last-of-type { height: 3em; }
> </style></binding></xbl>
>
> and
> #template { binding:url(mybinding.xml#my-template); }
> header { float:to(slot-a); }
> aside { float:to(slot-b); }
> nav { float:to(slot-c); }
> footer { float:to(slot-d); }
>
> I achieved a full liquid layout, with full source independence,
> without using any of Template Layout. So I ask... why so much magic in
> Template Layout?

Looking at your first template, and then your next examples, it's
obvious why template layout will be so appealing to designers. The
syntax makes it quick and clear. It's close to how designers think and
work.

/Stephen

Received on Monday, 19 October 2009 14:48:36 UTC