All this talk of CSS layout modules.

I’m currently digging through archive directories on my hard disc as I migrate between machines. So much stuff I’d forgotten about. Some of it deeply personally and sort-of upsetting to discover I hadn’t deleted, other things are like this.; my lead-by-code-sample proposition for something that I can only assume was called ‘Cascading Style Layout’. Which is the wrong name for it, because it’s XML and there’s no cascade.

Shows what I know, but then again, I wrote this in *2005*. I don’t think it was ever published, so for posterity and beard stroking in this ‘CSS sucks’ climate, here’s how I though we should do advanced layout with CSS four years ago:

<grid columns="3" rows="2">
    <row>
        <region name="header" width="100%" columnspan="2" />
    </row>
    <row>
        <region name="main-nav" width="3em" />
        <region name="content">
            <float name="inset" position="top right" />
        </region>
    </row>
    <row>
        <region name="footer" />
    </row>
</grid>`

The rules I’d documented were pretty simple:

• Regions automatically fill all available space, unless specified otherwise (e.g. region[@width] defaults to “auto”)
• Region height always fills all available vertical space (unless specified, in which case all other regions fill vertical space) ala an HTML table - the element mapped to will automatically fill all available vertical space.
• Regions/Rows themselves cannot be styled.
• a may not overlap another row.
• Fixed, absolute position etc. works exactly the same as it does today.

Mapping an element to a region was simple:

#my .element {
   position: grid(region-name);
}

It’s interesting with retrospect. In most respects it’s a fairly simple mapping of familiar table element properties into a standalone syntax, switching to ‘grids’ nomenclature (something I still advocate).

On the other hand, I don’t quite understand some of the restrictions I put forward. ‘Regions/Rows themselves cannot be styled’? I wonder why? Especially since the first thing I do is slap width attributes on everything. I think I intended each region to map 1:1 with an element on the page (disallowing assigning multiple elements to a region), so you’d just style the element itself. Looking now, it seems far more useful to set a background colour on a region and add multiple elements to it, something like:

@grid(advertisments) {
    background: #eee;
    padding: 5px;
}
#google-ad {
    position: grid(advertisments);
}
#textlink-ad {
    position: grid(advertisments);
}

The float element was to allow layout blocks that text can wrap around, like the float property, but more powerful, such that you can position it as with background-position: top left, top center, 20px 50% and so on.

The last thing I did was create a copy of my sample file and give it the extension csl, so I presume I was intending these XML layouts to be attached to HTML alongside a stylesheet, or perhaps imported from within CSS.

<link rel='layout' href='/css/grid.csl' media='screen'>

Or:

@import url(/css/grid.csl);

Again, this is something I wrote in 2005. I’m sure it wouldn’t come out the same way if I wrote it today, but if someone turned around and told me this is how I was to build websites from now on, I wouldn’t protest. Oh no, wait, I’d protest at using name attributes in place of id.