-
Notifications
You must be signed in to change notification settings - Fork 0
/
sample-rhythm.html
executable file
·115 lines (97 loc) · 9.23 KB
/
sample-rhythm.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
---
layout: page
title: Vertical Rhythm
nav-title: Vertical Rhythm
permalink: sample-rhythm/
body-class: vertical-rhythm
---
<!-- <h2 id="menu">Establish a Vertical Rhythm</h2> -->
<p>Use our <code>.vertical-rhythm</code> body class to add a background that can help establish a <strong>vertical rhythm</strong>. The line-height of the grid should be adjusted for each project, as well as the padding-top to align to the first element. This site has a 18px font size and a 1.4 line height, which results in a pixel line-height of 25px. Therefore, the CSS looks like this:</p>
<pre><code>background: linear-gradient(#c0c 0px, #fff 1px) repeat;
background-size: 100% 25px;
padding-top: 6px;</code></pre>
<p>Adjust the '25' in the background-size line to change the space between lines. Look at the rendered line-height on a <code><p></code> to see what the value needs to be. The adjust the padding-top offset if needed.</p>
<p class="display-1">Display-1 from Bootstrap4</p>
<p>In addition to headers, Bootstrap gives us four utility classes that create text sizes larger than h1s. This is the class <code>.display-1</code> in action. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p class="display-2">Display-2 from Bootstrap4</p>
<p>In addition to headers, Bootstrap gives us four utility classes that create text sizes larger than h1s. This is the class <code>.display-2</code> in action. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p class="display-3">Display-3 from Bootstrap4</p>
<p>In addition to headers, Bootstrap gives us four utility classes that create text sizes larger than h1s. This is the class <code>.display-3</code> in action. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<p class="display-4">Display-4 from Bootstrap4</p>
<p>In addition to headers, Bootstrap gives us four utility classes that create text sizes larger than h1s. This is the class <code>.display-4</code> in action. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Below we get into default Heading displays for H1 through H6.</p>
<h1 id="headings">Heading 1 <a href="#">with a Link</a> and more text to test line height wrapping</h1>
<p>The primary header is an <code><h1></code> element. Any header elements may include links, as depicted in the example. More than one of any type may be used per page. All of the headings follow a similar markup pattern:</p>
<!-- <pre class="examplecode"><code><h1>This is a heading of primary importance</h1></code></pre> -->
<h2>Second-Level Header <a href="#">with a Link</a> and more text to test some of the line height wrapping</h2>
<p>The secondary header is an <code><h2></code> element, which may be used for any form of important page-level header. More than one may be used per page. Consider using an <code>h2</code> as a sub-header to the page title or an existing <code>h1</code> element.</p>
<h3>Third-Level Header <a href="#">with a Link</a> and more text to test some of the line height wrapping</h3>
<p>The header above is an <code><h3></code> element, which may be used for any form of page-level header which falls below the <code>h2</code> header in a document hierarchy.</p>
<h4>Fourth-Level Header <a href="#">with a Link</a> and more text to test some of the line height wrapping and such</h4>
<p>The header above is an <code><h4></code> element, which may be used for any form of page-level header which falls below the <code>h3</code> header in a document hierarchy.</p>
<h5>Fifth-Level Header <a href="#">with a Link</a> and more text to test some of the line height wrapping and such in order to check line height on the header element itself</h5>
<p>The header above is an <code><h5></code> element, which may be used for any form of page-level header which falls below the <code>h4</code> header in a document hierarchy.</p>
<h6>Sixth-Level Header <a href="#">with a Link</a> and more text to test some of the line height wrapping and such in order to check line height on the header element itself</h6>
<p>The header above is an <code><h6></code> element, which may be used for any form of page-level header which falls below the <code>h5</code> header in a document hierarchy.</p>
<!-- end Headings -->
<h2>Vertical Rhythm Test</h2>
<h3>An h2 followed by this h3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>A short bullet point</li>
<li>Another short bullet point</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h3>Another likely Pair</h3>
<h4>An h3 followed by this h4</h4>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<address>An address element. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </address>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Long List Lines Test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<blockquote cite="http://hansard.millbanksystems.com/commons/1947/nov/11/parliament-bill#column_206">
<p>Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.</p>
</blockquote>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Nested Lists</h2>
<ul>
<li>A short bullet point
<ul>
<li>Nested unordered list
<ul>
<li>More nesting!</li>
</ul>
</li>
</ul>
</li>
<li>Another short bullet point
<ol>
<li>A nested ordered list</li>
<li>Oh yeah, it gets complicated now
<ol>
<li>Further nesting, probably an edge case</li>
<li>I mean, the CSS plans for four levels of nesting
<ol>
<li>For a total of five levels of depth!
<ol>
<li>But that would be crazy
<ol>
<li>Maybe someone in academics needs to go this far down</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Phew, that was a lot</li>
</ol>
</li>
</ul>