|
1
|
<!DOCTYPE html>
|
|
2
|
<html lang="en">
|
|
3
|
<head>
|
|
4
|
<meta charset="utf-8">
|
|
5
|
<title>Zen Grids: sample usage</title>
|
|
6
|
<link rel="stylesheet" href="stylesheets/styles.css" media="all">
|
|
7
|
</head>
|
|
8
|
<body>
|
|
9
|
|
|
10
|
<p id="skip-link">
|
|
11
|
<a href="#main-menu">Jump to main menu</a>
|
|
12
|
</p>
|
|
13
|
|
|
14
|
<header id="header">
|
|
15
|
<h1>Zen Grids: sample usage</h1>
|
|
16
|
</header>
|
|
17
|
|
|
18
|
<div id="main">
|
|
19
|
|
|
20
|
<article id="content" role="main">
|
|
21
|
<header>
|
|
22
|
<h1>Main content</h1>
|
|
23
|
<p>Source order: 1</p>
|
|
24
|
</header>
|
|
25
|
<aside>‘There’s no such thing!’</aside>
|
|
26
|
<p>Alice did not quite know what to say to this: so she helped herself to some tea and bread-and-butter, and then turned to the Dormouse, and repeated her question. ‘Why did they live at the bottom of a well?’</p>
|
|
27
|
<p>The Dormouse again took a minute or two to think about it, and then said, ‘It was a treacle-well.’</p>
|
|
28
|
<p>‘There’s no such thing!’ Alice was beginning very angrily, but the Hatter and the March Hare went ‘Sh! sh!’ and the Dormouse sulkily remarked, ‘If you can’t be civil, you’d better finish the story for yourself.’</p>
|
|
29
|
<p>‘No, please go on!’ Alice said very humbly; ‘I won’t interrupt again. I dare say there may be ONE.’</p>
|
|
30
|
</article>
|
|
31
|
|
|
32
|
<nav id="main-menu" role="navigation">
|
|
33
|
<header>
|
|
34
|
<h2>Menu</h2>
|
|
35
|
<p>Source order: 2</p>
|
|
36
|
</header>
|
|
37
|
<a href="#">Alice</a> ★
|
|
38
|
<a href="#">Mad Hatter</a> ★
|
|
39
|
<a href="#">The Queen</a> ★
|
|
40
|
<a href="#">Tom Petty</a>
|
|
41
|
</nav>
|
|
42
|
|
|
43
|
<aside id="aside1">
|
|
44
|
<header>
|
|
45
|
<h2>Aside</h2>
|
|
46
|
<p>Source order: 3</p>
|
|
47
|
</header>
|
|
48
|
<p>‘Have some wine,’ the March Hare said in an encouraging tone.</p>
|
|
49
|
</aside>
|
|
50
|
|
|
51
|
<aside id="aside2">
|
|
52
|
<header>
|
|
53
|
<h2>Aside</h2>
|
|
54
|
<p>Source order: 4</p>
|
|
55
|
</header>
|
|
56
|
<p>‘Please would you tell me,’ said Alice, a little timidly, for she was not quite sure whether it was good manners for her to speak first, ‘why your cat grins like that?’</p>
|
|
57
|
<p>‘It’s a Cheshire cat,’ said the Duchess, ‘and that’s why. Pig!’</p>
|
|
58
|
</aside>
|
|
59
|
|
|
60
|
</div>
|
|
61
|
|
|
62
|
<footer id="footer">
|
|
63
|
<small>© 2012. The small print.</small>
|
|
64
|
</footer>
|
|
65
|
|
|
66
|
</body>
|
|
67
|
</html>
|