Skip to content

Commit bbeb042

Browse files
vhardyvhardy
committed
Editorial work on regions formatting model details section. More diagrams and illustrations. Documented example
1 parent 1783c47 commit bbeb042

15 files changed

Lines changed: 2069 additions & 95 deletions

‎css3-regions/Overview.html‎

Lines changed: 213 additions & 54 deletions
Large diffs are not rendered by default.

‎css3-regions/Overview.src.html‎

Lines changed: 133 additions & 37 deletions
Large diffs are not rendered by default.

‎css3-regions/default.css‎

Lines changed: 533 additions & 0 deletions
Large diffs are not rendered by default.

‎css3-regions/examples/multi-column-region-2.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<html>
2+
<head>
3+
<style>
4+
body{
5+
font-family:"Georgia", serif;
6+
width: 50ex;
7+
margin-left: auto;
8+
margin-right: auto;
9+
}
10+
11+
#flex {
12+
height: 4em;
13+
border: 1px solid red;
14+
display: -webkit-box;
15+
-webkit-box-pack: justify;
16+
}
17+
18+
#flex .col {
19+
border: 1px solid lime;
20+
-webkit-flow-from: article;
21+
width: 48%;
22+
}
23+
24+
#flex .col:last-child {
25+
margin-right: 0%;
26+
}
27+
28+
#regular-div {
29+
width: 100%;
30+
height: auto;
31+
margin-top: 2em;
32+
}
33+
34+
#article {
35+
-webkit-flow-into: article;
36+
color:#777;
37+
font-size: 12px;
38+
font-weight: normal;
39+
text-align: justify;
40+
}
41+
42+
.article-content{
43+
-webkit-flow-from: article;
44+
}
45+
46+
#article > h1#intro {
47+
color: crimson;
48+
display: run-in;
49+
font-size: 16px;
50+
padding-right: 14px;
51+
}
52+
53+
#article > h1#more {
54+
color: #777;
55+
font-weight: bold;
56+
font-size: 16px;
57+
border-left: 1px solid #777;
58+
padding-left: 10px;
59+
}
60+
61+
#reference-multi-col {
62+
-webkit-column-count: 4;
63+
height: 2em;
64+
border: 1px solid #a0a0a0;
65+
position:absolute;
66+
top: 0;
67+
left: 0;
68+
}
69+
</style>
70+
</head>
71+
<body>
72+
<div id="article">
73+
<h1 id="intro">Introduction</h1>
74+
<p>
75+
<span id="larger">This is an example that shows how content
76+
can be made to flow between multiple regions. The image is
77+
displayed in</span> the region 'A'. The 'article' is flowed from
78+
region '1', to region '2', to region '3' and finally to region
79+
'4'. Note how the content that is laid out in 'region 1' is
80+
subject to a different style.
81+
</p>
82+
83+
<h1 id="more">More Details</h1>
84+
<p>
85+
This illustrates some of the features of CSS Regions. First,
86+
the ability to associate a flow of content to a set of
87+
regions and effectively getting that content to be threaded
88+
from one region to the next.
89+
</p>
90+
</p>
91+
Then, the example illustrates the concept of 'region styling',
92+
where the content that falls into a specific region is subject
93+
to additional style rule, in the same spirit as inline content
94+
falling in the 'first line' can be subject to additional styling
95+
as defined by the ::first-line pseudo element selector.
96+
</p>
97+
<p>
98+
Finally, this initial example shows that the concept of region
99+
is orthogonal to the layout of regions. This means that regions
100+
can be created and positioned using existing CSS and HTML
101+
layout (such as multi-column, flex box or grid layout).
102+
The CSS Regions specification defines how these regions can
103+
be the recipients of a 'named flow'.
104+
</p>
105+
</div>
106+
<div id="reference-multi-col">
107+
This illustrates some of
108+
109+
</div>
110+
<h1>Region with multi-column example</h1>
111+
112+
<div id="flex" class="article-content">
113+
<div class="col"></div>
114+
<div class="col"></div>
115+
</div>
116+
<div id="regular-div" class="article-content"></div>
117+
118+
</body>
119+
120+
</html>

‎css3-regions/examples/multi-column-region.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<html>
2+
<head>
3+
<style>
4+
body{
5+
font-family:"Georgia", serif;
6+
width: 50ex;
7+
margin-left: auto;
8+
margin-right: auto;
9+
}
10+
11+
#multi-col {
12+
-webkit-column-count: 2;
13+
height: 6em;
14+
}
15+
16+
#regular-div {
17+
width: 100%;
18+
height: auto;
19+
margin-top: 2em;
20+
}
21+
22+
#article {
23+
-webkit-flow-into: article;
24+
color:#777;
25+
font-size: 12px;
26+
font-weight: normal;
27+
text-align: justify;
28+
}
29+
30+
.article-content{
31+
-webkit-flow-from: article;
32+
}
33+
34+
#article > h1#intro {
35+
color: crimson;
36+
display: run-in;
37+
font-size: 16px;
38+
padding-right: 14px;
39+
}
40+
41+
#article > h1#more {
42+
color: #777;
43+
font-weight: bold;
44+
font-size: 16px;
45+
border-left: 1px solid #777;
46+
padding-left: 10px;
47+
}
48+
</style>
49+
</head>
50+
<body>
51+
<div id="article">
52+
<h1 id="intro">Introduction</h1>
53+
<p>
54+
<span id="larger">This is an example that shows how content
55+
can be made to flow between multiple regions. The image is
56+
displayed in</span> the region 'A'. The 'article' is flowed from
57+
region '1', to region '2', to region '3' and finally to region
58+
'4'. Note how the content that is laid out in 'region 1' is
59+
subject to a different style.
60+
</p>
61+
62+
<h1 id="more">More Details</h1>
63+
<p>
64+
This illustrates some of the features of CSS Regions. First,
65+
the ability to associate a flow of content to a set of
66+
regions and effectively getting that content to be threaded
67+
from one region to the next.
68+
</p>
69+
</p>
70+
Then, the example illustrates the concept of 'region styling',
71+
where the content that falls into a specific region is subject
72+
to additional style rule, in the same spirit as inline content
73+
falling in the 'first line' can be subject to additional styling
74+
as defined by the ::first-line pseudo element selector.
75+
</p>
76+
<p>
77+
Finally, this initial example shows that the concept of region
78+
is orthogonal to the layout of regions. This means that regions
79+
can be created and positioned using existing CSS and HTML
80+
layout (such as multi-column, flex box or grid layout).
81+
The CSS Regions specification defines how these regions can
82+
be the recipients of a 'named flow'.
83+
</p>
84+
</div>
85+
<h1>Region with multi-column example</h1>
86+
87+
<div id="multi-col" class="article-content"></div>
88+
<div id="regular-div" class="article-content"></div>
89+
90+
</body>
91+
92+
</html>

‎css3-regions/examples/region-flow-descendants-in-self.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<html>
2+
<head>
3+
<style>
4+
#box * {
5+
-webkit-flow-into: flow;
6+
}
7+
8+
#box {
9+
-webkit-flow-from: flow;
10+
}
11+
12+
.child {
13+
width: 40px;
14+
height: 40px;
15+
border: 1px solid red;
16+
}
17+
18+
.grand-child {
19+
width: 20px;
20+
height: 20px;
21+
border: 1px solid lime;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
27+
<div id="box">
28+
<div id="e1" class="child"></div>
29+
<div id="e1" class="child">
30+
<div class="grand-child"></div>
31+
</div>
32+
<div id="e1" class="child"></div>
33+
</div>
34+
35+
<div id="other-box"></div>
36+
</body>
37+
38+
</html>

‎css3-regions/examples/region-flow-descendants.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<html>
2+
<head>
3+
<style>
4+
#box * {
5+
-webkit-flow-into: flow;
6+
}
7+
8+
#other-box {
9+
-webkit-flow-from: flow;
10+
}
11+
12+
#box {}
13+
14+
.child {
15+
width: 40px;
16+
height: 40px;
17+
border: 1px solid red;
18+
}
19+
20+
.grand-child {
21+
width: 20px;
22+
height: 20px;
23+
border: 1px solid lime;
24+
}
25+
26+
#box-flow {
27+
flow-into: box-flow;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
33+
<div id="box-flow"></div>
34+
35+
<div id="box">
36+
<div id="e1" class="child"></div>
37+
<div id="e1" class="child">
38+
<div class="grand-child"></div>
39+
</div>
40+
<div id="e1" class="child"></div>
41+
</div>
42+
43+
<div id="other-box"></div>
44+
</body>
45+
46+
</html>

‎css3-regions/images/RFCB.graffle‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -536,7 +536,7 @@
536536
\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc
537537

538538
\f0\fs24 \cf0 Region\
539-
Container Box}</string>
539+
Box}</string>
540540
</dict>
541541
</dict>
542542
</array>
@@ -587,7 +587,7 @@ Container Box}</string>
587587
<key>MasterSheets</key>
588588
<array/>
589589
<key>ModificationDate</key>
590-
<string>2012-03-28 20:47:35 +0000</string>
590+
<string>2012-03-31 21:37:00 +0000</string>
591591
<key>Modifier</key>
592592
<string>vhardy</string>
593593
<key>NotesVisible</key>
@@ -673,7 +673,7 @@ Container Box}</string>
673673
</dict>
674674
</array>
675675
<key>Frame</key>
676-
<string>{{327, 424}, {1453, 956}}</string>
676+
<string>{{155, 15}, {1453, 956}}</string>
677677
<key>ListView</key>
678678
<true/>
679679
<key>OutlineWidth</key>

‎css3-regions/images/RFCB.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎css3-regions/images/flow-fragment-height-phase-1.png‎

97.4 KB
Loading

0 commit comments

Comments
 (0)