-
Notifications
You must be signed in to change notification settings - Fork 94
/
lit.html
367 lines (363 loc) · 15.7 KB
/
lit.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>lit 🔥</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">
<!-- Link to your stylesheet here -->
<link rel="stylesheet" href="../dist/lit.css">
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
.example-grid .row {
/*stolen from skeleton for the time being*/
text-align: center;
font-size: .8em;
letter-spacing: .1rem;
margin: .8em 0;
}
.example-grid .col {
background: #EEE;
padding: .3em;
}
</style>
</head>
<body class="c">
<h1>lit 🔥</h1>
<h5>world's smallest responsive css framework* (<a href="https://github.com/Ajusa/lit/blob/master/dist/lit.css.gz">395 bytes</a> gzipped and minified)</h5>
<p>This is the result of me playing css "code golf" with <a href="http://www.getskeleton.com">Skeleton</a>. As such, this framework strives to maintain all of the features that Skeleton and other similar frameworks offer, while working on older browsers as well.</p>
<p>If you want a little more, try using <a href="./util.html">util</a>, an addon for lit</p>
<p>Any other thoughts? Head to the <a href="https://github.com/ajusa/lit">Github</a> repository and make an issue! If you like this idea, don't forget to </p>
<div>
<a class="github-button" href="https://github.com/ajusa/lit" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ajusa/lit on GitHub">Star</a>
</div>
<h6>* Depends on how you define framework. For me, a framework needs to have default styles (buttons, typography, forms), and a grid system.</h6>
<h2>Documentation</h2>
<div class="row card">
<div class="col"><a href="#container">Container</a></div>
<div class="col"><a href="#grid">Grid</a></div>
<div class="col"><a href="#typography">Typography</a></div>
<div class="col"><a href="#navbar">Navbar</a></div>
<div class="col"><a href="#codeBlock">Code Block</a></div>
<div class="col"><a href="#buttons">Buttons</a></div>
<div class="col"><a href="#lists">Lists</a></div>
<div class="col"><a href="#forms">Forms</a></div>
<div class="col"><a href="#tables">Tables</a></div>
<div class="col"><a href="#cards">Cards</a></div>
<div class="col"><a href="#other">Other</a></div>
</div>
<p>This website was built using nothing but lit, and a few custom lines of css to color the background of the grid example.</p>
<h4 id="container">Container</h4>
<p>Containers add margin to the sides of your content and center it. This website has one main container that wraps everything.</p>
<div class="c">
Container Example
</div>
<pre><code>
<div class="c">
Container Example
</div>
</code></pre>
<h4 id="grid">Grid</h4>
<p>Grids are defined on a 12 column scale. Each col will take up equal width if no width number is specified. They automatically collapse on mobile to take up the full viewport. Go ahead, try it!</p>
<div class="example-grid">
<div class="row">
<div class="1 col">1 col</div>
<div class="11 col">11 col</div>
</div>
<div class="row">
<div class="2 col">2 col</div>
<div class="10 col">10 col</div>
</div>
<div class="row">
<div class="3 col">3 col</div>
<div class="9 col">9 col</div>
</div>
<div class="row">
<div class="4 col">4 col</div>
<div class="8 col">8 col</div>
</div>
<div class="row">
<div class="5 col">5 col</div>
<div class="7 col">7 col</div>
</div>
<div class="row">
<div class="6 col">6 col</div>
<div class="6 col">6 col</div>
</div>
</div>
<br>
<pre><code>
<div class="row">
<div class="7 col">Seven</div>
<div class="5 col">Five</div>
</div>
</code></pre>
<h4 id="typography">Typography</h4>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph. The font family is <a href="https://fonts.google.com/specimen/Nunito">Nunito</a>.
<b>Some bold text.</b> <i>Italics also looks nice.</i> You can <u>underline</u> things you feel are important. Lit has styles that override the default heading styles, including margin.</p>
<pre><code>
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<p>This is a paragraph. The font family is <a href="https://fonts.google.com/specimen/Nunito">Nunito</a>.
<b>Some bold text.</b> <i>Italics also looks nice.</i>
You can <u>underline</u> things you feel are important.
Lit has styles that override the default heading styles, including margin.</p>
</code></pre>
<h4 id="navbar">Navbar</h4>
<p>While lit doesn't come with an explicit navbar component, you can use grids to try and make a navbar. Keep in mind that the grid wasn't designed for this, so you may experience weird spacing issues. I reccomend adding some custom css to do spacing.</p>
<div class="row card">
<b class="col">Brand</b>
<div class="col"><a href="#">News</a></div>
<div class="col"><a href="#">About</a></div>
<div class="col"><a href="#">Docs</a></div>
<div class="col"><a href="#">Login</a></div>
</div>
<br>
<pre><code>
<div class="row card">
<b class="col">Brand</b>
<div class="col"><a href="#">News</a></div>
<div class="col"><a href="#">About</a></div>
<div class="col"><a href="#">Docs</a></div>
<div class="col"><a href="#">Login</a></div>
</div></code>
</pre>
<h4 id="codeBlock">Code Block</h4>
<p>Code blocks are code tags wrapped with pre tags. They automatically overflow to become scrollable on smaller displays</p>
<pre><code>
<pre><code>
<h4>Code Block Example</h4>
</code></pre>
</code></pre>
<h4 id="buttons">Buttons</h4>
<p>Lit comes with three types of buttons: normal buttons, primary buttons, and link buttons.</p>
<div>
<a class="btn" href="">Link</a>
<button class="btn">Button</button>
<button class="btn primary">Primary Button</button>
</div>
<pre><code>
<a class="btn" href="">Link</a>
<button class="btn">Button</button>
<button class="btn primary">Primary Button</button>
</code></pre>
<br>
<h4 id="lists">Lists</h4>
<p>Pretty simple and close to normal html.</p>
<ul>
<li>First Item</li>
<li>
Second Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Third Item</li>
</ul>
<pre><code>
<ul>
<li>First Item</li>
<li>
Second Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Third Item</li>
</ul>
</code></pre>
<h4 id="forms">Forms</h4>
<p>Forms are built in various ways. You can either place them normally, or you can use grids to create multiple columns of inputs, and then they will automatically collapse on mobile. You use the card class to style a form, and you can use the w-100 class to make an input take up the full width.</p>
<div class="row">
<div class="6 col">
Email
<input class="card w-100" type="email" placeholder="opensource@mail.com">
</div>
<div class="6 col">
Additional Info
<select class="card w-100">
<option value="Option 1">Question</option>
<option value="Option 2">Compliment</option>
<option value="Option 3">Problem</option>
</select>
</div>
</div>
<div class="row">
Message
<textarea class="card w-100" placeholder="Some information here"></textarea>
<input type="checkbox"> I am not a robot
<hr>
<button class="btn primary">Submit</button>
</div>
<pre><code>
<div class="row">
<div class="6 col">
Email
<input class="card w-100" type="email" placeholder="opensource@mail.com">
</div>
<div class="6 col">
Additional Info
<select class="card w-100">
<option value="Option 1">Question</option>
<option value="Option 2">Compliment</option>
<option value="Option 3">Problem</option>
</select>
</div>
</div>
<div class="row">
Message
<textarea class="card w-100" placeholder="Some information here"></textarea>
<input type="checkbox">
I am not a robot
<hr>
<button class="btn primary">Submit</button>
</div>
</code></pre>
<h4 id="tables">Tables</h4>
<p>Tables work how you would expect. Use the w-100 class to make it more consistent between mobile and desktop.</p>
<table class="w-100">
<thead>
<tr>
<th>Name</th>
<th>Feature Parity (compared to lit)</th>
<th>Size (bytes)</th>
</tr>
</thead>
<tbody>
<tr>
<td>lit</td>
<td>Full</td>
<td>395</td>
</tr>
<tr>
<td>Skeleton</td>
<td>Full</td>
<td>1650</td>
</tr>
<tr>
<td>Milligram</td>
<td>Mostly, missing blockquote and clear buttons</td>
<td>2240</td>
</tr>
<tr>
<td>Min</td>
<td>Mostly, missing messages</td>
<td>955</td>
</tr>
<tr>
<td>Pure</td>
<td>Decent, but Pure has more options per element</td>
<td>3910</td>
</tr>
<tr>
<td>Furtive</td>
<td>Decent, but Furtive has many utility classes and media objects</td>
<td>2470</td>
</tr>
<tr>
<td>Basscss</td>
<td>Decent, but Basscss is atomic based, difficult to compare</td>
<td>2220</td>
</tr>
</tbody>
</table>
<pre><code> <table class="w-100">
<thead>
<tr>
<th>Name</th>
<th>Feature Parity (compared to lit)</th>
<th>Size (bytes)</th>
</tr>
</thead>
<tbody>
<tr>
<td>lit</td>
<td>Full</td>
<td>395</td>
</tr>
<tr>
<td>Skeleton</td>
<td>Full</td>
<td>1650</td>
</tr>
</tbody>
</table></code></pre>
<h4 id="cards">Cards</h4>
<p>Cards can be used to display info in a concise and consistent manner. </p>
<div class="card">
<h4>Simple Card</h4>
<p>Here is some text that generally describes the card, or something about it.</p>
<button class="btn">Okay</button>
<button class="btn primary">Cancel</button>
</div>
<pre><code>
<div class="card">
<h4>Simple Card</h4>
<p>Here is some text that generally describes the card, or something about it.</p>
<button class="btn">Okay</button>
<button class="btn primary">Cancel</button>
</div>
</code></pre>
<p>Cards are usually nested within grids to create powerful display systems, like below.</p>
<div class="row">
<div class="card col">
<img src="https://picsum.photos/400/300/?random" class="w-100">
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum. </p>
<button class="btn">Okay</button>
<button class="btn primary">Cancel</button>
</div>
<div class="card col">
<img src="https://picsum.photos/400/301/?random" class="w-100">
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum. </p>
<button class="btn">Okay</button>
<button class="btn primary">Cancel</button>
</div>
</div>
<p>You can also easily nest images within cards.</p>
<pre><code>
<div class="row">
<div class="card col">
<img src="https://picsum.photos/400/300/?random">
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum. </p>
<button class="btn">Okay</button>
<button class="btn primary">Cancel</button>
</div>
<div class="card col">
<img src="https://picsum.photos/400/301/?random">
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum. </p>
<button class="btn">Okay</button>
<button class="btn primary">Cancel</button>
</div>
</div>
</code></pre>
<h4 id="other">Other</h4>
<h5>Horizontal Rules</h5>
<p>Horizontal Rules are useful for dividing up content. They add a splash of color as well!</p>
<hr>
<pre><code><hr></code></pre>
<h5>Utility</h5>
<p>The only utility class is w-100, which simply sets an element to take up full width. Responsive items that should use this are inputs, images, and tables.</p>
<hr>
<br>
</body>
</html>