-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
559 lines (532 loc) · 20.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The guide for special layouts and styling</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<style>
:root {
--font-sans-serif: "Open Sans", sans-serif;
--font-serif: Lora, Georgia, serif;
}
html,
body {
padding: 0;
margin: 0;
font-size: 100%;
}
h1,
h2,
h3,
p,
ul {
margin: 0;
font-family: var(--font-serif);
}
main {
display: grid;
gap: 0.75rem;
}
hgroup,
section,
.inline {
display: grid;
gap: 0.5rem;
max-width: 80ch;
width: 100%;
margin: 0 auto;
padding: 0.25rem 0.75rem;
box-sizing: border-box;
}
hgroup {
gap: 0.375rem;
}
h1 {
font-size: clamp(2rem, calc(1.375rem + 1.125vw), 3rem);
}
h2 {
font-size: clamp(1.75rem, calc(1rem + 1vw), 2.5rem);
}
h3 {
font-size: clamp(1.5rem, calc(1rem + 0.5vw), 2rem);
}
p {
font-size: 1.125rem;
}
</style>
<link href="css/grid.css" rel="stylesheet" />
<link href="css/scroll.css" rel="stylesheet" />
</head>
<body>
<main>
<hgroup>
<h1 style="text-wrap: balance">
The guide for special layouts and styling
</h1>
<p
style="
border-left: 5px solid rgb(158, 158, 158);
margin-left: 0.25rem;
padding-left: 0.75rem;
text-wrap: balance;
"
>
Recommendations for how to build reusable and responsive websites and
stories for The Michigan Daily.
</p>
<p style="font-size: 1.125rem">
Written by
<a href="https://www.michigandaily.com/author/ericlau" rel="author">
Eric Lau
</a>
</p>
</hgroup>
<section>
<p>
This guide primarily focuses on setting up page layout and styling.
For best practices with regards to development and deployment, refer
to the
<a
href="https://library.michigandaily.com/web/engineering/special-website-checklist"
>special website checklist</a
>.
</p>
<p>
This guide is also self-referential in that I will be describing
concepts that are reflected in how this page is laid out. It will be
useful to have the code for this page open as you read.
</p>
</section>
<section>
<h2 id="layout">Layout</h2>
<p>
Most websites include a CSS reset, a set of stylings that remove style
inconsistencies between browsers. This page has a rather minimal reset
to remove margin and padding from the body, and to remove margin from
headings and paragraphs. While the default margins for text elements
are useful to provide spacing, it is preferable to manually control
the spacing through grid layout gaps.
</p>
<p>
As a news organization, many of our special websites will require
large amounts of prose. People tend to have a hard time reading when a
text container is wide. This is particularly an issue for some people
with disabilities.
</p>
<blockquote
style="font-family: var(--font-serif); display: grid; gap: 0.5rem"
>
For people with some reading or vision disabilities, long lines of
text can become a significant barrier. They have trouble keeping their
place and following the flow of text. Having a narrow block of text
makes it easier for them to continue on to the next line in a block.
Lines should not exceed 80 characters or glyphs (40 if [Chinese,
Japanese and Korean]), where glyphs are the element of writing in the
writing system for the text.
<footer style="font-family: var(--font-sans-serif)">
— W3C,
<cite
><a
href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html"
>Understanding Success Criterion 1.4.8 (WCAG 2.0)</a
></cite
>
</footer>
</blockquote>
<p>
Therefore, I start most prose-heavy layouts with a section that is 60
to 80 characters wide. CSS includes a
<code><b>ch</b></code> unit to work with the width of a single
character glyph. Note that setting a maximum width is naturally
responsive, even on mobile devices.
</p>
<p>
In most cases, text should be centered on the screen. Centering can be
accomplished with horizontal margin set to <code><b>auto</b></code
>. It is also important for a section of text to take up all allotted
space within the maximum width constraint by setting the width to
<code><b>100%</b></code
>.
</p>
<p>
Some padding should also be added around the text container to ensure
that the text does not touch the screen edges. This is especially
important for mobile devices. Note that padding will add to the width
of the container by default, making mobile screens horizontally
scrollable. To prevent this, set
<code><b>box-sizing: border-box</b></code> on the text container.
</p>
<p>
With all that we've described in terms of grid layout, maximum
character width, text centering and mobile responsiveness, we arrive
at the following set of styles for prose layout.
</p>
<pre><code><b>section {
display: grid;
gap: 0.5rem;
max-width: 80ch;
width: 100%;
margin: 0 auto;
padding: 0.25rem 0.75rem;
box-sizing: border-box;
}</b></code></pre>
<p>
Although I describe this as "prose layout," all of the ideas are
pertinent to any good responsive layout, regardless of the amount of
text content.
</p>
</section>
<section style="max-width: unset; padding: 0">
<div class="inline">
<h3 id="breaking-out">Breaking out</h3>
<p>
Although this default width is useful for prose, there are also
situations when you might want more width to work with. In those
cases, you will want to create "breakout" sections.
</p>
</div>
<div style="background-color: #d4c184; height: 350px"></div>
<div class="inline">
<p>
In a breakout section, remove the maximum width associated with a
section. Then, you will have the full width of the screen to work
with.
</p>
</div>
<div
class="inline"
style="
background-color: #79d7e7;
max-width: 800px;
height: 350px;
padding: 0;
"
></div>
<div class="inline">
<p>
If there are parts of the breakout section that you want to retain
the prose width, you'll want to re-apply the styles that set the
maximum character width. Furthermore, the maximum width can be
customized to be more than the prose width but less than the full
width, as demonstrated in the blue rectangle above.
</p>
<p>
Note that breakout sections are less visually imposing on mobile
devices due to the small screen width.
</p>
</div>
<div class="inline">
<h3 id="grid-layout">Grid layout</h3>
<p>
Grids are a powerful layout approach. They can be used for simple
vertical layouts like this overall page, but can also be used for
more complex two-dimensional layouts. Grids can be made to be
responsive by default in some cases, eliminating the need for media
queries. Relevant styles for the following example can be found in
<code><b>css/grid.css</b></code
>.
</p>
<p>
Notice that the following grid layout is part of a breakout section.
</p>
</div>
<div
class="inline"
style="max-width: 1200px; padding-top: 0; padding-bottom: 0"
>
<ul class="grid-list">
<li class="grid-list-item" style="--color: #e4a010">A</li>
<li class="grid-list-item" style="--color: #008f39">B</li>
<li class="grid-list-item" style="--color: #641c34">C</li>
<li class="grid-list-item" style="--color: #e55137">D</li>
<li class="grid-list-item" style="--color: #1b5583">E</li>
</ul>
</div>
</section>
<section>
<h3 id="scroll-layout">Scroll layout</h3>
<p>
There is a common storytelling method in journalism called
"scrollytelling." In essence, a visual element remains in the
background or to the side of an area of text as the user scrolls. The
visual element usually changes several times as the reader reaches
specific areas of text, denoting some sort of relation between the
change and the text. Scrolling layouts are often used in data
visualizations or animations to show transition points in a story.
</p>
</section>
<section class="scroll-container">
<figure class="scroll-figure scroll-stack">
<div
style="background-color: #ab14b7; width: 100%; height: 300px"
></div>
</figure>
<div class="scroll-step-container scroll-stack">
<div class="scroll-step">
<div class="scroll-step-content">
<p>
There are a few important areas for a scrolling layout. First,
there is a container with <code><b>position: relative</b></code
>. This container will have two immediate children: 1) a figure
that will remain in the background and 2) a container of steps.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
The figure should stick to the top of the screen, relative to
the scrolling container. In this case, it is also taking up the
entire height of the screen.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
The figure should also be placed behind the steps (in
three-dimensional space) such that the written content appears
in front of the figure. The figure should usually horizontally
and vertically center any of the content inside it.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<pre><code><b>.scroll-figure {
position: sticky;
top: 0;
margin: 0;
min-height: 100vh;
min-height: 100svh;
display: grid;
place-items: center;
z-index: 0;
}</b></code></pre>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
The figure should also have something inside it. In our case, we
created a purple rectangle that is 500 pixels tall.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
Secondly, the child container should be made to render in front
of the figure. In our case, the width is also less than the
figure's width.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<pre><code><b>.scroll-step-container {
z-index: 1;
max-width: 60ch;
width: 100%;
margin: 0 auto;
}</b></code></pre>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
A step itself should take up the entire screen height. Within
the step, there is another content container that has a white
background. This provides the visual illusion that steps are
smaller than they are. Note that the content container does not
take up the entire height of the screen.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<pre><code><b>.scroll-step {
min-height: 100vh;
min-height: 100svh;
}
.scroll-step-content {
border: 2px solid black;
background:
rgba(0, 0, 0, 0.5);
color: white;
padding: 1rem;
display: grid;
gap: 1rem;
}</b></code></pre>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
While all of the steps on the page take up the full height of
the screen, it may be useful depending on the story for specific
steps to take up more or less of the screen to shorten or
lengthen the amount of time it takes to scroll between steps.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
For the most part, the (text) content within each step should be
short. This is especially important on mobile devices so as to
not completely cover the background figure.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
There is a browser compatibility issue regarding the
three-dimensional nature of our layout. The figure is meant to
always be behind the steps, but this is not the case in Safari
without some extra configuration for the figure and the
container of steps.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<pre><code><b>.scroll-stack {
transform:
translate3d(0, 0, 0);
}</b></code></pre>
<p>
This forcefully creates a
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context"
>stacking context</a
>. I'm not certain this is necessary, but I've found it so in my
experience.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
The most prominent library used for scrolling layouts in
journalism is called
<code
><b
><a href="https://github.com/russellsamora/scrollama"
>scrollama</a
></b
></code
>. We have published several stories and websites that use the
library.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
This page does not use <code><b>scrollama</b></code> to change
the scrolling figure. It simply shows the styling and layout
necessary to effectively use the library. The relevant styles
can be found in <code><b>css/scroll.css</b></code
>.
</p>
</div>
</div>
<div class="scroll-step">
<div class="scroll-step-content">
<p>
I will leave it as an exercise to read the library's
documentation to figure out how to change the figure while
scrolling.
</p>
</div>
</div>
</div>
</section>
<section>
<h2 id="prose">Prose</h2>
<p>
The Daily uses Lora as our serif font and Open Sans as our sans serif
font (digitally). In typography, serifs are small lines that are
attached to the ends of a letter. We use these fonts in our styles by
importing them through
<a href="https://fonts.google.com">Google Fonts</a>.
</p>
<p>
All text should have be at least 16 pixels large for readability.
Typically, I don't use pixels explicitly. Instead, I specify 16 pixels
as the base font size, and then use the <code><b>rem</b></code> unit
to specify multiples of 16. For example, <code><b>1rem</b></code> is
equivalent to 16 pixels, and <code><b>2rem</b></code> is equivalent to
32 pixels. I will typically increment <code><b>rem</b></code> units by
0.125 or 0.25 to keep some form of consistency. The lowest font size
that I feel somewhat comfortable using is <code><b>0.875rem</b></code
>, potentially for captions or footnotes.
</p>
<p>
For larger pieces of text such as headings or titles, I will introduce
a responsive unit such as <code><b>vw</b></code> which represents a
fraction of the width of the screen. For example, the font size of
this page title is
<code><b>clamp(2rem, calc(1.375rem + 1.125vw), 3rem);</b></code
>. The <code><b>clamp</b></code> function keeps the font size within
the range of the first and last parameters, but allows the size to be
flexible otherwise.
</p>
</section>
<section>
<h2 id="images">Images</h2>
<p>
Every story that gets published usually includes at least one image
(i.e., the featured image). An image should almost always have the
following additional elements: 1) alternative text, 2) credits and 3)
a caption. The image and the additional elements should usually be
encapsulated in a <code><b>figure</b></code> element. The caption
itself should be placed in a <code><b>figcaption</b></code> element.
</p>
<p>
Images are heavy pieces of media. While prose is relatively light,
images can often take up several megabytes (MBs) without optimization.
</p>
<ul>
<li>
While JPG and PNG are well known image file formats, they are not as
space efficient as modern ones such as WebP.
</li>
<li>
While it is good to have images with high resolution, small screens
such as phones are unable to take advantage of the large pixel
count. Therefore, different image sizes should be used for different
screen sizes.
</li>
<li>
A user might not view all of the images in a story if they do not
finish reading. Therefore, it will be beneficial to load an image
when the user scrolls near it. This can be accomplished with
<a
href="https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading"
>lazy loading</a
>.
</li>
</ul>
<p>
Our WordPress website includes the
<a href="https://jetpack.com">Jetpack</a> plugin which optimizes
images by using better image formats and creating several size
variants for different screen sizes. In order to take advantage of
Jetpack, visit the
<a href="https://michigan-daily-pantry.pages.dev">pantry</a>.
</p>
<h3>Carousels</h3>
<h3>Stacks</h3>
</section>
</main>
</body>
</html>