-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
347 lines (296 loc) · 14.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="YACCK is classless, responsive, minimal CSS framework that focuses on HTML semantic elements.">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<title>YACCK - Yet Another Classless CSS Kit</title>
<!-- <link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Rubik&family=Inter&display=swap" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="yacck.css">
</head>
<body>
<header>
<div>
<a href="/"><img src="img/yacck-logo-monochrome-white.svg" alt="YACCK" /></a>
<p><i>Yet Another Classless CSS Kit</i></p>
</div>
<nav>
<ul>
<li><a href="#">Nav Item 1</a></li>
<li><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
<li><a href="#">Nav Item 4</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>YACCK - Yet Another Classless CSS Kit</h1>
<p>YACCK is a <b>classless</b>, responsive CSS kit that focuses on pure HTML semantic elements. It is inspired by many other similar minimal CSS frameworks, such as <a href="https://github.com/andybrewer/mvp">MVP.css</a> and <a href="https://github.com/xz/new.css">new.css</a>. It is intended to be used on simple websites and blogs.</p>
<p>This is a work in (slow) progress. View the source on <a href="https://github.com/sphars/yacck/">GitHub</a>.</p>
<h2>Install</h2>
<p>You can download the `yacck.css` file from GitHub and include it in your project:</p>
<pre><code><link rel="stylesheet" href="path/to/yacck.css">
</code>
</pre>
<p>or use a CDN (minimized file):</p>
<pre><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sphars/yacck/yacck.min.css">
</code>
</pre>
<p>For more details, including customizing and fonts, see the <a href="https://github.com/sphars/yacck/#customizing">GitHub readme</a>.</p>
</section>
<hr/>
<section>
<p>The following is an example of how various elements are styled. Please see the <a href="https://github.com/sphars/yacck/blob/master/index.html">source code of this page</a> for the markup structure.</p>
<h1>Text Elements</h1>
<h2>Headings</h2>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<h2>Paragraphs</h2>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit ac ridiculus curabitur porttitor, interdum pretium sed velit natoque mus commodo feugiat habitasse aliquam justo class, nostra per dui risus quisque erat mauris semper dictum nisi. Ac at enim eleifend nulla turpis erat interdum accumsan facilisi, consequat quisque euismod id fringilla sed potenti.</p>
<h2>Inline Text Elements</h2>
<ul>
<li><code><a></code>: <a href="https://www.somesillyexampleurl.com">I'm an unvisited anchor</a> and <a href="#">I'm a visited anchor</a></li>
<li><code><i></code>, <code><em></code>: <i>I have meaning!</i> and <em>I have emphasis!</em></li>
<li><code><b></code>, <code><strong></code>: <b>I'm bringing attention!</b> and <strong>I have importance!</strong></li>
<li><code><code></code>: <code>console.log("Hello!");</code></li>
<li><code><mark></code>: The following word is <mark>marked</mark>.</li>
<li><code><kbd></code>: <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd></li>
<li><code><q></code>: <q>I'm not superstitious but I am a little stitious.</q> - Michael Scott</li>
</ul>
<h2>Blockquotes</h2>
<blockquote>
<p>Do I need to be liked? Absolutely not. I like to be liked. I enjoy being liked. I have to be liked, but it's not like this compulsive need to be liked, like my need to be praised.</p>
<footer>As quoted by <cite><a href="#">Michael Scott</a></cite></footer>
</blockquote>
<h2>Preformatted Text</h2>
<pre>
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>
<h2>Code Block</h2>
<p>Wrap your <code><code></code> element in a <code><pre></code> element to display it as a block.</p>
<pre>
<code><div>
<p>This is a very important paragraph. It goes on and on and on and on...<p>
<div>
</code>
</pre>
</section>
<section>
<h1>Images</h1>
<p><img src="https://placedog.net/400" alt="An image of a dog" title="A glorious dog"></p>
</section>
<section>
<h1>Lists</h1>
<h2>Unordered List</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ol>
<h2>Definition List</h2>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
</section>
<section>
<h1>Details</h1>
<p>Also sometimes referred to as an accordion element.</p>
<details>
<summary>More Details</summary>
<p>This is the extra details you need to know.</p>
</details>
</section>
<section>
<h1>Horizontal Row</h1>
<hr/>
</section>
<section>
<h1>Tables</h1>
<p>Note: I'd prefer to have the tables be full-width, with <code>overscroll-x</code> for large tables that expand beyond the viewport. However, without a wrapper around it, I haven't found clean CSS-only solution. A <code>div</code> wrapper can't be targeted via CSS without a class or adding some attribute. There may be a solution I am unaware of. For now, tables are full-width and if the table content is too large, the content will be clipped on as viewport width is reduced. This may change, depending how I feel about adding extra stuff.</p>
<table>
<caption>This is a table of very important data.</caption>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
<td>Row 1 Col 4</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
<td>Row 2 Col 4</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
<td>Row 3 Col 4</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
<td>Row 4 Col 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
</tr>
</tfoot>
</table>
</section>
<section>
<h1>Forms</h1>
<form>
<h2>An Example Form</h2>
<p>Form elements should be a combination of a label and an input wrapped in a block-level element such as a <code>div</code>. Checkboxes and radio buttons should be wrapped in a <code>li</code> element, wrapped in a <code>ul</code> element.</p>
<p>Note: Most of these inputs are not yet styled, other than adjusting the sizing. As soon as I figure out how to adjust the styles, I work on that.</p>
<fieldset>
<legend>Common Inputs</legend>
<div>
<label for="text">Text</label>
<input type="text" id="text" placeholder="Enter some text">
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" autocomplete="current-password">
</div>
<div>
<label for="disabledInput">Disabled Input</label>
<input type="text" id="disabledInput" disabled>
</div>
<ul>
<li>
<input id="check1" type="checkbox" value="" name="checkboxes">
<label for="check1">Checkbox 1</label>
</li>
<li>
<input id="check2" type="checkbox" value="" name="checkboxes">
<label for="check2">Checkbox 2</label>
</li>
<li>
<input id="check3" type="checkbox" value="" name="checkboxes">
<label for="check3">Checkbox 3</label>
</li>
</ul>
<ul>
<li>
<input id="radio1" type="radio" value="" name="radios">
<label for="radio1">Radio 1</label>
</li>
<li>
<input id="radio2" type="radio" value="" name="radios">
<label for="radio2">Radio 2</label>
</li>
<li>
<input id="radio3" type="radio" value="" name="radios">
<label for="radio3">Radio 3</label>
</li>
</ul>
<div>
<label for="date">Date Picker</label>
<input type="date" id="date">
</div>
<div>
<label for="textarea">Textarea</label>
<textarea id="textarea" rows="5" placeholder="Enter more text"></textarea>
</div>
</fieldset>
<fieldset>
<legend>Select Controls</legend>
<div>
<label for="select">Select List</label>
<select id="select">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>
</div>
<div>
<label for="multiselect">Multiselect List</label>
<select id="multiselect" multiple size="4">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="lime">Lime</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Other Controls</legend>
<div>
<label for="color">Color</label>
<input type="color" id="color">
</div>
<div>
<label for="range">Range</label>
<input type="range" id="range" min="0" max="100" step="1">
</div>
<div>
<label for="filePicker">File Picker</label>
<input type="file" id="filePicker">
</div>
</fieldset>
<fieldset>
<legend>Buttons</legend>
<div>
<button type="submit">Submit</button>
<input type="button" value="Button">
<button type="reset">Reset Form</button>
<button type="button" disabled>Disabled</button>
</div>
</fieldset>
</form>
</section>
</main>
<footer>
<div>
<p>Created by Spencer Harston, licensed under the MIT license<br>
Icon by <a href="https://thenounproject.com/andvasiliev/">Andrey Vasiliev</a>
</p>
<p><a href="https://github.com/sphars/yacck/">View source on GitHub</a></p>
</div>
</footer>
</body>
</html>