Skip to content

Commit 639e43f

Browse files
rachelandrewrachelandrew
committed
two pages of flow layout examples
1 parent 13ce226 commit 639e43f

File tree

12 files changed

+1478
-0
lines changed

12 files changed

+1478
-0
lines changed

‎flow/block-inline/change-formatting.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Normal Flow: Inline</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
strong {
62+
display: block;
63+
}
64+
</style>
65+
66+
</head>
67+
68+
<body>
69+
<section>
70+
71+
<p>Before that night—<strong>a memorable night</strong>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
72+
73+
74+
</section>
75+
<textarea class="playable-css">
76+
strong {
77+
display: block;
78+
}</textarea>
79+
80+
<textarea id="code" class="playable-html">
81+
82+
<p>Before that night—<strong>a memorable night</strong>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
83+
84+
</textarea>
85+
<div class="playable-buttons">
86+
<input id="reset" type="button" value="Reset">
87+
</div>
88+
</body>
89+
<script>
90+
var section = document.querySelector('section');
91+
var editable = document.querySelector('.editable');
92+
var textareaHTML = document.querySelector('.playable-html');
93+
var textareaCSS = document.querySelector('.playable-css');
94+
var reset = document.getElementById('reset');
95+
var htmlCode = textareaHTML.value;
96+
var cssCode = textareaCSS.value;
97+
98+
function fillCode() {
99+
editable.innerHTML = textareaCSS.value;
100+
section.innerHTML = textareaHTML.value;
101+
}
102+
103+
reset.addEventListener('click', function () {
104+
textareaHTML.value = htmlCode;
105+
textareaCSS.value = cssCode;
106+
fillCode();
107+
});
108+
109+
textareaHTML.addEventListener('input', fillCode);
110+
textareaCSS.addEventListener('input', fillCode);
111+
window.addEventListener('load', fillCode);
112+
</script>
113+
114+
</html>

‎flow/block-inline/flex.html‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Normal Flow: inner and outer display types</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
.container {
62+
display: flex;
63+
}
64+
65+
.container > * {
66+
border: 1px solid green;
67+
}
68+
</style>
69+
</head>
70+
71+
<body>
72+
<section>
73+
<div class="container">
74+
<div>FLex Item</div>
75+
<div>Flex Item</div>
76+
<div>
77+
<div>Children</div>
78+
<div>are in</div>
79+
<div>normal flow</div>
80+
</div>
81+
</div>
82+
83+
</section>
84+
<textarea class="playable-css">
85+
.container {
86+
display: flex;
87+
}
88+
89+
.container > * {
90+
border: 1px solid green;
91+
}
92+
</textarea>
93+
<textarea id="code" class="playable-html">
94+
<div class="container">
95+
<div>FLex Item</div>
96+
<div>Flex Item</div>
97+
<div>
98+
<div>Children</div>
99+
<div>are in</div>
100+
<div>normal flow</div>
101+
</div>
102+
</div>
103+
</textarea>
104+
<div class="playable-buttons">
105+
<input id="reset" type="button" value="Reset">
106+
</div>
107+
</body>
108+
<script>
109+
var section = document.querySelector('section');
110+
var editable = document.querySelector('.editable');
111+
var textareaHTML = document.querySelector('.playable-html');
112+
var textareaCSS = document.querySelector('.playable-css');
113+
var reset = document.getElementById('reset');
114+
var htmlCode = textareaHTML.value;
115+
var cssCode = textareaCSS.value;
116+
117+
function fillCode() {
118+
editable.innerHTML = textareaCSS.value;
119+
section.innerHTML = textareaHTML.value;
120+
}
121+
122+
reset.addEventListener('click', function () {
123+
textareaHTML.value = htmlCode;
124+
textareaCSS.value = cssCode;
125+
fillCode();
126+
});
127+
128+
textareaHTML.addEventListener('input', fillCode);
129+
textareaCSS.addEventListener('input', fillCode);
130+
window.addEventListener('load', fillCode);
131+
</script>
132+
133+
</html>

‎flow/block-inline/inline.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Normal Flow: Inline</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
61+
</head>
62+
63+
<body>
64+
<section>
65+
66+
<p>Before that night—<strong>a memorable night</strong>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
67+
68+
69+
</section>
70+
71+
<textarea id="code" class="playable-html">
72+
73+
<p>Before that night—<strong>a memorable night</strong>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
74+
75+
</textarea>
76+
<div class="playable-buttons">
77+
<input id="reset" type="button" value="Reset">
78+
</div>
79+
</body>
80+
<script>
81+
var section = document.querySelector('section');
82+
var editable = document.querySelector('.editable');
83+
var textareaHTML = document.querySelector('.playable-html');
84+
var textareaCSS = document.querySelector('.playable-css');
85+
var reset = document.getElementById('reset');
86+
var htmlCode = textareaHTML.value;
87+
var cssCode = textareaCSS.value;
88+
89+
function fillCode() {
90+
editable.innerHTML = textareaCSS.value;
91+
section.innerHTML = textareaHTML.value;
92+
}
93+
94+
reset.addEventListener('click', function () {
95+
textareaHTML.value = htmlCode;
96+
textareaCSS.value = cssCode;
97+
fillCode();
98+
});
99+
100+
textareaHTML.addEventListener('input', fillCode);
101+
textareaCSS.addEventListener('input', fillCode);
102+
window.addEventListener('load', fillCode);
103+
</script>
104+
105+
</html>

0 commit comments

Comments
 (0)