[CSS3] Flexible Flow Module, proposal.

Here is our proposal for the new module named Flexible Flow:

http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

The document introduces
1) the 'flow' attribute that defines
    "layout manager" used to lay out children of some container.
2) flex length units used as weights in space distribution while
    computing layouts.

This module is aimed to solve following problems of modern CSS among others:

1) Vertical and horizontal alignment (e.g. centering) of block elements.
2) Flexible multicolumn layouts (e.g. sidebar-content-sidebar)
    when elements replaced horizontally in a row and have the same
    height.
3) Complex but at the same time position:static layouts when elements
    are replaced in visual order that is different from DOM order of
    elements.

The 'flow' and 'flex'es are primarily about static layouts that allow
to replace elements without visual overflow so information is
always accessible/readable - the 'flow' minimizes the need of
float and position:absolute elements that are misused badly.
The 'flow' and 'flex'es allows to define stable layouts that
are flexible to various sizes of viewports/screens.

We believe that the 'flow' and flex units establish strong foundation
for future extensions of the CSS as a system. In fact such modules as
"Multi-column layout" [1], "Grid Positioning Module"[2] and "Template 
Layout" can be thought as kinds of the flow:
flow:columns, flow:grid and flow:"template". (Our proposal includes
simplified variation of latter one - flow:"template")

Flexes and the flow as a feature exists in pretty much all markup,
layout and UI systems and frameworks like XUL, XAML, Java/AWT, Qt,
WTL, etc. We hope that CSS will greatly benefit from having them too.

We have an experience using the 'flow' and 'flex'es in three last years
and think that they are "must have" features in circumstances when 
differences between Web and desktop applications are bent to zero.

Authors gratitude Bert Bos for his ideas and discussion of the document.

[1] http://www.w3.org/TR/css3-multicol/
[2] http://www.w3.org/TR/css3-grid/
[3] http://www.w3.org/TR/css3-layout/

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 10 April 2009 20:50:17 UTC