-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
149 lines (149 loc) · 4.61 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/drab.min.css" />
<title>drab.css</title>
</head>
<body>
<header>
<h1>drab.css</h1>
<p>
An extremely boring set of CSS. If you have a page of basic, unstyled
HTML, and want to do almost no work, just pop this in.
</p>
<pre>
<link rel="stylesheet" href="https://unpkg.com/drab.css/css/drab.min.css"></pre
>
<ul>
<li>Minimum number of changes on top of normalization.</li>
<li>No classes</li>
<li>Use styles that are on ≥90% of websites.</li>
</ul>
<p><a href="https://github.com/heiskr/drab.css">GitHub repository</a>.</p>
</header>
<h2>Demo</h2>
<p>The remainder of this page serves as a demo for the stylesheet.</p>
<section>
<h3>Block-level elements</h3>
<img src="https://placehold.co/180x180" alt="Image alt text" />
<blockquote>
A block quotation is a quotation in a written document, that is set off
from the main text as a paragraph, or block of text.
<cite>A citation</cite>
</blockquote>
<progress value="0.5">progress</progress>
<h4>Ordered List</h4>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<hr />
</section>
<section>
<h3>Inline-level elements</h3>
<p>
<a href="#!">This is a text link</a>.
<strong>Strong is used to indicate strong importance.</strong>
<em>This text has added emphasis.</em>
<del>This text is deleted</del> and <ins>This text is inserted</ins>.
Superscript<sup>®</sup>. Subscript for things like H<sub>2</sub>O.
<small>This small text is small for for fine print, etc.</small>
Abbreviation:
<abbr title="HyperText Markup Language">HTML</abbr>
<q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q"
>This text is a short inline quotation.</q
>
<cite>This is a citation.</cite>
The <mark>mark element</mark> indicates a highlight. The time element:
<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>
</p>
</section>
<section>
<h3>Forms</h3>
<form>
<p>
<label for="text-input">Text input</label>
<input type="text" name="text-input" placeholder="Placeholder text" />
</p>
<p>
<label for="textarea">Textarea</label>
<textarea
id="textarea"
rows="3"
cols="30"
placeholder="Enter your message here"
></textarea>
</p>
<p>
<label for="select">Select</label>
<select id="select">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</p>
<p>
<label
><input name="checkbox" type="checkbox" checked="checked" /> Choice
A</label
>
</p>
<button type="submit">Submit</button>
<button type="button">Button</button>
<button type="reset">Reset</button>
<button type="button" disabled>Disabled</button>
</form>
</section>
<section>
<h3>Tables</h3>
<table>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>