- From: Alexander Shpack <shadowkin@gmail.com>
- Date: Fri, 3 Sep 2010 21:40:40 +0300
- To: www-style@w3.org
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