Skip to content

Commit becd34a

Browse files
dipikabhdipikabh
authored
Merge pull request mdn#140 from estelle/multicol
CSS column layout module example
2 parents bf39396 + 1ea705e commit becd34a

File tree

1 file changed

+283
-0
lines changed

1 file changed

+283
-0
lines changed

‎modules/multicol.html

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>CSS column layout example</title>
7+
<style>
8+
article {
9+
column-count: 10;
10+
column-width: 10em;
11+
widows: 3;
12+
orphans: 3;
13+
gap: 1em;
14+
column-rule: 2px dashed #666;
15+
height: 40em;
16+
}
17+
.title {
18+
column-span: all;
19+
display: flex;
20+
align-items: baseline;
21+
gap: 1em;
22+
flex-wrap: wrap;
23+
}
24+
p {
25+
margin: 0 0 1em 0;
26+
line-height: 1.4;
27+
}
28+
.breakInside * {
29+
break-inside: avoid;
30+
}
31+
#options {
32+
position: fixed;
33+
top: 1rem;
34+
right: 1rem;
35+
background: white;
36+
display: none;
37+
}
38+
fieldset p {
39+
margin-bottom: 0.25em;
40+
}
41+
[aria-expanded] {
42+
position: relative;
43+
top: 0;
44+
transition: 200ms;
45+
}
46+
[aria-expanded="false"] {
47+
top: 0.75em;
48+
}
49+
[aria-expanded="false"] + #controls {
50+
display: none;
51+
}
52+
legend {
53+
background-color: #dedede;
54+
padding: 0.5em;
55+
}
56+
[aria-expanded="false"] {
57+
margin: -1em;
58+
display: inline-block;
59+
}
60+
blockquote {
61+
border: 2px dashed red;
62+
margin: 0 0 0.25em 0;
63+
}
64+
blockquote p {
65+
margin-bottom: 0;
66+
}
67+
blockquote p::before,
68+
blockquote p::after {
69+
content: '"';
70+
font-size: 1.2em;
71+
vertical-align: baseline;
72+
color: red;
73+
}
74+
</style>
75+
</head>
76+
<body>
77+
<article>
78+
<div class="title">
79+
<h1>A Lament for Confederation</h1>
80+
<p>&mdash;Chief Dan George, 1967</p>
81+
</div>
82+
83+
<p>
84+
How long have I known you, Oh Canada? A hundred years? Yes, a hundred
85+
years. And many, many tides more. And today, when you celebrate your
86+
hundred years, Oh Canada, I am sad for all the Indian people throughout
87+
the land.
88+
</p>
89+
90+
<p>
91+
For I have known you when your forests were mine; when they gave me my
92+
meat and my clothing. I have known you in your fruits and rivers where
93+
your fish flashed and danced in the sun, where the waters said ‘come and
94+
eat of my abundance.’ I have known you in the freedom of your winds. And
95+
my spirit, like your winds, once roamed this good lands.
96+
</p>
97+
98+
<blockquote>
99+
<p>
100+
But in long the hundred years since the white man came, I have seen
101+
that freedom disappear just like the salmon going mysteriously out to
102+
sea.
103+
</p>
104+
</blockquote>
105+
106+
<p>
107+
The white man’s strange customs I could not understand, pressed down
108+
upon me until I could no longer breathe.
109+
</p>
110+
111+
<p>
112+
When I fought to protect my home and my land, I was called a savage.
113+
When I neither understood nor welcomed this new way of life, I was
114+
called lazy. When I tried to rule my people, I was stripped of my
115+
authority.
116+
</p>
117+
118+
<p>
119+
My nation was ignored in your history textbooks – we were less important
120+
in the history of Canada than the buffalo that ranged the plains. I was
121+
ridiculed in your plays and motion pictures, and when I drank your
122+
fire-water, I got drunk – very, very drunk. And I forgot.
123+
</p>
124+
125+
<p>
126+
Oh Canada, how can I celebrate with you this centenary, this hundred
127+
years? Shall I thank you for the reserves that are left me of my
128+
beautiful forests? Shall I thank you for the canned fish of my rivers?
129+
Shall I thank you for the loss of my pride and authority, even among my
130+
own people? For the lack of my will to fight back? No! I must forget
131+
what is past and gone.
132+
</p>
133+
134+
<p>
135+
Oh God in heaven! Give me the courage of the olden chiefs. Let me
136+
wrestle with my surroundings. Let me once again, as in the days of old,
137+
dominate my environment. Let me humbly accept this new culture and
138+
through it rise up and go on.
139+
</p>
140+
141+
<p>
142+
Oh god, like the thunderbird of old, I shall rise again out of the sea.
143+
I shall grab the instruments of the white man’s success – his education,
144+
his skills, and with these new tools I shall build my race into the
145+
proudest segment of your society. And, before I follow the great chiefs
146+
who have gone before us, I shall see these things come to pass.
147+
</p>
148+
149+
<p>
150+
I shall see our young braves and our chiefs sitting in the house of law
151+
and government, ruling and being ruled by the knowledge and freedoms of
152+
our great land. So shall we shatter the barriers of our isolation. So
153+
shall the next hundred years be the greatest in the proud history of our
154+
tribes and nations.
155+
</p>
156+
</article>
157+
<fieldset id="options">
158+
<legend role="button" aria-expanded="true" aria-controls="controls">
159+
Column options
160+
</legend>
161+
<div id="controls">
162+
<p>
163+
<input type="range" min="0" max="10" value="10" id="colCount" />
164+
<label for="colCount">Max # of columns:</label>
165+
</p>
166+
<p>
167+
<input
168+
type="range"
169+
min="2"
170+
max="40"
171+
value="10"
172+
step="2"
173+
id="colWidth"
174+
/>
175+
<label for="colWidth">Min width of columns:</label>
176+
</p>
177+
<p>
178+
<input
179+
type="range"
180+
min="0"
181+
max="10"
182+
value="1"
183+
step="0.5"
184+
id="gapSize"
185+
/>
186+
<label for="gapSize">Gap size:</label>
187+
</p>
188+
<p>
189+
<input type="checkbox" checked id="colSpan" />
190+
<label for="colSpan">Byline spans all columns</label>
191+
</p>
192+
<p>
193+
<input type="checkbox" id="blockSpan" />
194+
<label for="blockSpan">Blockquote spans all columns</label>
195+
</p>
196+
<p>
197+
<input type="checkbox" id="colFill" />
198+
<label for="colFill">Balance columns</label>
199+
</p>
200+
<p>
201+
<input type="checkbox" id="break" />
202+
<label for="break">Don't break paragraphs</label>
203+
</p>
204+
</div>
205+
</fieldset>
206+
</body>
207+
<script>
208+
const article = document.querySelector("article");
209+
const title = document.querySelector(".title");
210+
const options = document.querySelector("#options");
211+
const legend = document.querySelector("#options > legend");
212+
const blockquote = document.getElementsByTagName("blockquote")[0];
213+
214+
const colCount = document.getElementById("colCount");
215+
const colWidth = document.getElementById("colWidth");
216+
const gapSize = document.getElementById("gapSize");
217+
const colSpan = document.getElementById("colSpan");
218+
const blockSpan = document.getElementById("blockSpan");
219+
const colFill = document.getElementById("colFill");
220+
const breakP = document.getElementById("break");
221+
222+
// make options visible if js is enabled
223+
options.style.display = "revert";
224+
225+
legend.addEventListener("click", () => {
226+
showAndHideMenu();
227+
});
228+
229+
colCount.addEventListener("change", () => {
230+
article.style.columnCount = colCount.value;
231+
});
232+
233+
colWidth.addEventListener("change", () => {
234+
article.style.columnWidth = `${colWidth.value}em`;
235+
});
236+
237+
gapSize.addEventListener("change", () => {
238+
article.style.gap = `${gapSize.value}em`;
239+
});
240+
241+
colSpan.addEventListener("change", () => {
242+
setColSpan(colSpan, title);
243+
});
244+
245+
blockSpan.addEventListener("change", () => {
246+
setColSpan(blockSpan, blockquote);
247+
});
248+
249+
colFill.addEventListener("change", () => {
250+
if (colFill.checked) {
251+
article.style.columnFill = "balance";
252+
} else {
253+
article.style.columnFill = "auto";
254+
}
255+
});
256+
257+
breakP.addEventListener("change", () => {
258+
if (breakP.checked) {
259+
article.classList.add("breakInside");
260+
} else {
261+
article.classList.remove("breakInside");
262+
}
263+
});
264+
265+
function showAndHideMenu() {
266+
if (legend.getAttribute("aria-expanded") === "true") {
267+
// close it
268+
legend.setAttribute("aria-expanded", "false");
269+
} else {
270+
// open it
271+
legend.setAttribute("aria-expanded", "true");
272+
}
273+
}
274+
275+
function setColSpan(control, element) {
276+
if (control.checked) {
277+
element.style.columnSpan = "all";
278+
} else {
279+
element.style.columnSpan = "none";
280+
}
281+
}
282+
</script>
283+
</html>

0 commit comments

Comments
 (0)