Just read this great post proposing a new matrix based layout system for CSS which in turn was a response to Eric Meyer’s cry for a new layout system. The author has proposed a “matrix” based system which in theory is beautiful but flawed. It did however get me thinking about a system that would work for me, day to day.
The example layout from Snook and the associated CSS
#a { position: matrix(1,2, 1,4); }
#b { position: matrix(2,2); }
#c { position: matrix(2,3); }
#d { position: matrix(2,4); }
#e { position: matrix(1,1, 2,1); }
#f { position: matrix(1,5, 2,5); }
My simple world
When I’m looking after a big site it’s the maintaining of the CSS, it’s simplicity and the ability to be flexible that are most important to me and thus the ever present battle of simple Vs flexible ensues – It’s not my intention here to pick this theory apart as actually I quite like it, but suffice to say that adding and moving columns/rows or even just scanning this CSS I would expect to be pretty heavy on the old grey matter. I think we have enough to think about with some of the voodoo already forced on us with CSS as it is…
Pass me the glue
All I need is a way to join various sections together with a reasonable dose of semantic glue.
Essentially a hierarchy of blocks joined together in a useful relational structure.
The 100% width of the child container is the width of the parent container, except that “there is no container” ( you wanted the Matrix – “there is no spoon” ), just cascading dimensions.
Using the previous layout:
#a { width: 50%; join-top: body; }
#b { width: 33%; join-top: #a; }
#c { width: 33%; join-top: #a; }
#d { width: 33%; join-top: #a; }
#e { width: 25%; join-top: body; }
#f { width: 25%; join-top: body; }
With this mark-up
<body>
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
<div id="e">E</div>
<div id="f">F</div>
</body>
So in this example E, A and F are all glued to the full width of the body and take up their relevant positions – they have to implicitly take up their own space on this invisible line.
B, C and D are doing exactly the same – they are glued to A, the relationship dictating their combined width. Should A expand with more content B, C and D will just move down, fixed to the bottom of A, while E and F hold their ground staying put.
I think this is such an elegant and simple solution they only flaw, from my limited modeling so far, is that programmers who could put this into play, don’t really want to make designers lives easier. Do they? :)
I would love to get feedback on this – is it possible? Where are the rest of the flaws? How can it be extended? If it can be extended would it lose it’s elegance?
{ 2 comments… read them below or add one }
Thanks for trying to come up with another idea. I’ve seen a few people mention variations on your idea. Some of the things you’d need to consider are: how are heights determined? How is an elements position determined? For example: how does #a know to be in the middle with the other two columns to the right and left of it? Can I position elements within glued element? can I glue other elements outside the hierarchy of an element? How do you anticipate inheritance to work?
Hi Jonathon, good points. Seeing as this is all hypothetical the answers are probably easier to come by than if this were a real world scenario. :)
Ideally I’d like to “order” the id’s so
#a { width: 50%; join-top: body; order: 2; }
#b { width: 33%; join-top: #a; order: 1 ; }
#c { width: 33%; join-top: #a; order: 2 ; }
#d { width: 33%; join-top: #a; order: 3 ; }
#e { width: 25%; join-top: body; order: 1; }
#f { width: 25%; join-top: body; order: 3; }
This is much the same functionality as the z-index attribute but in 2d (much like you matrix).
Inheritance and height would work as normal. If you wanted to nest you’d use the same principle. To split D into 2 text columns:
<div id=”d” D
<p id=”p1″> P1 </p>
<p id=”p2> P2 </p>
</div>
#d p#p1 { width: 50%; join-top: #d; order: 1 ; }
#d p#p2 { width: 50%; join-top: #d; order: 2 ; }
In this case you may not even need to join as it is fully contained by the parent (as we would do it now). Incidentally I use “join-top” as there could possibly be “join-bottom”, “join-left”, “join-right” for gluing to different parts of the container, much like absolute positioning…
My current grid system that I use is pretty similar to this but obviously has containers (for containers), it’s not as semantic as it could be but very quick and easy to build with, for the way that I work this is pretty ideal.
I wonder how easy it would be to mock up with jQuery…?
Essentially I love the matrix and want a way to simplify it even further…
{ 1 trackback }