Proposition for CSS4. Rules aka guidelines

Rules is block level elements, which have zero width and 100% height
for vertical rules and zero height and 100% width for horizontal
rules.
Some elements may snap to rules, something like position: relative
elements with tweaks. Rules have margin, padding, border, background
properties for some design features. Rules may repeat, like
inline-boxes.

rule-type: vertical || horizontal;
rule-repeat: none || repeat;

Rule don't repeat, if haven't defined shift by margin or padding.


Let's use local defines for creating rule;

$rule1 { rule-type: horizontal; rule-repeat: repeat; margin-bottom: 100%; }
#container { rule: $rule1 }
#container > div { snap-to: top bottom; width: 33%; }

This code create two rules at the top and bottom of #container, all
div's inside this container should snap to rules at the top and the
bottom of this container, and should have 100% of height. This is a
simplest way to create multicolumn design with equal height.

Let's create more complicated example

a c c
a c c
b c c
b c c

a column have 33% width and 50% height, b same as a, c take rest of space

$rule1 { rule-type: horizontal; rule-repeat: repeat; margin-bottom: 100%; }
$rule2 { rule-type: horizontal; margin-top: 50% }

#containerOne { rule: $rule1; }
#containerOne > div { snap-to: top($rule1) bottom($rule1);  }

#leftCol { width: 33%; rule: $rule2 }
#rightCol { width: 67% }

#a { snap-to: top($rule1) bottom($rule2) } // snapping to different rules
#b { snap-to: top($rule2) bottom($rule1) }

<div id="containerOne">
 <div id="lefCol">
  <div id="a">a</div>
  <div id="b">b</div>
 </div>
 <div id="rightCol">
 c
 </div>
</div>

------- rule1
a c c
a c c
-- rule2
b c c
b c c
------- rule1

I think, this is a simplest way to create multicolumn design, layouts
like table with undefined count of rows and columns


More complicated example. Adaptation layout

http://img832.imageshack.us/img832/3444/columns.png

$rule1 { rule-type: vartical; rule-repeat: repeat; margin-right: 50%;
} // 3 rules at 0, 50% and 100%
#container { rule: $rule1; }
#div1, #div2, #div3, #div4 { snap-to: left right; margin: 10px; }

<div id="container">
 <div id="div1"/><div id="div2"/><div id="div3"/><div id="div4"/>
</div>

If any container have some non breaking content, box should expand to
the next rule. Other interesting feature is vertical layout stack.
#div4 placed under #div2.


Another example

http://img155.imageshack.us/img155/2883/rulespower.png

$rule1 { rule-type: vertical; margin-left: 25%; max-margin-left: 300px; }
#container { rule: $rule1 }
#box1, #image, #menu, #box2 { display: inline-block; }
#box1 { snap-to: right;  }

<div id="#container">
 <div id="#box1">
   <div id="#image"><img /></div>
   <div id="#menu">...</div>
 </div>
 <div id="#box2">...</div>
</div>

New property max-margin-left is required for better positioning
control, because rule don't have the width or height.
In case, when content of #box1 is wider than distance between rule and
left containers side, snapping should not applied.
On wide screen the #box1 snapping to the rule, and #box2 positioning
starts from top right edge of the #box1.
Profit! No media Queries, no grids, just one rule. :)


Using rules instead grid

grid-columns: * 5% * * * * 10%;

I would like to control the second column and width of this column
should not be wider than 150px;
Oops, it's impossible.

Any gaps between columns, I think, should not be in this declaration,
because this is a part of box margins.

Same example with rules

$rule1 { margin-left: auto }
$rule2 { margin-left: 5%; max-margin-left: 150px; }
$rule3 { margin-left: 10% }

#container { rule: $rule1 $rule2 $rule1[4] $rule3 }

Any program can change the rule local definition easy and predictable,
without complicated string parsing.

Next example is more interesting

$rule { rule-type: horizontal; rule-repeat: repeat; margin-bottom: 10% }
$rule:nth-child(odd) { margin-bottom: 5% }


10%

---------
5%
---------

10%

---------
5%
---------
.....

Because rules behavior is similar to current block behavior in CSS2.1,
designers can use known logic for grid creating.

Received on Friday, 3 September 2010 18:41:51 UTC