-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
648 lines (635 loc) · 41.3 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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>mono/color</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="mono/color: Very small, responsive, dual-themed CSS-only framework">
<meta name="description" content="Small and dual-themed CSS-only framework with focus on readability, responsivity, and modularity. A modern style in 1kb gzipped.">
<meta name="keywords" content="css, framework, microframework, responsive, modular, modern, css-only">
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<meta name="author" content="asvvvad">
<link rel="canonical" href="https://asvvvad.github.io/mono-color/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="mono/color: Very small, responsive, dual-themed CSS-only framework" />
<meta property="og:description" content="Small and dual-themed CSS-only framework with focus on readability, responsivity, and modularity. A modern style in 1kb gzipped." />
<meta property="og:url" content="https://asvvvad.github.io/mono-color/" />
<meta property="og" content="android-chrome-512x512.png">
<meta property="og:site_name" content="cono/color" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@asvvvad">
<meta name="twitter:creator" content="@asvvvad">
<meta name="twitter:description" content="Very small and dual-themed CSS-only framework with focus on readability, responsivity, and modularity. A modern style in 1kb gzipped." />
<meta name="twitter:title" content="mono/color: Very small, responsive, dual-themed CSS-only framework" />
<meta name="twitter:image" content="https://asvvvad.github.io/mono-color/android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="stylesheet" href="light.min.css" media="" id="light-theme">
<link rel="stylesheet" href="dark.min.css" media="none" id="dark-theme">
<link rel="stylesheet" href="mono.min.css">
<link rel="stylesheet" href="color.min.css">
<script>
function toggleTheme() {
var dark = document.getElementById("dark-theme");
var light = document.getElementById("light-theme");
if (light.media == "none") {
light.media = ""
dark.media = "none"
} else {
light.media = "none"
dark.media = ""
}
}
</script>
<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: var(--p);
color: var(--def);
padding: .3em
}
footer {
margin-top: 5rem;
padding: 3rem;
font-size: initial
}
.sticky {
position: -webkit-sticky;
position: sticky!important;
top: 2rem;
left: 100%;
z-index: 999;
display: block
}
.switch>.hidden,
.switch:hover>.shown {
display: none;
cursor: pointer
}
.switch:hover>.hidden {
display: inline
}
</style>
</head>
<body>
<div class="tacenter vh-100 default">
<div class="vc">
<h1 class="mega">mono/color</h1>
<p>Very small, responsive, dual-themed CSS-only framework</p>
<div class="mv inline"><a class="btn pill ph primary" href="#intro"><b>Discover</b></a></div>
<div class="mv inline"><a class="btn pill ph primary" target="_blank" href="https://github.com/asvvvad/mono-color/releases/latest"><b>Download</b></a></div>
<div class="mv inline"><a class=" btn pill ph primary" target="_blank" href="https://github.com/asvvvad/mono-color"><b>Github</b></a></div>
</div>
</div>
<div class="container">
<br>
<button class="tacenter m sticky btn pill primary" onclick="toggleTheme()">Toggle Theme</button>
<div class="content">
<h1 id="intro">mono/color<span class="p04 small">v1.2</span></h1>
<p>mono/color is a very small yet full-featured, simple and beautiful CSS-only framework built with responsivity, readability, modularity, and a dual-theme in mind.</p>
<p>It's perfect for a blog or a documentation site and can be used for anything else as well.<br>It's very responsive and looks neat on any resolution.<br>Based on <a href="https://github.com/any-code/starveling/">Starveling</a> and <a href="https://ajusa.github.io/lit/">lit</a>,
providing only necessary elements while still looking great.</p>
<p>mono/color is also hosted on Github and you can contribute to it or fork it and make your own style as you like!</p>
<a class="github-button" href="https://github.com/asvvvad/mono-color/" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="Star asvvvad/mono-color on GitHub">Star</a>
<a class="github-button" href="https://github.com/asvvvad/mono-color/fork" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="Fork asvvvad/mono-color on GitHub">Fork</a>
<div>
<p>mono/color is split into <em>two</em>:</p>
<div class="row">
<div class="1 col card">
<h2 class="mv">mono<span class="nano">.css</span> <span class="rounded primary p04 small"><span class="switch"><span class="shown">630b</span><span class="hidden"><1.5kb</span></span>
</span>
</h2>
<h4 class="inline">dark<span class="nano">.css</span> <span class="rounded primary p04 nano">83b</span></h4>
<h4 class="inline">light<span class="nano">.css</span> <span class="rounded primary p04 nano">83b</span></h4>
<h5 class="mv">total <span class="rounded primary p04 nano"><span class="switch"><span class="shown">796b</span><span class="hidden">1.6kb</span></span>
</span>
</h5>
<p>Can be used alone, it includes dark & light theme with no colors, only default html elements with a basic button.</p>
</div>
<div class="1 col card bg-success white">
<h2 class="white">color<span class="nano">.css</span>
<span class="rounded bg-white p04 small success">
<span class="switch"><span class="shown">736b</span><span class="hidden">1.9kb</span></span>
</span>
</h2>
<h5 class="mv">total <span class="rounded primary p04 bg-white success nano"><span class="switch"><span class="shown">1.3kb</span><span class="hidden">3.5kb</span></span>
</span>
</h5>
<p class="white">Adds <a href="#grid">grids</a>, <a href="#cards">cards</a>, <a href="#colors">colors</a>, <a href="#utilities">useful utilities</a> and <a href="#badges">badges</a>.</p>
</div>
</div>
<div class="rounded p bg-warning black mv"><span class=""></span>Note! <span class="small">These are gzipped sizes. Hover to see the minified size</span></div>
</div>
<hr>
<h1 id="usage">Usage: </h1>
<p>The following code snippets will use jsDelivr CDN but you can download and host the css files whereever you like. If you <a href="https://github.com/asvvvad/mono-color/releases/latest">download the zip</a> the following templates comes with
it.
</p>
<details>
<summary><b>mono only</b></summary>
<pre><code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my awesome webpage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/[email protected]/light.min.css" media="">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/[email protected]/dark.min.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/[email protected]/mono.min.css">
</head>
<body>
<div class="container">
<div class="content">
<header>
<h1>Header</h1>
<nav>
<a href="#">Home</a>
<a href="#">Docs</a>
<a href="#">About</a>
</nav>
</header>
<p>
This is the content which is in the content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so everything
outside content will touch the screen. It's recommended to center the text that's outside to prevent that.
</p>
<footer><a href="https://github.com/asvvvad/mono-color">mono/color</a> by <a href="https://asvvvad.eu.org">asvvvad</a>/2020</footer>
</div>
</div>
</body>
</html></code></pre>
</details>
<br>
<details>
<summary><b>mono+color</b></summary>
<pre><code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my awesome webpage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- or any of these methods: https://asvvvad.github.io/mono-color/#switching-theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/[email protected]/light.min.css" media="">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/[email protected]/dark.min.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/[email protected]/mono-color.min.css">
</head>
<body>
<div class="container">
<header class="tacenter">
<h1>Header</h1>
<nav>
<a href="#">Home</a>
<a href="#">Docs</a>
<a href="#">About</a>
</nav>
</header>
<hr>
<div class="content">
<p>
This is the content which is in the content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so everything
outside content) will touch the screen. It's recommended to center the text that's outside to prevent that.
</p>
</div>
<footer class="default tacenter p"><a href="https://github.com/asvvvad/mono-color">mono/color</a> by <a href="https://asvvvad.eu.org">asvvvad</a>/2020</footer>
</div>
</body>
</html></code></pre>
</details>
<br>
<details>
<summary id=switching-theme>
<b>Switching Dark/Light theme:</b> The templates above use one method but mono/color allows many others!
</summary>
<p>Light/Dark theming with mono/color is made easy! The themes are made into two separate CSS files so that you can use it the way you like!</p>
<h3>Automatic with fallback to light for unsupported browsers <span class="p04 small pill bg-success"><a class="white" target="_blank" href="https://caniuse.com/#feat=prefers-color-scheme">support</a></span></h3>
<p>It uses the new CSS media <code>prefers-color-scheme</code> which automatically sets the theme based on what the user have in their system.<br></p>
<div class="bg-info white b-primary p rounded small"><span class="large">Tip!</span><br>Switch the <b>dark</b> in <b>(prefers-color-scheme: dark)</b> with <b>light</b> and <b>dark.css</b> with <b>light.css</b> to default the fallback to dark theme</div>
<pre><code><link rel="stylesheet" href="light.min.css" media="">
<link rel="stylesheet" href="dark.min.css" media="(prefers-color-scheme: dark)">
</code></pre>
<h3>Javascript</h3>
<p>Make the media attribute empty for the theme you want to be default</p>
<pre><code><link rel="stylesheet" href="light.min.css" media="">
<link rel="stylesheet" href="dark.min.css" media="none"></code></pre>
<p>Now the javascript should be something like this that is called by clicking a button for example</p>
<pre><code>function toggleTheme() {
var dark = document.getElementById("dark-theme");
var light = document.getElementById("light-theme");
if (light.media == "none") {
light.media = ""
dark.media = "none"
} else {
light.media = "none"
dark.media = ""
}
}</code></pre>
<h3>Server side</h3>
<p>This is very basic, you set a variable <code>theme</code> for example that contains the current theme. And let a user submit a request that can toggle it for example.</p>
<p>For example, this is how it would be done in PHP</p>
<pre><code><?php
$theme = "dark";
echo "<link rel='stylesheet' href='".$theme.".css'>"; </code></pre>
<p>Note this is just to give you the idea, use a templating system like Plates to render your html as it will make it easier.</p>
<h4 id="one-theme">Only one theme</h4>
<p>You can always use a one theme by just linking its file only. You can also have multiple themes on different pages. Whatever you like :3</p>
</details>
<br>
<h1 id="components">Components:</h1>
<div>
<h1 id="mono">mono</h1>
<hr>
<h2 id="container">Container</h2>
<p>Containers add margin to the sides of your content and center it. This website has one main container and content wrapper that wraps everything.</p>
<pre><code><div class="container">
<div class="content">
<header>
<h1>Header</h1>
<nav class="">
<a href="#">Home</a>
<a href="#">Docs</a>
<a href="#">About</a>
</nav>
</header>
<hr>
<p>
This is the content which is in the content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so everything outside content) will touch the screen. It's recommended to center the text that's outside to prevent that.
</p>
<hr>
</div>
</div></code></pre>
<h2 id="typography">Typography</h2>
<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 monospace and for the headings 1 to 3 it's Sans-Serif</a>.
<b>Some bold text.</b> <i>Italics also looks nice.</i> You can <u>underline</u> things you feel are important. has styles that override the default heading styles, including margin.</p>
<pre><code><h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h2>Heading</h2>
<h5>Heading</h5>
<h6>Heading</h6>
<p>This is a paragraph. The font family is Courier New/monospace.
<b>Some bold text.</b> <i>Italics also looks nice.</i>
You can <u>underline</u> things you feel are important.
mono has styles that override the default heading styles, including margin.</p></code></pre>
<h2 id="codeBlock">Code Block</h2>
<p><code>inline code;</code> <samp>inline samp;</samp> and kbd: <kbd>ctrl</kbd> <kbd>c</kbd></p>
<p>Code blocks are code tags wrapped with pre tags. They automatically overflow to become scrollable on smaller displays</p>
<pre><code><pre><code>
<h2>Code Block Example</h2>
</code></pre></code></pre>
<p>Samp blocks are similar but intended for output moslty so mono/color sets the line-height tighter to show it better (for example, ASCII art)</p>
<pre><samp> /\ (hi i'm v dude)
__ ____ __/\/\__ __ ___
/ \/ __ \ \ _ _ / / \ | \
/ /\ \__ \ \/\' '/\/ /\ \| |
/_/ \____/\__/\__/\__/ \_____/</samp></pre>
<h2>Blockquote</h2>
<blockquote>You're <em>not</em> a fucking moron if you use default browser styles you can do what ever the fuck you want who cares
<br><cite>— Eleanor Roosevelt</cite>
<blockquote>This is a nested quote
<br><cite>— Me</cite>
<blockquote>Yes, I totally took that from <a href="http://bettermotherfuckingwebsite.com/">this site</a>. I always used it as a reference.
<br><cite>— Also me</cite></blockquote>
</blockquote>
</blockquote>
<br>
<h2 id="lists">Lists</h2>
<p>Lists are default HTML lists. I tried a few things but figured the defaults are all that's needed (imo).
</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>
<h2 id="tables">Tables</h2>
<p>Tables looks nice too:</p>
<table>
<thead>
<th>Name</th>
<th>Username</th>
<th>email</th>
<th>secondary email</th>
</thead>
<tbody>
<tr>
<td>Lorem Ipsum</td>
<td>lorem</td>
<td>[email protected]</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lorem Ipsum</td>
<td>lorem</td>
<td>[email protected]</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<h2 id="forms">Forms</h2>
<p>Just like the code blocks the form is also scrollable when the elements take too much horizontal space
<br>There is also an option to use grids and the card class if you prefer. <br><a href="#color">color</a> have <code>w-100</code> and <code>w-50</code> classes to set the inputs to full and half width respectively.
<br>To get the connected inputs look use the <code>inline</code> class on the inputs just as in <a href="#inline-input">here</a>.</p>
<p>This is a regular HTML form:</p>
<form class="tacenter">
<label>Email<br>
<input type="email" placeholder="email"><br>
<input type="password" placeholder="password"><br>
<label>Additional Info<br>
<select>
<option value="Option 1">Question</option>
<option value="Option 2">Compliment</option>
<option value="Option 3">Problem</option>
</select>
</label><br>
</label><br>
<textarea placeholder="Some information here" class="w-100"></textarea><br>
<input type="submit" value="Submit">
</form>
<p>See more in <a href="#forms-color">color</a></p>
<h2 id="buttons">Buttons</h2>
<p>Buttons are created with either a button or an anchor, they both must have the <code>btn</code> class.</p>
<div>
<a class="btn" href="#">Link button</a>
<button class="btn">Regular Button</button>
<p>Primary buttons are made with the <code>primary</code> class</p>
<button class="btn primary">Primary Button</button>
</div>
<h2>Horizontal Rules</h2>
<p>Horizontal Rules are useful for dividing up content. Their color is the same as same default border color which change with theme. <a href="#hr-colors">More in color.</a></p>
<hr>
<h2>Extra</h2>
<p>Since mono support light and dark themes it also provide these two helper classes:</p>
<p><code>primary</code> class can be used on anything from buttons, inputs, divs, code ect. It's meant to be a <em>reverse</em> color.</p>
<div class="btn primary">primary</div>
<p><code>default</code> class can be used on anything from buttons, inputs, divs, code ect. It's meant to be the <em>default</em> color.</p>
<div class="btn default">default</div>
<p>Blockquotes with background can be made by adding <code>primary</code> or <code>default</code> or other
<a href="#colors">background colors</a> in <a href="#color">color</a> - It can also be used to make <a href="#alerts-using-blockquote">alerts</a></p>
<blockquote class="default">This is a blockquote with default background</blockquote><br>
<blockquote class="primary">This is a blockquote with primary background</blockquote>
<h1 id="color">color</h1>
<hr>
<h2 id="grid">Grid</h2>
<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>
<h2 id="utilities">Utilities</h2>
<h3>Size classes:</h3>
<span class="mega">mega</span>
<span class="large">large</span>
<span class="normal">normal</span>
<span class="small">small</span>
<span class="nano">nano</span>
<h3>Spacing and alignment:</h3>
<div class="tacenter">tacenter</div>
<div class="taleft">taleft</div>
<div class="taright">taright</div>
<p>The above classes set the alignment of text within an element</p>
<div class="bg-info white p mv"><span class="m0">.m0</span></div>
<code>m0</code> Removes margins on all sides
<div class="bg-info white p mv"><span class="m">.m</span></div>
<code>m</code> Adds 1rem(10px) margin on all sides
<div class="bg-info white ph mv"><span class="mh">.mh</span><span class="mh">.mh</span></div>
<code>mh</code> Adds 1rem margin on the left and right sides<br>
<div class="bg-info white pv mv"><span class="mv">.mv</span></div>
<code>mv</code> Adds 1rem margin on the top and bottom sides<br>
<div class="bg-info white p mv">.p</div>
<code>p</code> Adds 1rem padding on all sides
<div class="bg-info white p04 mv">.p04</div>
<code>p04</code> Adds .04rem padding on all sides<br>
<div class="bg-info white ph mv">.ph</div>
<code>p</code> Adds 1rem padding on the left and right sides<br>
<div class="bg-info white ph04 mv">.ph04</div>
<code>p04</code> Adds .04rem padding on the left and right sides<br>
<div class="bg-info white pv mv">.pv</div>
<code>p</code> Adds 1rem padding on the top and bottom sides<br>
<div class="bg-info white pv04 mv">.pv04</div>
<code>p04</code> Adds .04rem padding on the top and bottom sides<br>
<input id="inline-input" class="bg-info white inline w-50 mv" placeholder="inline text input"><input class="bg-info white inline w-50" placeholder="inline text input"><br>
<code>inline</code> makes elements inline (stick to each other) by removing margins on both side
<div class="bg-info white w-100 p mv">w-100</div>
<div class="bg-info white w-50 p inline mv">w-50</div>
<div class="bg-info white w-50 p inline">w-50</div><br>
<code>w-100</code> and <code>w-50</code> sets the width to 100% and 50% respecitively
<div class="vh-100 mv p primary"><code>vh-100</code> takes the full width of it's container and the full height of it's screen. To use for full-page landing place it outside any
<code>container</code> div.
<div class="vc"><code>vc</code> class centers a div vertically in the full-page div</div>
</div>
<div id="colors">
<h3>Colors</h3>
<h2>Text Colors</h2>
<span class="ph accent">accent</span>
<span class="ph info">info</span>
<span class="ph success">success</span>
<span class="ph warning">warning</span>
<span class="ph error">error</span>
<span class="ph black bg-white">black</span>
<span class="ph white bg-black">white</span>
<span class="ph gray">gray</span>
<h2 id="background-colors">Background Colors</h2>
<div class="btn white bg-accent">bg-accent</div>
<div class="btn white bg-info">bg-info</div>
<div class="btn white bg-success">bg-success</div>
<div class="btn white bg-warning">bg-warning</div>
<div class="btn white bg-error">bg-error</div>
<div class="btn white bg-black">bg-black</div>
<div class="btn black bg-white">bg-white</div>
<div class="btn black bg-gray">bg-gray</div>
<h2>Border Colors</h2>
<p>Since mono/color is borderless by default a add a border use <code>border</code> and a b-color like in these:</p>
<div class="btn border b-accent">border b-accent</div>
<div class="btn border b-info">border b-info</div>
<div class="btn border b-success">border b-success</div>
<div class="btn border b-warning">border b-warning</div>
<div class="btn border b-error">border b-error</div>
<div class="btn border b-black">border b-black</div>
<div class="btn border b-white">border b-white</div>
<div class="btn border b-gray">border b-gray</div>
<div class="btn border b-primary">border b-primary</div>
<div class="btn border b-default">border b-default</div>
<h5 id="hr-colors">Horizontal Rules</h5>
<p>border colors can be used for horizontal rules as well</p>
<hr class="b-accent">
<hr class="b-info">
<hr class="b-success">
<hr class="b-warning">
<hr class="b-error">
<hr class="b-black">
<hr class="b-white">
<hr class="b-gray">
<hr class="b-primary">
<hr class="b-default">
<h2>Colorful Buttons</h2>
<p>These are made using the background colors and color classes <a href="#colors">above</a>. The ghost ones for example uses <code>accent</code> instead of <code>bg-accent</code>.</p>
<button class="btn">Default Button</button>
<button class="btn primary">Primary Button</button>
<button class="btn bg-accent white">Accent Button</button>
<button class="btn bg-info white">Info Button</button>
<button class="btn bg-success white">Success Button</button>
<button class="btn bg-warning black">Warning Button</button>
<button class="btn bg-error white">Error Button</button>
<h2>Rounded Buttons</h2>
<pre><code><button class="rounded btn primary">Primary Button</button></code></pre>
<button class="rounded btn">Default Button</button>
<button class="rounded btn primary">Primary Button</button>
<pre><code><button class="rounded btn bg-accent white">Accent Button</button></code></pre>
<button class="rounded btn bg-accent white">Accent Button</button>
<button class="rounded btn bg-info white">Info Button</button>
<button class="rounded btn bg-success white">Success Button</button>
<button class="rounded btn bg-warning black">Warning Button</button>
<button class="rounded btn bg-error white">Error Button</button>
<h2>Pill Buttons</h2>
<pre><code><button class="pill btn">Default Button</button></code></pre>
<button class="pill btn">Default Button</button>
<button class="pill btn primary">Primary Button</button>
<pre><code><button class="pill btn bg-accent white">Accent Button</button></code></pre>
<button class="pill btn bg-accent white">Accent Button</button>
<button class="pill btn bg-info white">Info Button</button>
<button class="pill btn bg-success white">Success Button</button>
<button class="pill btn bg-warning black">Warning Button</button>
<button class="pill btn bg-error white">Error Button</button>
<br><br>
<details>
<summary><b>Ghost & Primary Ghost Buttons</b> <span class="bg-error white nano p04 pill">Not recommended</span>
</summary>
<div class="p bg-warning small black">
<p>These are other possible combinations, they're not bloat. They use default background color of the theme so it may have a <b><em>low constrast</em></b> and it <em>changes</em> with the theme. They're meant to be <em><b>showcase only</b></em> maybe you'll like them or you'll have some use. If you want something <em><b>readable</b></em> use ones with a background color and the default & primary ones <em><b>without</b></em> custom text color. Use the toggle theme
button to see.
</p>
</div>
<button class="btn accent">Accent Ghost Button</button>
<button class="btn info">Info Ghost Button</button>
<button class="btn success">Success Ghost Button</button>
<button class="btn warning">Warning Ghost Button</button>
<button class="btn error">Error Ghost Button</button><br>
<button class="btn primary accent">Accent Primary Ghost Button</button>
<button class="btn primary info">Info Primary Ghost Button</button>
<button class="btn primary success">Success Primary Ghost Button</button>
<button class="btn primary warning">Warning Primary Ghos Button</button>
<button class="btn primary error">Error Primary Button</button>
</details>
<h2 id="forms-color">More Forms</h2>
<p>mono/color is built to be moduar so you can extend inputs just as easy as you extend buttons or anything else. Same classes are used to create round and colored form elements.</p>
<form class="tacenter">
<input type="text" class="rounded" placeholder="rounded input"><br>
<input type="text" class="pill" placeholder="pill input"><br>
<input type="text" class="primary" placeholder="primary input"><br>
<input type="text" class="border b-success" placeholder="border b-success input"><br>
<input type="text" class="border b-error" placeholder="border b-error input"><br>
<textarea class="rounded bg-success white" placeholder="rounded bg-success white textarea"></textarea><br>
<label>primary pill submit button<br><input type="submit" class="primary pill" value="Submit"></label>
</form>
<h2 id="cards">Cards</h2>
<p>Cards can be used to display info in a concise and consistent manner. </p>
<div class="card bg-gray">
<h2 class="black">Simple Card</h2>
<p class="black">Here is some text that generally describes the card, or something about it.</p>
<button class="btn bg-black white">Okay</button>
<button class="btn bg-white black">Cancel</button>
</div>
<p>Cards are usually nested within grids to create powerful display systems, like below.</p>
<div class="row">
<div class="card col bg-info white">
<h2 class="white">Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<button class="btn primary">Okay</button><button class="btn ">Cancel</button>
</div>
<div class="card col bg-warning black">
<h2 class="black">Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<button class="btn primary">Okay</button><button class="btn secondary">Cancel</button>
</div>
<div class="card col bg-success white">
<h2 class="white">Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<button class="btn primary">Okay</button><button class="btn secondary">Cancel</button>
</div>
</div>
<div id="alerts">
<h3>Alerts</h3>
<p>These are easily created using a div that have a <a href="#colors">text & background color</a> class,
<code>small</code> class to set the text size right (default is bigger and meant for increasing readability on content) and an extra <code>rounded</code> class to make it look nice:</p>
<div class="bg-error white p rounded small">
<span class="large">Oh no!</span><br>This is an example of an error alert
</div><br>
<div class="bg-success white p rounded small">
<span class="large">Success!</span><br>This is an example of a success alert
</div>
<pre><code><div class="bg-error white p rounded small">
<span class="large">Oh no!</span><br>This is an example of an error alert
</div></code></pre>
<div class="bg-warning primary p rounded black">
Warning! <span class="small"> is an example of a warning alert</span>
</div>
<pre><code><div class="bg-warning primary p rounded black"">
Warning! <span class="small">is an example of a warning alert</span>
</div></code></pre>
<h3 id="alerts-using-blockquote">Using blockquote</h3>
<p>As mentioned above in mono, blockquotes can be used along with other <a href="#background-colors">background colors</a>.</p>
<blockquote class="bg-info b-primary white small"><span class="large">Tip!</span><br>This is an example of an info alert</blockquote>
<pre><code><blockquote class="bg-info b-primary white"><span class="large">Tip!</span><br>This is an example of an info alert</blockquote></code></pre>
<blockquote class="bg-warning b-primary black small"><span class="large">Note!</span><br>Inline code or samps may not look nice inside of these alerts because of the reduced font-size (by using the <code>small</code> class) but that can be fixed by adding the <code class="normal">normal</code> class to the inline code.</blockquote>
</div>
<div id="badges">
<h3>Badges</h3>
<p>Another small and helpful elements are <em>badges</em>.<br>As with <a href="#alerts">alerts</a>, they are made by combining a couple classes:</p>
<div class="bg-warning rounded black p small"><span class="large">Note!</span><br> pill class is used for these, the rounded class while it can also do it, it's meant for alerts as only pill have <code class="normal">white-space: nowrap;</code> which makes it not break.</div>
<h2>Heading Badge <span class="bg-warning black p04 pill small"> New!</span></h2>
<pre><code><h4>Heading Badge <span class="bg-warning white p04 rounded nano"> New!</span></h4></code></pre>
<button class="pill btn bg-info white">Button Badge <span
class="bg-white info p04 pill"><b>500</b></span></button>
<pre><code><button class="pill btn bg-info white">Button Badge <span class="bg-white info p04 rounded nano"><b>500</b></span></button></code></pre>
</div>
</div><br>
</div>
<div class="small rounded bg-info white p">I try to make this page as reader oriented as I can but I'm not perfect I miss things a lot so if you have any suggestions or fixes I'll be happy if you open an issue on <a href="https://github.com/asvvvad/mono-color/issues">Github</a> ^^</div>
</div>
<footer class="default tacenter"><a href="https://github.com/asvvvad/mono-color">mono/color</a> by <a href="https://asvvvad.eu.org">asvvvad</a>/2020</footer>
</div>
</body>
</html>