Re: layout idea

David Hyatt wrote:
> On Mar 13, 2009, at 7:51 PM, Andrew Fedoniouk wrote:
> 
>>
>> In any case positioning and type of layout management are quite 
>> different entities -
>> layout manager defines the way how elements are being replaced in 
>> *normal/static* flow. IMO of course.
> 
> Yeah that's true.  It does feel like a grid should be a normal flow 
> entity, and positioning something relative to rows/columns could just be 
> done using position:absolute still.
> 
> dave
> 

We've got some practical experience in using flow:grid in a year or so 
and here are some thoughts about it:

There are practical cases when you would want to have
element replaced in a cell but be position[ed]:relative at the same
time - say shifted in 1px from its normal in-grid position.

That leads to the requirement: position of the element in a grid  - its
"cell coordinates" - should not use any attributes or values used by the
position: and friends.

Second: it is highly desirable for the flow:grid feature to
support partial declarations. I mean here following:

Consider this markup:

<ul #two-columns-list>
   <li>cell 1.1</li>
   <li>cell 1.2</li>
   <li>cell 2.1</li>
   <li>cell 2.2</li>
   ....
</ul>

And the styling:

ul#two-columns-list { flow:grid; }

ul#two-columns-list > li:nth-child(odd)
{
   left: 1#;  // a.k.a. 1gr
   right: 1#; // elements go to first column
}
ul#two-columns-list > li:nth-child(even)
{
   left: 2#;
   right: 2#; // elements go to second column
}

This setup will replace list items in a grid
having two columns.

As you see neither number of rows nor cell row
positions are specified. flow:grid manager
is able to deduce calculated values of
top/bottom:auto; values.

Currently flow:grid layout uses following rules
of resolving 'auto' in left/top/right/bottom of its children:

   left:auto -> left:1#
   right:auto -> right: <max-column-no>
   top:auto -> top: <current-row-no>
   bottom:auto -> bottom: <current-row-no>

That allows to mix 'normal' blocks with 'cells':

<div style="flow:grid">
   <div .col-1> Cell 1.1 </div><div .col-2> Cell 1.2 </div>
   <p>Some text here</p>
   <p>Some other lorem ipsum here</p>
   <div .col-1> Cell N.2 </div><div .col-2> Cell N.2 </div>
</div>

with styles:

div.col-1 { left:1#; right:1# }
div.col-2 { left:2#; right:2# }

you will get something like this:

| Cell 1.1 | Cell 1.2 |
|---------------------|
| Some text here      |
|---------------------|
| Some other lorem    |
| ipsum here          |
|---------------------|
| Cell N.2 | Cell N.2 |


-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Saturday, 14 March 2009 18:49:51 UTC