Skip to content

Commit efa4d9d

Browse files
rachelandrewrachelandrew
committed
column balancing examples
1 parent 898a2a9 commit efa4d9d

File tree

2 files changed

+268
-0
lines changed

2 files changed

+268
-0
lines changed

‎multicol/balancing/auto.html

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Multicol example - auto</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+
height: 160px;
20+
background-color: #F4F7F8;
21+
border: none;
22+
border-left: 6px solid #558ABB;
23+
color: #4D4E53;
24+
width: 90%;
25+
max-width: 700px;
26+
padding: 10px 10px 0px;
27+
font-size: 90%;
28+
}
29+
30+
textarea:nth-of-type(1) {
31+
height: 80px
32+
}
33+
34+
textarea:nth-of-type(2) {
35+
height: 160px
36+
}
37+
38+
.playable-buttons {
39+
text-align: right;
40+
width: 90%;
41+
max-width: 700px;
42+
padding: 5px 10px 5px 26px;
43+
font-size: 100%;
44+
}
45+
46+
section {
47+
width: 90%;
48+
max-width: 700px;
49+
border: 1px solid #4D4E53;
50+
border-radius: 2px;
51+
padding: 10px 14px 10px 10px;
52+
margin-bottom: 10px;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
img {
60+
max-width: 100%;
61+
}
62+
63+
</style>
64+
<style class="editable">
65+
.container {
66+
column-width: 150px;
67+
column-fill: auto;
68+
height: 250px;
69+
}
70+
</style>
71+
</head>
72+
73+
<body>
74+
<section>
75+
<div class="container">
76+
<img src="../overflow/image.jpg" alt="balloons">
77+
78+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
79+
80+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion.</p>
81+
82+
83+
</div>
84+
85+
</section>
86+
<textarea class="playable-css">
87+
.container {
88+
column-width: 150px;
89+
column-fill: auto;
90+
height: 250px;
91+
}
92+
93+
</textarea>
94+
<textarea id="code" class="playable-html">
95+
<div class="container">
96+
<img src="../overflow/image.jpg" alt="balloons">
97+
98+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
99+
100+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion.</p>
101+
102+
103+
</div>
104+
</textarea>
105+
<div class="playable-buttons">
106+
<input id="reset" type="button" value="Reset">
107+
</div>
108+
</body>
109+
<script>
110+
var section = document.querySelector('section');
111+
var editable = document.querySelector('.editable');
112+
var textareaHTML = document.querySelector('.playable-html');
113+
var textareaCSS = document.querySelector('.playable-css');
114+
var reset = document.getElementById('reset');
115+
var htmlCode = textareaHTML.value;
116+
var cssCode = textareaCSS.value;
117+
118+
function fillCode() {
119+
editable.innerHTML = textareaCSS.value;
120+
section.innerHTML = textareaHTML.value;
121+
}
122+
123+
reset.addEventListener('click', function () {
124+
textareaHTML.value = htmlCode;
125+
textareaCSS.value = cssCode;
126+
fillCode();
127+
});
128+
129+
textareaHTML.addEventListener('input', fillCode);
130+
textareaCSS.addEventListener('input', fillCode);
131+
window.addEventListener('load', fillCode);
132+
</script>
133+
134+
</html>

‎multicol/balancing/balance.html

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Multicol example - balancing</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+
height: 160px;
20+
background-color: #F4F7F8;
21+
border: none;
22+
border-left: 6px solid #558ABB;
23+
color: #4D4E53;
24+
width: 90%;
25+
max-width: 700px;
26+
padding: 10px 10px 0px;
27+
font-size: 90%;
28+
}
29+
30+
textarea:nth-of-type(1) {
31+
height: 80px
32+
}
33+
34+
textarea:nth-of-type(2) {
35+
height: 160px
36+
}
37+
38+
.playable-buttons {
39+
text-align: right;
40+
width: 90%;
41+
max-width: 700px;
42+
padding: 5px 10px 5px 26px;
43+
font-size: 100%;
44+
}
45+
46+
section {
47+
width: 90%;
48+
max-width: 700px;
49+
border: 1px solid #4D4E53;
50+
border-radius: 2px;
51+
padding: 10px 14px 10px 10px;
52+
margin-bottom: 10px;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
img {
60+
max-width: 100%;
61+
}
62+
63+
</style>
64+
<style class="editable">
65+
.container {
66+
column-width: 150px;
67+
column-fill: balance;
68+
height: 250px;
69+
}
70+
</style>
71+
</head>
72+
73+
<body>
74+
<section>
75+
<div class="container">
76+
<img src="../overflow/image.jpg" alt="balloons">
77+
78+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
79+
80+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion.</p>
81+
82+
83+
</div>
84+
85+
</section>
86+
<textarea class="playable-css">
87+
.container {
88+
column-width: 150px;
89+
column-fill: balance;
90+
height: 250px;
91+
}
92+
93+
</textarea>
94+
<textarea id="code" class="playable-html">
95+
<div class="container">
96+
<img src="../overflow/image.jpg" alt="balloons">
97+
98+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
99+
100+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion.</p>
101+
102+
103+
</div>
104+
</textarea>
105+
<div class="playable-buttons">
106+
<input id="reset" type="button" value="Reset">
107+
</div>
108+
</body>
109+
<script>
110+
var section = document.querySelector('section');
111+
var editable = document.querySelector('.editable');
112+
var textareaHTML = document.querySelector('.playable-html');
113+
var textareaCSS = document.querySelector('.playable-css');
114+
var reset = document.getElementById('reset');
115+
var htmlCode = textareaHTML.value;
116+
var cssCode = textareaCSS.value;
117+
118+
function fillCode() {
119+
editable.innerHTML = textareaCSS.value;
120+
section.innerHTML = textareaHTML.value;
121+
}
122+
123+
reset.addEventListener('click', function () {
124+
textareaHTML.value = htmlCode;
125+
textareaCSS.value = cssCode;
126+
fillCode();
127+
});
128+
129+
textareaHTML.addEventListener('input', fillCode);
130+
textareaCSS.addEventListener('input', fillCode);
131+
window.addEventListener('load', fillCode);
132+
</script>
133+
134+
</html>

0 commit comments

Comments
 (0)