-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
2133 lines (1737 loc) · 93.9 KB
/
index.php
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
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?php
function generateRandomPlaceholderUrl($text = '', $def_width = false)
{
// Define minimum and maximum dimensions (multiples of 10)
$minDim = 300;
$maxDim = 1000;
if ($def_width == false) {
do { // Generate random dimensions rounded to nearest multiple of 10
$width = rand($minDim, $maxDim) - rand(0, 9); // Subtract a random value between 0-9 for rounding
$width = round($width / 10) * 10;
} while ($width < 400);
} else {
$width = 480;
}
// do {
// $height = rand($minDim, $maxDim) - rand(0, 9);
// $height = round($height / 10) * 10;
// } while(($width/$height) > 1.5 || ($width/$height) < 0.75);
$height = $width;
// Generate a random background color (hex format) but a bit darker
$characters = 'ABCDEF'; // Exclude 0,1 for darker colors
$color = '';
for ($i = 0; $i < 6; $i++) {
$color .= $characters[rand(0, strlen($characters) - 1)];
}
if ($text == '') {
$text = "{$width} × {$height}";
}
// Build the URL with random values
$url = "https://placehold.co/{$width}x{$height}/{$color}/000/?text={$text}";
return $url;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeatU — Hello Nitish</title>
<link rel="stylesheet" href="css/neatu.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
font-family: "Ubuntu";
font-size: 1.2rem;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
div.result {
margin: 1rem 0 2rem 0;
padding: 1rem;
}
div.result ul {
margin: 0;
}
pre+p {
margin-top: 2rem;
}
div.n-flex {
padding: 0.2rem;
margin: 1rem 0;
}
div.n-flex.no-border {
border: none;
}
div.form-group div.n-flex {
border: none;
padding: 0;
margin: 0;
}
div.n-flex.grid-example {
border: 1px solid #666;
}
div.n-flex.grid-example>div {
background: #ccc;
min-height: 70px;
background-clip: content-box;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid white;
font-size: 1.7rem;
margin: 0;
}
/* div.n-flex.gapped > div:first-child {
padding-left: 0;
} */
div.n-flex.no-border>div {
background: white;
}
div.n-flex>figure {
margin: 1rem;
}
div.n-flex.grid-example>div.n-flex.grid-example {
margin: 0;
background: white;
border: 1px solid black;
}
.n-btn {
margin: 0.2rem;
}
.vrt-group {
max-width: 420px;
}
.vrt-group>.n-btn {
margin: 0rem;
}
.vrt-group li h3,
.vrt-group li p {
margin: 0;
}
.color-table,
.color-table td,
.color-table th {
border: 4px solid white;
}
.color-table {
margin: 0;
}
</style>
</head>
<body class="wrapper">
<h1>NeatU CSS Framework</h1>
<p>A lightweight mobile-first CSS framework for you to quickly create responsive websites that look great everywhere.</p>
<p>NeatU aims to make it possible for you to create awesome websites with as little HTML bloat as possible.</p>
<h2>Breakpoints</h2>
<p>NeatU uses the same breakpoints as Bootstrap. I use the following code in the <b>layout.scss</b> file to manage the breakpoints.</p>
<pre><code class="lang-css">$viewport-widths: (
'xs': 440px,
's': 576px,
'm': 768px,
'l': 992px,
'xl': 1200px,
'xxl': 1400px
);</code></pre>
<p>You can update these values to anything else that better fits your requirements.</p>
<h2>Layout Instructions</h2>
<p>Add the class <code>n-flex</code> to use CSS flexbox for laying out elements in a container.</p>
<h3>Equal Width Child Elements (Basic)</h3>
<p>There are five classes you can use to ensure child elements take up the available space equally at specific viewport widths.</p>
<p>Add any of the following classes to the <code>n-flex</code> element to make sure all elements have equal width over specific viewport widths.</p>
<table class="n-full-padding-sw">
<tr>
<th>Class</th>
<th>Equal Width <br> (When Viewport Width)</th>
<th>Full Width <br> (When Viewport Width)</th>
</tr>
<tr>
<td>n-flex-eq-sw</td>
<td> >= 576px</td>
<td>
< 576px</td>
</tr>
<tr>
<td>n-flex-eq-mw</td>
<td> >= 768px</td>
<td>
< 768px</td>
</tr>
<tr>
<td>n-flex-eq-lw</td>
<td> >= 992px</td>
<td>
< 992px</td>
</tr>
<tr>
<td>n-flex-eq-xlw</td>
<td> >= 1200px</td>
<td>
< 1200px</td>
</tr>
<tr>
<td>n-flex-eq-xxlw</td>
<td> >= 1400px</td>
<td>
< 1400px</td>
</tr>
</table>
<h4>Examples</h4>
<p>In the following example, all three <code>.n-wrapper</code> elements will have equal width as long as the viewport with is above or equal to 576px. On narrower widths, the <code>.n-wrapper</code> elements will take up full width of the parent.</p>
<pre><code class="lang-html"><div class="n-flex n-flex-eq-sw grid-example">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
</div></code></pre>
<div class="n-flex grid-example n-flex-eq-sw">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
</div>
<p>Similarly, using the <code>.n-flex-eq-mw</code> class for the parent of all <code>.n-wrapper</code> elements will ensure they have equal width as long as the viewport width is above or equal to 768px.</p>
<pre><code class="lang-html"><div class="n-flex n-flex-eq-mw grid-example">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
<div class="n-wrapper">4</div>
</div></code></pre>
<div class="n-flex grid-example n-flex-eq-mw">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
<div class="n-wrapper">4</div>
</div>
<h4>Conclusion</h4>
<p>As you can see, these classes work well when you want each child element to have the same width. However, they have two limitations.</p>
<ol>
<li>
<p>The number of elements in a row stays constant across multiple viewport widths.</p>
</li>
<li>
<p>All child elements occupy a single row.</p>
</li>
</ol>
<p>You can use classes from the next section to overcome these limitations.</p>
<h3>Equal Width Child Elements (Advanced)</h3>
<p>Let's say you want to ensure there is one element in a row when viewport width <code>(or vw) >= 576px</code> and <code>vw < 768px</code>, two elements when <code>vw >= 768px</code> and <code>vw < 992px</code>, three elements when <code>vw >= 992px</code> and <code>vw < 1200px</code>, four elements when <code>vw >= 1200px</code>.</p>
<p>The easiest way to do so in NeatU is with the <code>n-flex-aw-1234</code> class.</p>
<pre><code class="lang-html"><div class="n-flex n-flex-aw-1234 grid-example">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
<div class="n-wrapper">4</div>
<div class="n-wrapper">5</div>
<div class="n-wrapper">6</div>
</div></code></pre>
<div class="n-flex grid-example n-flex-aw-1234">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
<div class="n-wrapper">4</div>
<div class="n-wrapper">5</div>
<div class="n-wrapper">6</div>
</div>
<p>Use the class <code>n-flex-aw-1234a</code> to ensure that leftover elements fill up the remaining space.</p>
<pre><code class="lang-html"><div class="n-flex n-flex-aw-1234a grid-example">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
<div class="n-wrapper">4</div>
<div class="n-wrapper">5</div>
<div class="n-wrapper">6</div>
</div></code></pre>
<div class="n-flex grid-example n-flex-aw-1234a">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
<div class="n-wrapper">4</div>
<div class="n-wrapper">5</div>
<div class="n-wrapper">6</div>
</div>
<h4>Examples</h4>
<p>I will now show you examples of all such classes available in NeatU.</p>
<p>.n-flex-aw-12, .n-flex-aw-112, .n-flex-aw-2, .n-flex-aw-1223, .n-flex-aw-1234, .n-flex-22334</p>
<div class="n-flex grid-example n-flex-aw-1234">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
<div class="n-wrapper">4</div>
<div class="n-wrapper">5</div>
<div class="n-wrapper">6</div>
</div>
<h3>Custom Width Child Elements</h3>
<p>It is not always ideal to divide the available parent width equally among children. NeatU provides plenty of classes to let you specify element width at various viewport widths.</p>
<h4>Specify Width as Percentage</h4>
<p>Classes like <code>n-mw-5</code>, <code>n-mw-10</code>, ...., <code>n-mw-100</code> allow you to set the element width at 5%, 10%, ..., 100% when the viewport width is over 768px.</p>
<p>You can use viewport specific classes to set the width for a particular element. For instance, the classes <code>n-sw-30</code>, <code>n-mw-40</code>, <code>n-lw-55</code>, <code>n-xlw-40</code>, <code>n-xxlw-30</code> will set the element width to 30%, 40%, 55%, 40%, and 30% on viewport widths above 576px, 768px, 992px, 1200px, and 1400px in the default configuration.</p>
<pre><code class="lang-html"><div class="n-flex grid-example">
<div class="n-wrapper n-sw-30 n-mw-40 n-lw-55 n-xlw-40 n-xxlw-30">1</div>
<div class="n-wrapper n-sw-30 n-mw-20 n-lw-15 n-xlw-40 n-xxlw-30">2</div>
<div class="n-wrapper n-sw-40 n-mw-40 n-lw-30 n-xlw-20 n-xxlw-40">3</div>
</div></code></pre>
<div class="n-flex grid-example">
<div class="n-wrapper n-sw-30 n-mw-40 n-lw-55 n-xlw-40 n-xxlw-30">1</div>
<div class="n-wrapper n-sw-30 n-mw-20 n-lw-15 n-xlw-40 n-xxlw-30">2</div>
<div class="n-wrapper n-sw-40 n-mw-40 n-lw-30 n-xlw-20 n-xxlw-40">3</div>
</div>
<h4>Specify Width Using Fractions</h4>
<p>You can set an elements width to 1/4, 2/5, or 1/2 of the parent by using the classes <code>n-*-25</code>, <code>n-*-40</code>, or <code>n-*-50</code> where the <code>*</code> could be <code>sw</code>, <code>mw</code>, <code>lw</code>, <code>xlw</code>, or <code>xxlw</code> depending on the viewport width you want to target.</p>
<p>However, you cannot target other common fractions like 1/3, 2/3, or 1/6 this way.</p>
<p>NeatU offers three classes <code>n-*-1-3</code>, <code>n-*-2-3</code>, and <code>n-*-1-6</code> to specify the size of different elements as fractions. Again, you can replace * with the viewport you are targeting like <code>sw</code>, <code>mw</code>, <code>lw</code>, <code>xlw</code>, or <code>xxlw</code>.</p>
<h4>Example</h4>
<p>Let's understand how all these classes can work together with an example.</p>
<pre><code class="lang-html"><div class="n-flex grid-example">
<div class="n-mw-1-3">Left</div>
<div class="n-mw-2-3">Right</div>
<div class="n-lw-2-3 n-mw-50 n-flex grid-example n-flex-eq-mw">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
</div>
<div class="n-lw-1-3 n-mw-50">Ad</div>
</div></code></pre>
<p>The left and right elements take up 1/3 and 2/3 of the parent's width respectively as long as viewport is at least 768px wide. Below 768px, they take up the parent's entire width.</p>
<p>The nested grid and the Ad element take up 2/3 and 1/3 of the parent's width when viewport is at least 992px.</p>
<p>Inside the nested grid, the child elements will divide the width equally as long as the viewport width is at least 992px. Below this threshold, each element will take up the parent's entire width.</p>
<div class="n-flex grid-example">
<div class="n-mw-1-3">Left</div>
<div class="n-mw-2-3">Right</div>
<div class="n-lw-2-3 n-mw-50 n-flex grid-example n-flex-eq-lw">
<div class="n-wrapper">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
</div>
<div class="n-lw-1-3 n-mw-50">Ad</div>
</div>
<h3>Forcefully Apply Custom Width</h3>
<p>In some cases, you would probably want to place a custom width element in the same row as equal width elements.</p>
<p>You could add a class like <code>n-mw-50</code> to set custom width on one child element but that won't work because of specificity.</p>
<p>One solution here is to add the <code>n-flex-fw</code> class to the parent element which also has the <code>n-flex</code> class. After that, add the class <code>n-fw</code> on all elements where you want to force a specific width.</p>
<p>Here is an example.</p>
<pre><code class="lang-html"><div class="n-flex n-flex-fw n-flex-eq-mw grid-example">
<div class="n-wrapper n-mw-50 n-lw-25 n-fw">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
<div class="n-wrapper">4</div>
<div class="n-wrapper">5</div>
<div class="n-wrapper">6</div>
</div></code></pre>
<p>We our forcing our Element '1' above to take up 25% of the parent's width on large screens and 50% on medium screens.</p>
<div class="n-flex n-flex-fw n-flex-eq-mw grid-example">
<div class="n-wrapper n-mw-50 n-lw-25 n-fw">1</div>
<div class="n-wrapper">2</div>
<div class="n-wrapper">3</div>
<div class="n-wrapper">4</div>
<div class="n-wrapper">5</div>
<div class="n-wrapper">6</div>
</div>
<h2 id="colors">Colors</h2>
<p>I have defined CSS variables for the following colors in NeatU. Each of these colors has an associated helper class that either sets the text color or background color.</p>
<p>I also use the <code>color-mix()</code> function in CSS to create a darker or lighter version of the original colors by mixing black and white to it respectively.</p>
<p>This keeps the size of stylesheet small while still allowing us to make subtle changes to text or background color on hover.</p>
<div class="n-flex n-flex-eq-lw no-border">
<div class="wrapper">
<table class="color-table n-full-padding-sw n-hover-row">
<tr>
<th>Variable Name</th>
<th>Color Value</th>
<th>How it Looks</th>
</tr>
<tr>
<td>--n-success-color</td>
<td>#4CAF50</td>
<td class="bg-success"></td>
</tr>
<tr>
<td>--n-failure-color</td>
<td>#E53935</td>
<td class="bg-failure"></td>
</tr>
<tr>
<td>--n-warning-color</td>
<td>#F57C00</td>
<td class="bg-warning"></td>
</tr>
<tr>
<td>--n-neutral-color</td>
<td>#2196F3</td>
<td class="bg-neutral"></td>
</tr>
</table>
</div>
<div class="wrapper">
<table class="color-table n-full-padding-sw n-hover-row">
<tr>
<th>Variable Name</th>
<th>Color Value</th>
<th>How it Looks</th>
</tr>
<tr>
<td>--n-text-color</td>
<td>#222222</td>
<td class="bg-text"></td>
</tr>
<tr>
<td>--n-border-color</td>
<td>#AAAAAA</td>
<td class="bg-border"></td>
</tr>
<tr>
<td>--n-brand-primary</td>
<td>#00796B</td>
<td class="bg-brand-primary"></td>
</tr>
<tr>
<td>--n-brand-secondary</td>
<td>#0c3671</td>
<td class="bg-brand-secondary"></td>
</tr>
</table>
</div>
</div>
<p>You can always add more colors to this list by updating the <code>$colors</code> variables in the <b>neatu.scss</b> file.</p>
<pre><code class="lang-css">$colors: (
'green': #4CAF50,
'red': #E53935,
'orange': #F57C00,
'azure': #2196F3,
'text': #222222,
'border': #AAAAAA,
'brand-primary': #00796B,
'brand-secondary': #0c3671
);</code></pre>
<h3>Set Text Color</h3>
<p>You can add the prefix <code>tc-</code> (<b>T</b>ext <b>C</b>olor) before all these color names to set text color. For example, using the classes <code>tc-neutral</code>, <code>tc-failure</code>, or <code>tc-success</code> on different elements will set their color to <span class="tc-neutral">azure</span>, <span class="tc-failure">red</span>, and <span class="tc-success">green</span>.</p>
<p>Apply these classes to any element which has text whose color you want to change.</p>
<pre><code class="lang-html"><h2 class="tc-neutral no-mar">An Azure Colored Heading.</h2>
<a href="#link" class="tc-success">A mint green link.</a>
<p class="tc-ember-failure">For instance, here is a paragraph with ember red text. Multiple <code>span</code> elements within it have <span class="tc-neutral">azure color</span>, <span class="tc-mint-success">mint green color</span>, and <span class="tc-ruby">ruby color</span>.</p></code></pre>
<div class="result n-round n-bshadow">
<h2 class="tc-brand-primary no-mar">Heading with Primary Brand Color.</h2>
<a href="#link" class="tc-brand-secondary">Link with Secondary Brand Color.</a>
<p class="tc-failure">For instance, here is a paragraph with red text. Multiple <code>span</code> elements within it have <span class="tc-neutral">azure color</span>, <span class="tc-success">green color</span>, and <span class="tc-warning">orange color</span>.</p>
</div>
<h3>Change Text Color on Hover</h3>
<p>Use the prefix <code>tch-</code> (<b>T</b>ext <b>C</b>olor <b>H</b>over) with different color names to change the text color on hover. Hovering over the element will change the text color to 85% original and 15% black.</p>
<p>For instance, you can use the class <code>tch-neutral</code> to <span class="tch-neutral">set the text color to Azure</span> or <code class="bg-neutral tc-white s-pad-x2">#2196F3</code>. When you hover over the azure text, the color will change to <span class="tc-white s-pad-x2" style="background: #1C7FCE;">#1C7FCE</span>.</p>
<p>Use the prefix <code>tclh-</code> (<b>T</b>ext <b>C</b>olor <b>L</b>ight <b>H</b>over) to start with a lighter shade of the original color that has 50% white mixed in it. When someone hover over the text, the color will only have 30% white in it.</p>
<p>The following examples illustrates how each prefix works for a heading.</p>
<pre><code class="lang-html"><h1 class="tch tclh-success no-mar">Prepare for Trouble, Make it Double</h1>
<h1 class="tch tch-failure no-mar">My Adulting Skills: Questionable at Best</h1>
</code></pre>
<div class="result n-round n-bshadow">
<h1 class="tch tclh-success no-mar">Prepare for Trouble, Make it Double</h1>
<h1 class="tch tch-failure no-mar">My Adulting Skills: Questionable at Best</h1>
</div>
<h3>Apply Background Color</h3>
<p>Use the prefix <code>bg-</code> (<b>B</b>ack<b>G</b>round) with a color name to apply a background color to different elements.</p>
<p>If you feel that black colored text isn't properly visible on some backgrounds, you can always add the class <code>tc-white</code> to turn the text white.</p>
<p>You might also consider using the prefix <code>bgl-</code> (<b>B</b>ack<b>G</b>round <b>L</b>ight) with a color name to use a light shade of the color that has 50% white as background.</p>
<pre><code class="lang-html"><h1 class="bgl-success no-mar s-lr-pad-x4 s-tb-mar-x2">Heading With Light Green Background.</h1>
<h1 class="tc-white bg-success s-lr-pad-x4 no-mar">Heading With Azure Background.</h1>
<p>A paragraph containing multiple span elements with <span class="bgl-warning s-pad-x2">orange</span>, <span class="bg-neutral s-pad-x2">azure</span>, <span class="bgl-failure s-pad-x2">red</span> background and black text.</p>
<p>A paragraph containing multiple span elements with <span class="bg-warning tc-white s-pad-x2">orange</span>, <span class="bg-eggplant tc-white s-pad-x2">eggplant</span>, <span class="bg-ruby tc-white s-pad-x2">ruby</span> background and white text.</p>
</code></pre>
<div class="result n-round n-bshadow">
<h1 class="bgl-success no-mar s-lr-pad-x4 s-tb-mar-x2">Heading With Light Green Background.</h1>
<h1 class="tc-white bg-neutral s-lr-pad-x4 no-mar">Heading With Azure Background.</h1>
<p>A paragraph containing multiple span elements with <span class="bgl-warning s-pad-x2">light orange</span>, <span class="bgl-neutral s-pad-x2">azure</span>, <span class="bgl-failure s-pad-x2">red</span> background and black text.</p>
<p>A paragraph containing multiple span elements with <span class="bg-warning tc-white s-pad-x2">orange</span>, <span class="bg-neutral tc-white s-pad-x2">eggplant</span>, <span class="bg-failure tc-white s-pad-x2">ruby</span> background and white text.</p>
</div>
<h3>Change Background Color on Hover</h3>
<p>As you might have guessed, the prefixes for changing the background color on hover are <code>bgh-</code> (<b>B</b>ack<b>G</b>round <b>H</b>over) and <code>bglh-</code> (<b>B</b>ack<b>G</b>round <b>L</b>ight <b>H</b>over) respectively for normal and light color variants.</p>
<div class="result n-round n-bshadow">
<h1 class="bgh bgh-brand-primary no-mar s-pad">Heading with Brand Primary Background.</h1>
<p>A paragraph containing multiple span elements with <span class="bglh-warning s-pad-x2">light orange</span>, <span class="bglh-neutral s-pad-x2">light azure</span>, and <span class="bglh-failure s-pad-x2">light red</span> background.</p>
<p>A paragraph containing multiple span elements with <span class="bgh-warning tc-white s-pad-x2">orange</span>, <span class="bgh-neutral tc-white s-pad-x2">azure</span>, <span class="bgh-failure tc-white s-pad-x2">red</span> background.</p>
</div>
<h2>Buttons</h2>
<p>You can create buttons in NeatU by using the class <code>n-btn</code> like this: </p>
<pre><code class="lang-html"><button class="n-btn">Normal Button</button>
</code></pre>
<p>The result looks like this:</p>
<button class="n-btn">Normal Button</button>
<h3>Add Background Color to Buttons</h3>
<p>You can add classes like <code>bglh-neutral</code>, <code>bglh-failure-warning</code>, and <code>bglh-mint-success</code> to add a background color to the buttons. I have already explained how these classes work in the <a href="#colors">Colors section</a>.</p>
<p>If you want to create a disabled button simply add the class <code>disabled-btn</code>.</p>
<pre><code class="lang-html"><button class="n-btn bglh-neutral">Normal Button</button>
<button class="n-btn bglh-failure-warning">Red Button</button>
<button class="n-btn bglh-mint-success">Orange Button</button>
<button class="n-btn disabled-btn">Disabled Button</button>
</code></pre>
<div class="result n-round n-bshadow">
<button class="n-btn bglh-neutral">Azure Button</button>
<button class="n-btn bglh-failure">Red Button</button>
<button class="n-btn bglh-warning">Orange Button</button>
<button class="n-btn bglh-success">Green Button</button>
<button class="n-btn disabled-btn">Disabled Button</button>
</div>
<p>All buttons you create will have a black text color by default. However, black text is hard to read on dark backgrounds. You should consider adding the <code>tc-white</code> class to any buttons with a dark background to add enough contrast.</p>
<pre><code class="lang-html"><button class="n-btn tc-white bgh-neutral">Azure Button</button>
<button class="n-btn tc-white bgh-failure">Red Button</button>
<button class="n-btn tc-white bgh-warning">Orange Button</button>
<button class="n-btn tc-white bgh-success">Green Button</button>
<button class="n-btn disabled-btn tc-white">Disabled Button</button>
</code></pre>
<div class="result n-round n-bshadow">
<button class="n-btn tc-white bgh-neutral">Azure Button</button>
<button class="n-btn tc-white bgh-failure">Red Button</button>
<button class="n-btn tc-white bgh-warning">Red Button</button>
<button class="n-btn tc-white bgh-success">Green Button</button>
<button class="n-btn disabled-btn tc-white">Disabled Button</button>
</div>
<h3>Add Rounded Corners to Buttons</h3>
<p>Simply add classes like <code>n-round</code>, <code>n-round-x2</code>, ... , <code>n-round-x5</code> to the button which should have rounded corners.</p>
<pre><code class="lang-html"><button class="n-btn tc-white n-round disabled-btn bgh-gray">Disabled Button</button>
<button class="n-btn tc-white n-round-x2 bgh-neutral">Normal Button</button>
<button class="n-btn tc-white n-round-x3 bgh-failure">Danger Button</button>
<button class="n-btn tc-white n-round-x3 bgh-warning">Danger Button</button>
<button class="n-btn tc-white n-round-x4 bgh-success">Success Button</button>
</code></pre>
<div class="result n-round n-bshadow">
<button class="n-btn tc-white n-round bgh-neutral">Azure Button</button>
<button class="n-btn tc-white n-round-x2 bgh-failure">Red Button</button>
<button class="n-btn tc-white n-round-x3 bgh-warning">Orange Button</button>
<button class="n-btn tc-white n-round-x4 bgh-success">Green Button</button>
<button class="n-btn tc-white n-round-x5 disabled-btn">Disabled Button</button>
</div>
<h3>Create Buttons with Outlines</h3>
<p>Use the <code>n-outline</code> helpers classes to create buttons with a white background but colorful outline that matches the text color.</p>
<p>You can set the text color by using <code>tch-</code> classes I mentioned in the <a href="#colors">Colors section</a>.</p>
<pre><code class="lang-html"><button class="n-btn n-outline tch-neutral">Normal Button</button>
<button class="n-btn n-outline disabled-btn tcl-text">Disabled Button</button>
<button class="n-btn n-outline-x2 tch-failure">Red Button</button>
<button class="n-btn n-outline-x3 tch-warning">Orange Button</button>
<button class="n-btn n-outline-x4 tch-success">Green Button</button>
</code></pre>
<div class="result rounded n-bshadow">
<button class="n-btn n-outline tch-neutral">Normal Button</button>
<button class="n-btn n-outline disabled-btn tcl-text">Disabled Button</button>
<button class="n-btn n-outline-x2 tch-failure">Red Button</button>
<button class="n-btn n-outline-x3 tch-warning">Orange Button</button>
<button class="n-btn n-outline-x4 tch-success">Green Button</button>
</div>
<h3>Create Buttons with Borders</h3>
<p>If you want to create buttons that have a background as well as borders, you should use the <code>n-border</code> helper classes.</p>
<div class="result rounded n-bshadow">
<button class="n-btn tc-white bgh-neutral n-border">Normal Button</button>
<button class="n-btn tc-white bgh-warning n-border-x2">Orange Button</button>
<button class="n-btn tc-white bgh-success n-border-x3">Green Button</button>
<button class="n-btn tc-white bgh-failure n-border-x4">Red Button</button>
</div>
<h3>Using Button Classes on Links and Input Elements</h3>
<p>You can add the <code>n-btn</code> class to tags like <code>a</code> and <code>input</code> to give them appearance of a button.</p>
<p>Use a combination of <code>n-border</code>, <code>n-outline</code>, and helper color classes to get desired results.</p>
<div class="result rounded n-bshadow">
<a href="https://hellonitish.com" class="n-btn n-border-x2 bglh-failure tc-white">Link Button</a>
<input type="button" value="Input Button" class="n-btn n-border-x2 bglh-neutral">
<input type="submit" value="Submit Button" class="n-btn n-outline-x2 tch-success">
<input type="reset" value="Reset Button (Disabled)" class="n-btn n-border-x2 disabled-btn">
</div>
<h2>Form Elements</h2>
<div class="n-flex n-flex-eq-mw no-border">
<form action="">
<div class="form-group">
<label for="username">Email Address</label>
<input name="username" type="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="username">Username</label>
<input name="username" type="text">
<p class="form-help">Username should only have alphanumeric characters.</p>
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" type="password">
<p class="form-help">Minimum 8-12 characters.</p>
</div>
<div class="form-group">
<div class="n-wrapper">
<input class="n-success-btn" type="submit" value="Register">
<input class="n-normal-btn" type="reset" value="Reset">
</div>
</div>
</form>
<form action="">
<div class="form-group">
<div class="n-flex n-flex-acjsb">
<label class="n-mw-40" for="username">Username</label>
<input class="n-mw-55" name="username" type="text">
</div>
<p class="form-help">Username should only have alphanumeric chatacters.</p>
</div>
<div class="form-group">
<div class="n-flex n-flex-acjsb">
<label class="n-mw-40" for="password">Password</label>
<input class="n-mw-55" name="password" type="password">
</div>
<p class="form-help">Minimum 8-12 characters.</p>
</div>
<div class="form-group">
<div class="n-wrapper">
<input class="n-success-btn" type="submit" value="Login">
</div>
</div>
</form>
</div>
<div class="n-flex n-flex-eq-mw no-border">
<form action="">
<p>Which of these is your favorite food?</p>
<div class="form-group">
<div class="n-flex n-flex-acjs">
<input class="wd-fit" type="checkbox" name="pasta" id="">
<label class="wd-fit" for="pasta">Pasta</label>
</div>
</div>
<div class="form-group">
<div class="n-flex n-flex-acjs">
<input class="wd-fit" type="checkbox" name="pizza" id="">
<label class="wd-fit" for="pasta">Pizza</label>
</div>
</div>
<div class="form-group">
<div class="n-flex n-flex-acjs">
<input class="wd-fit" type="checkbox" name="dosa" id="">
<label class="wd-fit" for="pasta">Dosa</label>
</div>
</div>
<p>Do you like NeatU?</p>
<div class="form-group">
<div class="n-flex n-flex-acjs">
<input class="wd-fit" type="radio" name="n-like" id="n-like-yes">
<label class="wd-fit" for="n-like-yes">Yes</label>
</div>
</div>
<div class="form-group">
<div class="n-flex n-flex-acjs">
<input class="wd-fit" type="radio" name="n-like" id="n-like-no">
<label class="wd-fit" for="n-like-no">No</label>
</div>
</div>
</form>
</div>
<h2>Images</h2>
<p>Here are three images of different sizes each wrapped inside its own <code>div</code> element. This gives you better control over the spacing within the images.</p>
<pre><code class="language-html">
<div class="n-flex gapped n-flex-eq-mw no-border">
<div><img class="n-image-responsive" src="randomly-generated-placehold.co-url"></div>
<div><img class="n-image-responsive n-round" src="randomly-generated-placehold.co-url"></div>
<div><img class="n-image-responsive n-round-x5" src="randomly-generated-placehold.co-url"></div>
</div>
</code></pre>
<p>The whole code is wrapped inside a <code>n-flex</code> element with class <code>n-flex-eq-mw</code>.</p>
<p>You might remember that <code>n-flex-eq-mw</code> makes sure all children have equal width when viewport width >= 768px.</p>
<p>Images become responsive when you add the class <code>n-image-responsive</code>.</p>
<div class="n-flex gapped n-flex-eq-mw no-border sc-pad-x4">
<div class="n-wrapper"><img class="n-image-responsive" src="<?php echo generateRandomPlaceholderUrl('Elephants', 720); ?>" alt=""></div>
<div class="n-wrapper"><img class="n-image-responsive n-round" src="<?php echo generateRandomPlaceholderUrl('Crocodiles', 480); ?>" alt=""></div>
<div class="n-wrapper"><img class="n-image-responsive n-round-x5" src="<?php echo generateRandomPlaceholderUrl('Kangaroos', 520); ?>" alt=""></div>
</div>
<h2>Figures</h2>
<p>We use the <code>figure</code> element to display images, diagrams, code snippets etc. with an optional caption that goes inside the <code>figcaption</code> element.</p>
<p>You can use the following markup to display responsive <code>figure</code> elements using NeatU.</p>
<pre>
<code class="language-html">
<figure>
<img class="n-image-responsive" src="randomly-generated-placehold.co-url">
<figcaption class="talign-start">This is a sample caption</figcaption>
</figure>
</code>
</pre>
<p>Add the classes <code>n-round</code> and <code>n-round-x5</code> to the images to apply a border-radius.</p>
<p>You can also add the classes <code>talign-start</code>, <code>talign-center</code>, and <code>talign-end</code> to the <code>figcaption</code> element to control text alignment.</p>
<div class="n-flex gapped n-flex-eq-mw no-border neatu-flex-as sc-pad-x4">
<div class="n-wrapper">
<figure>
<img class="n-image-responsive" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
<figcaption class="talign-start">This is a sample caption</figcaption>
</figure>
</div>
<div class="n-wrapper">
<figure>
<img class="n-image-responsive n-round" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
<figcaption class="talign-center">This is a sample caption</figcaption>
</figure>
</div>
<div class="n-wrapper">
<figure>
<img class="n-image-responsive n-round-x5" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
<figcaption class="talign-end">This is a sample caption</figcaption>
</figure>
</div>
</div>
<p>Add the classes <code>caption-overlay</code>, <code>n-bshadow</code>, and <code>n-border</code> to the figure element to apply different styling.</p>
<pre><code class="language-html">
<div>
<figure class="caption-overlay">
<img class="n-image-responsive" src="randomly-generated-placehold.co-url">
<figcaption>This is a sample caption</figcaption>
</figure>
</div>
<div>
<figure class="n-bshadow n-round-x5">
<img class="n-image-responsive n-round-x5" src="randomly-generated-placehold.co-url" >
<figcaption>This is a sample caption</figcaption>
</figure>
</div>
<div>
<figure class="n-border n-round">
<img class="n-image-responsive n-round" src="randomly-generated-placehold.co-url">
<figcaption>This is a sample caption</figcaption>
</figure>
</div>
</code></pre>
<div class="n-flex gapped n-flex-eq-mw no-border neatu-flex-as sc-pad-x4">
<div class="n-wrapper">
<figure class="caption-overlay">
<img class="n-image-responsive" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
<figcaption>This is a sample caption</figcaption>
</figure>
</div>
<div class="n-wrapper">
<figure class="n-bshadow n-round-x5">
<img class="n-image-responsive n-round-x5" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
<figcaption>This is a sample caption</figcaption>
</figure>
</div>
<div class="n-wrapper">
<figure class="n-border n-round">
<img class="n-image-responsive n-round" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
<figcaption>This is a sample caption</figcaption>
</figure>
</div>
</div>
<h2>Cards</h2>
<p>You can use the class <code>n-card</code> to create cards that display an image along with some textual description using a variety of elements like headings, paragraphs, links, and buttons.</p>
<pre>
<code class="language-html">
<div class="n-wrapper">
<div class="n-card n-oxsw-75">
<img class="n-image-responsive" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
<div class="n-card-body">
<h3>What do you call a pony with a cough?</h3>
<p>A little horse.</p>
<a class="n-btn n-normal-btn" href="https://hellonitish.com">Vist Hello Nitish</a>
</div>
</div>
</div>
</code>
</pre>
<div class="n-flex gapped n-flex-aw-2 n-flex-eq-lw no-border n-flex-al-stretch sc-pad-x4">
<div class="n-wrapper">
<div class="n-card n-oxsw-75">
<img class="n-image-responsive" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
<div class="n-card-body">
<h3>Want to know what else I have created?</h3>
<p>Simply visit my website.</p>
<a class="n-btn bglh-success" href="https://hellonitish.com">Visit Hello Nitish</a>
</div>
</div>
</div>
<div class="n-wrapper">
<div class="n-card n-oxsw-75">
<img class="n-image-responsive" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
<div class="n-card-body">
<h3>What's the best thing about Switzerland?</h3>
<p>I don't know, but the flag is a big plus.</p>
</div>
</div>
</div>
<div class="n-wrapper">
<div class="n-card n-oxsw-75">
<img class="n-image-responsive" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
<div class="n-card-body">
<h3>Did you know?</h3>
<p>Elephants have the largest brain in all of the animal kingdom. Their brain can weigh up to 5.4kg.</p>
<p><a href="https://factanimal.com/elephants/">More Elephant Facts</a></p>
</div>
</div>
</div>
</div>
<h3>Horizontal Cards</h3>
<p>Add the class <code>n-card-horizontal</code> to display the card content horizontally.</p>
<p>You might have noticed vertical cards have a border applied to them by default. However, the horizontal cards don't.</p>
<p>This is because the image in horizontal cards does'nt always take up the entire height of the card. As a result, the car borders only touched one side of the image instead of three and it looked weird.</p>
<div class="n-flex gapped n-flex-aw-112 no-border n-flex-al-stretch sc-pad-x4">
<div class="n-wrapper">
<div class="n-card n-card-horizontal n-oxsw-75">
<img class="n-image-responsive n-sw-40 n-omw-25" src="<?php echo generateRandomPlaceholderUrl('Dad Joke', 500); ?>" alt="">
<div class="n-card-body n-sw-60 n-omw-75">
<h3>My son asked me if we were pyromaniacs.</h3>
<p>I replied "yes we arson".</p>
</div>
</div>
</div>
<div class="n-wrapper">
<div class="n-card n-card-horizontal n-oxsw-75">
<img class="n-image-responsive n-sw-40 n-omw-25" src="<?php echo generateRandomPlaceholderUrl('Awesome\nFacts', 500); ?>" alt="">
<div class="n-card-body n-sw-60 n-omw-75">
<h3>Did you know?</h3>
<p>Ants can lift 20 to 50 times their own body weight.</p>
</div>
</div>
</div>
</div>
<p>The elements in horizontal cards are laid out vertically when viewport is less than 576px wide. This makes sure the elements aren't squished on narrow screens.</p>
<h3>Additional Card Styling</h3>
<p>You can always add classes <code>n-bshadow</code>, <code>n-border</code>, and <code>n-round-x5</code> to modify the appearance of cards a bit.</p>
<p>For instance, the code below generates a card with additional styling coming from the classes <code>n-border</code>, <code>n-bshadow</code> and <code>n-round-x5</code>.</p>
<pre><code class="language-html">
<div class="n-wrapper">
<div class="n-card n-border n-card-horizontal n-oxsw-75">
<img class="n-image-responsive n-sw-40 n-omw-25" src="<?php echo generateRandomPlaceholderUrl('Dad Joke', 500); ?>" alt="">
<div class="n-card-body n-sw-60 n-omw-75">
<h3>My wife and I laugh at hoe competitive we are.</h3>
<p>But I laugh more.</p>
</div>
</div>
</div>
<div class="n-wrapper">
<div class="n-card n-bshadow n-round-x5 n-card-horizontal n-oxsw-75">
<img class="n-image-responsive n-sw-40 n-omw-25 n-round-x5" src="<?php echo generateRandomPlaceholderUrl('Awesome\nFacts', 500); ?>" alt="">
<div class="n-card-body n-sw-60 n-omw-75">
<h3>Did you know?</h3>
<p>Mercury has water ice on its surface, despite the high temperatures.</p>
</div>