Skip to content

Commit bb9373e

Browse files
rachelandrewrachelandrew
committed
examples for visual formatting
1 parent 6560109 commit bb9373e

File tree

3 files changed

+356
-0
lines changed

3 files changed

+356
-0
lines changed

‎visual-formatting/anonymous-block.html

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Anonymous Block Box</title>
6+
7+
<style>
8+
body {
9+
font: 1.2em Helvetica, Arial, sans-serif;
10+
margin: 20px;
11+
padding: 0;
12+
}
13+
14+
textarea {
15+
font-family: monospace;
16+
display: block;
17+
margin-bottom: 10px;
18+
background-color: #f4f7f8;
19+
border: none;
20+
border-left: 6px solid #558abb;
21+
color: #4d4e53;
22+
width: 90%;
23+
max-width: 700px;
24+
padding: 10px 10px 0px;
25+
font-size: 90%;
26+
}
27+
28+
textarea:nth-of-type(1) {
29+
height: 120px;
30+
}
31+
32+
textarea:nth-of-type(2) {
33+
height: 160px;
34+
}
35+
36+
.playable-buttons {
37+
text-align: right;
38+
width: 90%;
39+
max-width: 700px;
40+
padding: 5px 10px 5px 26px;
41+
font-size: 100%;
42+
}
43+
44+
section {
45+
width: 90%;
46+
max-width: 700px;
47+
border: 1px solid #4d4e53;
48+
border-radius: 2px;
49+
padding: 10px 14px 10px 10px;
50+
margin-bottom: 10px;
51+
}
52+
53+
section input {
54+
display: block;
55+
margin: 5px;
56+
}
57+
</style>
58+
59+
<style class="editable">
60+
.example > * {
61+
background-color: rebeccapurple;
62+
color: white;
63+
}
64+
</style>
65+
</head>
66+
67+
<body>
68+
<section>
69+
<div class="example">
70+
I am wrapped in an anonymous box
71+
<p>I am in the paragraph</p>
72+
I am wrapped in an anonymous box.
73+
</div>
74+
</section>
75+
<textarea class="playable-css">.example > * {
76+
background-color: rebeccapurple;
77+
color: white;
78+
}</textarea>
79+
80+
<textarea id="code" class="playable-html"><div class="example">
81+
I am wrapped in an anonymous box
82+
<p>I am in the paragraph</p>
83+
I am wrapped in an anonymous box.
84+
</div></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+
</html>

‎visual-formatting/anonymous-flex.html

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

‎visual-formatting/line-boxes.html

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

0 commit comments

Comments
 (0)