Skip to content

Commit 13ce226

Browse files
rachelandrewrachelandrew
committed
last few multicol examples
1 parent efa4d9d commit 13ce226

File tree

4 files changed

+454
-2
lines changed

4 files changed

+454
-2
lines changed

‎multicol/balancing/auto.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777

7878
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
7979

80-
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion.</p>
80+
<p>Gumbo beet greens corn soko endive gumbo gourd.</p>
8181

8282

8383
</div>
@@ -97,7 +97,7 @@
9797

9898
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
9999

100-
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion.</p>
100+
<p>Gumbo beet greens corn soko endive gumbo gourd.</p>
101101

102102

103103
</div>

‎multicol/fragmentation/break-before.html‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Multicol example - break-before</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+
60+
img {
61+
max-width: 100%;
62+
}
63+
64+
figure {
65+
margin: 0;
66+
}
67+
68+
figcaption {
69+
font-weight: bold;
70+
border-bottom: 2px solid #999;
71+
}
72+
73+
</style>
74+
<style class="editable">
75+
.container {
76+
column-width: 200px;
77+
}
78+
79+
h2 {
80+
break-before: column;
81+
}
82+
83+
</style>
84+
</head>
85+
86+
<body>
87+
<section>
88+
<div class="container">
89+
90+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon.</p>
91+
92+
<h2>My heading</h2>
93+
94+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
95+
96+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.</p>
97+
98+
99+
</div>
100+
101+
</section>
102+
<textarea class="playable-css">
103+
.container {
104+
column-width: 200px;
105+
}
106+
107+
h2 {
108+
break-before: column;
109+
}
110+
111+
</textarea>
112+
<textarea id="code" class="playable-html">
113+
<div class="container">
114+
115+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon.</p>
116+
117+
<h2>My heading</h2>
118+
119+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
120+
121+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.</p>
122+
123+
124+
</div>
125+
</textarea>
126+
<div class="playable-buttons">
127+
<input id="reset" type="button" value="Reset">
128+
</div>
129+
</body>
130+
<script>
131+
var section = document.querySelector('section');
132+
var editable = document.querySelector('.editable');
133+
var textareaHTML = document.querySelector('.playable-html');
134+
var textareaCSS = document.querySelector('.playable-css');
135+
var reset = document.getElementById('reset');
136+
var htmlCode = textareaHTML.value;
137+
var cssCode = textareaCSS.value;
138+
139+
function fillCode() {
140+
editable.innerHTML = textareaCSS.value;
141+
section.innerHTML = textareaHTML.value;
142+
}
143+
144+
reset.addEventListener('click', function () {
145+
textareaHTML.value = htmlCode;
146+
textareaCSS.value = cssCode;
147+
fillCode();
148+
});
149+
150+
textareaHTML.addEventListener('input', fillCode);
151+
textareaCSS.addEventListener('input', fillCode);
152+
window.addEventListener('load', fillCode);
153+
</script>
154+
155+
</html>

‎multicol/fragmentation/break-inside.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Multicol example - break-inside</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+
60+
img {
61+
max-width: 100%;
62+
}
63+
64+
figure {
65+
margin: 0;
66+
}
67+
68+
figcaption {
69+
font-weight: bold;
70+
border-bottom: 2px solid #999;
71+
}
72+
73+
</style>
74+
<style class="editable">
75+
.container {
76+
column-width: 200px;
77+
}
78+
figure {
79+
break-inside: avoid;
80+
}
81+
</style>
82+
</head>
83+
84+
<body>
85+
<section>
86+
<div class="container">
87+
<figure>
88+
<img src="../overflow/image.jpg" alt="balloons">
89+
<figcaption>Balloons</figcaption>
90+
</figure>
91+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
92+
93+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. </p>
94+
95+
96+
</div>
97+
98+
</section>
99+
<textarea class="playable-css">
100+
.container {
101+
column-width: 200px;
102+
}
103+
figure {
104+
break-inside: avoid;
105+
}
106+
</textarea>
107+
<textarea id="code" class="playable-html">
108+
<div class="container">
109+
<figure>
110+
<img src="../overflow/image.jpg" alt="balloons">
111+
<figcaption>Balloons</figcaption>
112+
</figure>
113+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
114+
115+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
116+
117+
118+
</div>
119+
</textarea>
120+
<div class="playable-buttons">
121+
<input id="reset" type="button" value="Reset">
122+
</div>
123+
</body>
124+
<script>
125+
var section = document.querySelector('section');
126+
var editable = document.querySelector('.editable');
127+
var textareaHTML = document.querySelector('.playable-html');
128+
var textareaCSS = document.querySelector('.playable-css');
129+
var reset = document.getElementById('reset');
130+
var htmlCode = textareaHTML.value;
131+
var cssCode = textareaCSS.value;
132+
133+
function fillCode() {
134+
editable.innerHTML = textareaCSS.value;
135+
section.innerHTML = textareaHTML.value;
136+
}
137+
138+
reset.addEventListener('click', function () {
139+
textareaHTML.value = htmlCode;
140+
textareaCSS.value = cssCode;
141+
fillCode();
142+
});
143+
144+
textareaHTML.addEventListener('input', fillCode);
145+
textareaCSS.addEventListener('input', fillCode);
146+
window.addEventListener('load', fillCode);
147+
</script>
148+
149+
</html>

0 commit comments

Comments
 (0)