-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1148 lines (1042 loc) · 40.1 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
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
<!doctype html>
<html lang="de">
<head>
<!-- meta -->
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="HandheldFriendly" content="True" />
<!-- identity -->
<title>Style-Cheat CSS</title>
<meta name="Just another CSS Framework." content="meta-description" />
<link rel="apple-touch-icon" href="logo" />
<link rel="shortcut icon" href="logo" />
<!-- use Style-Cheat CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/style-cheat/[email protected]/dist/style-cheat.min.css" />
<!-- <link rel="stylesheet" href="../css/dist/style-cheat.min.css" /> -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<header id="header" role="banner" class="bg-primary">
<div class="container text-center">
<h1 class="page-heading">Style-Cheat CSS</h1>
<img src="img/style-cheat.svg" style="width: 200px;">
</div>
</header> <!-- /#header -->
<main>
<article id="intro" class="bg-light">
<div class="container">
<p>You always wanted to <strong>cheat</strong> a bit, when
developing your website? "Style-Cheat CSS" provides the code you
need. The framework is very <strong>minimal</strong> per design
to reduce loading times
<strong>(only 6kb, <2kb compressed)</strong>.
<strong>Modularity</strong> will allow you, to bring only the
tools, you really need. Disable everything else!
<strong>Mobile First</strong> and
<strong>Responsive Elements</strong> will ensure that your
website fits for all modern devices. The code is also
<strong>easy to learn</strong>, so you can focus on your
website and not on the framework.
</p>
</div>
</article> <!-- /#intro -->
<article id="gettingstarted">
<div class="container">
<h1>Getting started</h1>
<p>There are some ways to get started. See all possible options below
and decide, which one fits your use case.
</p>
<p><a href="https://github.com/style-cheat/css/releases" class="button bg-primary">Download Style-Cheat</a></p>
<section id="usecdn">
<h2>Use a CDN</h2>
<p>"Style-Cheat CSS" is available at
<a href="https://jsdelivr.net">jsdelivr CDN.</a>
</p>
<pre><code>
<!-- Use Style-Cheat CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/style-cheat/[email protected]/dist/style-cheat.css" />
<!-- Use Style-Cheat CSS (minified)-- >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/style-cheat/[email protected]/dist/style-cheat.min.css" />
</code></pre>
</section> <!-- /#usecdn -->
</div>
</article> <!-- /#gettingstarted -->
<article id="base">
<div class="container">
<h1>Base</h1>
<p>The <a href="https://github.com/style-cheat/css/blob/master/src/main/_base.sass">base module</a>
is the only mandatory module. It provides some very basic features and
definitions, which may be used in other modules.
</p>
<section id="base-fonts">
<h2>System Fonts</h2>
<p>"Style-Cheat CSS" is using System Fonts. This should ensure, that a
website is integrating well into the OS Environment.
</p>
</section> <!-- /# base-fonts -->
<section id="base-colors">
<h2>Base Colors</h2>
<p>You will find some very basic color information in the base module.
You will find the following colors for some default contrast, font
and background colors.
</p>
<div class="row">
<div class="col">
<div class="box bg-dark fg-light text-center">
<p>$dark is used for text mostly</p>
</div>
</div>
<div class="col">
<div class="box bg-gray fg-light text-center">
<p>$gray is used for some borders</p>
</div>
</div>
<div class="col">
<div class="box bg-light fg-dark text-center">
<p>$light is used for backgrounds mostly</p>
</div>
</div>
</div>
</section> <!-- /#base-colors -->
<section id="base-border">
<h2>Base Borders</h2>
<p>Some basic definitions for borders are made to provide a consitent
look and feel. A border-radius of <var>.25rem</var> and a
border-width of<var>1px</var> are the defaults.
</p>
</section> <!-- /#base-border -->
<section id="base-media">
<h2>Media Queries</h2>
<p>The media query breaking points are defined here, too.
"Style-Cheat CSS" is using the <code>rem</code> unit for nearly all
definitions. This value is based on the browser default. Most browsers
are having a default of <code>1rem = 16px</code>. With the definitions
for the breaking points, you will get the following options.
</p>
<pre><code>
// Media Query Break Points
// Undefined = 0 - 25.99rem
// Large Phones (416px width)
@sm: 26.0rem;
// Tablets (752px width)
@md: 47.0rem;
// Notebooks and Desktops (1200px width)
@lg: 75.0rem;
</code></pre>
</section> <!-- /#base-media -->
</div>
</article> <!-- /#base -->
<article id="typography">
<div class="container">
<h1>Typography</h1>
<p>"Style-Cheat CSS" provides a
<a href="https://github.com/style-cheat/css/blob/master/src/modules/_typography.sass">typography module</a>,
which is taking care of styling the text properly. All font-sizes are
defined in <code>rem</code>, which defaults in most browser to
<var>16px</var>.
</p>
<section id="headings">
<h2>Headings</h2>
<p>Headings are slightly styled for a simpler look.</p>
<h1>Heading <small><code><h1></code> 1.75rem = 28px</small></h1>
<h2>Heading <small><code><h2></code> 1.50rem = 24px</small></h2>
<h3>Heading <small><code><h3></code> 1.375rem = 22px</small></h3>
<h4>Heading <small><code><h4></code> 1.25rem = 20px</small></h4>
<h5>Heading <small><code><h5></code> 1.125rem = 18px</small></h5>
<h6>Heading <small><code><h6></code> 1.00rem = 16px</small></h6>
</section> <!-- /#headings -->
<section id="inline">
<h2>Inline elements</h2>
<p>There are only some very minor changes to margins and font-size for
better readability and look.
</p>
<p><strong>Strong</strong> <small><code><strong></code> 16px</small></p>
<p><em>Emphasis</em> <small><code><em></code> 16px</small></p>
<p><mark>Mark</mark> <small><code><mark></code> 16px</small></p>
<p><small>Small</small> <small><code><small></code> 12px</small></p>
<p><del>Delete</del> <small><code><del></code> 16px</small></p>
<p><ins>Insert</ins> <small><code><ins></code> 16px</small></p>
<p><sub>Subscript</sub> text <small><code><sub></code> 12px</small></p>
<p><sup>Superscript</sup> text <small><code><sup></code> 12px</small></p>
</section> <!-- /#inline -->
</div>
</article> <!-- /#typography -->
<article id="text">
<div class="container">
<h1>Text</h1>
<p>"Style-Cheat CSS" provides a <a href="https://github.com/style-cheat/css/blob/master/src/modules/_text.sass">text module</a>.
This module is responsible for some common text formatting.
</p>
<section id="text-heading">
<h2>Heading Formats</h2>
<p>Sometimes the given <code><h1></code> tags are not enough to
distinguish one section from another. The heading format will give
you some more control over headings.
</p>
<pre><code>
<!-- A huge heading (3rem) -->
<h1 class="page-heading">Page Heading</h1>
<!-- A heading with a solid bottom border -->
<h2 class="section-heading">Section Heading</h2>
<!-- A heading with a dashed bottom border -->
<h3 class="sub-heading">Sub Heading</h3>
</code></pre>
</section> <!-- /#text-heading -->
<section id="text-format">
<h2>Text Format</h2>
<p>You can also easily align content with "Style-Cheat CSS".</p>
<pre><code>
<!-- Align text left -->
<p class="text-left">Left</p>
<!-- Align text centered -->
<p class="text-center">Center</p>
<!-- Align text right -->
<p class="text-right">Right</p>
</code></pre>
<p><strong>Example:</strong></p>
<div>
<p class="text-left bg-alert">Left</p>
<p class="text-center bg-success">Center</p>
<p class="text-right bg-warning">Right</p>
</div>
</section> <!-- /#text-format -->
<section id="text-box">
<h2>Text Box</h2>
<p>Sometimes, you want to "box" your content. The
<code>class="text-box"</code> can be used for this purpose and can
be combinded with the <a href="#decoration">decoration module</a>.
</p>
<pre><code>
<!-- Simple Textbox -->
<div class="text-box">
<strong>Standard</strong>
<p>This is a standard text box.</p>
</div>
<!-- Textbox + decoration -->
<div class="text-box bg-primary">
<strong>Primary</strong>
<p>This is a primary colored text box.</p>
</div>
</code></pre>
<p><strong>Example:</strong></p>
<div class="text-box">
<strong>Standard</strong>
<p>This is a standard text box.</p>
</div>
<div class="text-box bg-primary">
<strong>Primary</strong>
<p>This is a primary colored text box.</p>
</div>
</section> <!-- /#text-box -->
</div>
</article> <!-- /#text -->
<article id="container">
<div class="container">
<h1>Container</h1>
<p>Containers are the most basic design element in "Style-Cheat CSS". The
<a href="https://github.com/style-cheat/css/blob/master/src/modules/_container.sass">container module</a> is used for the grid or to align
your content properly.
</p>
<section id="container">
<h2>Container (72rem)</h2>
<p>You can define a container, that grows to a maximum of 72rem (1200px).</p>
<pre><code>
<!-- Will scale to a maximum of 75rem -->
<div class="container">
...
</div>
</code></pre>
</section> <!-- /#container -->
<section id="container-fluid">
<h2>Container Fluid (100%)</h2>
<p>You can define a container, that grows to the size of the viewport.</p>
<pre><code>
<!-- Will always scale to 100% -->
<div class="container-fluid">
...
</div>
</code></pre>
</section> <!-- /#container-fluid -->
</div>
</article> <!-- /#container -->
<article id="grid">
<div class="container">
<h1>Grid</h1>
<p>The grid allows to define areas. "Style-Cheat CSS" uses
<a href="https://www.w3schools.com/csS/css3_flexbox.asp">CSS Flexbox</a>
for the definition of the grid layout. The grid is defined in the
<a href="https://github.com/style-cheat/css/blob/master/src/modules/_grid.sass">grid module</a>.
</p>
<section id="grid-simple">
<h2>Simple Grid</h2>
<p>The simplest example of a grid will arrange your content
dynamically and adjust the size based on the viewport.
</p>
<pre><code>
<div class="row">
<div class="col">
<div class="box">
Content One
</div>
</div>
<div class="col">
<div class="box">
Content Two
</div>
</div>
</div>
</code></pre>
<p><strong>Example:</strong></p>
<div class="row">
<div class="col bg-light">
<div class="box">
Content One
</div>
</div>
<div class="col bg-light">
<div class="box">
Content Two
</div>
</div>
</div>
</section> <!-- /#grid-simple -->
<section class="grid-viewport">
<h2>Viewport aware Grid</h2>
<p>I is possible to show grid columns depending on the viewport size.
The <a href="#utility">utility module</a> provides some classes to
show content dependening on the viewport size. You can change the
browser window size, to see this effect in the below example.
</p>
<pre><code>
<div class="row">
<div class="col">
<div class="box">
Column always visible
</div>
</div>
<div class="col visible-sm">
<div class="box">
Column visible on Large Phones
</div>
</div>
<div class="col visible-md">
<div class="box">
Column visible on Tablets
</div>
</div>
<div class="col visible-lg">
<div class="box">
Column visible on Desktops and Laptops
</div>
</div>
</div>
</code></pre>
<p><strong>Example:</strong></p>
<div class="row">
<div class="col bg-primary">
<div class="box">
Column always visible
</div>
</div>
<div class="col visible-sm bg-success">
<div class="box">
Column visible on Large Phones
</div>
</div>
<div class="col visible-md bg-warning">
<div class="box">
Column visible on Tablets
</div>
</div>
<div class="col visible-lg bg-alert">
<div class="box">
Column visible on Desktops and Laptops
</div>
</div>
</div>
</section> <!-- /#grid-viewport -->
</div>
</article> <!-- /#grid -->
<article id="button">
<div class="container">
<h1>Button</h1>
<p>Buttons are essential for most websites and "Style-Cheat CSS" is
giving you some choice with the
<a href="https://github.com/style-cheat/css/blob/master/src/modules/_button.sass">button module</a>.
</p>
<section id="button-default">
<h2>Default Buttons</h2>
<p>You can use the button for all of your "button neeeds".</p>
<pre><code>
<!-- Anchor Button -->
<a href="#" class="button">Anchor Button</a>
<!-- Button -->
<button>Button</button>
<!-- Input Button -->
<input class="button" type="button" value="Input Button"></input>
<!-- Submit Button -->
<input class="button" type="submit" value="Submit Button"></input>
<!-- Reset Button -->
<input class="button" type="reset" value="Reset Button"></input>
</code></pre>
<p><strong>Example:</strong></p>
<!-- Anchor button -->
<a href="#" class="button">Anchor Button</a>
<!-- Button -->
<button>Button</button>
<!-- Input Button -->
<input class="button" type="button" value="Input Button"></input>
<!-- Submit Button -->
<input class="button" type="submit" value="Submit Button"></input>
<!-- Reset Button -->
<input class="button" type="reset" value="Reset Button"></input>
</section> <!-- /#button-default -->
<section id="button-sizes">
<h2>Button Sizes</h2>
<p>Buttons can have different sizes.</p>
<pre><code>
<!-- Large Button -->
<a href="#" class="button-lg">Large Button</a>
<!-- Standard Button -->
<a href="#" class="button">Standard Button</a>
<!-- Small Button -->
<a href="#" class="button-sm">Small Button</a>
</code></pre>
<p><strong>Example:</strong></p>
<!-- Large Button -->
<a href="#" class="button-lg">Large Button</a>
<!-- Standard Button -->
<a href="#" class="button">Standard Button</a>
<!-- Small Button -->
<a href="#" class="button-sm">Small Button</a>
</section> <!-- /#button-sizes -->
<section id="button-colors">
<h2>Button Colors</h2>
<p>The <a href="https://github.com/style-cheat/css/blob/master/src/modules/_button.sass">button module</a> can be combined with the
<a href="#decoration">decoration module</a> to define colored
buttons.
</p>
<p>You can change foreground and background colors.</p>
<pre><code>
<!-- Standard Button -->
<a href="#" class="button">Standard Button</a>
<!-- Primary Button -->
<a href="#" class="button bg-primary">Primary Button</a>
<!-- Success Button -->
<a href="#" class="button bg-success">Success Button</a>
<!-- Warning Button -->
<a href="#" class="button bg-warning">Warning Button</a>
<!-- Alert Button -->
<a href="#" class="button bg-alert">Alert Button</a>
<!-- Gray Button -->
<a href="#" class="button bg-gray fg-light">Gray Button</a>
<!-- Dark Button -->
<a href="#" class="button bg-dark fg-light">Dark Button</a>
</code></pre>
<p><strong>Example:</strong></p>
<!-- Standard Button -->
<a href="#" class="button">Standard Button</a>
<!-- Info Button -->
<a href="#" class="button bg-primary">Primary Button</a>
<!-- Success Button -->
<a href="#" class="button bg-success">Success Button</a>
<!-- Warning Button -->
<a href="#" class="button bg-warning">Warning Button</a>
<!-- Alert Button -->
<a href="#" class="button bg-alert">Alert Button</a>
<!-- Gray Button -->
<a href="#" class="button bg-gray fg-light">Gray Button</a>
<!-- Dark Button -->
<a href="#" class="button bg-dark fg-light">Dark Button</a>
</section> <!-- /#button-colors -->
</div>
</article> <!-- /#button -->
<article id="list">
<div class="container">
<h1>Lists</h1>
<p>The <a href="https://github.com/style-cheat/css/blob/master/src/modules/_list.sass">list module</a> defines all lists
<code>ul,ol,dl</code> with <code>margin-top: 0</code> and
<code>margin-bottom: 1rem</code>. Nested lists have no
<code>margin-bottom</code>.
</p>
<section id="list-unordered">
<h2>Unordered lists</h2>
<p>Using unordered lists works as always.</p>
<pre><code>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<ul>
<li>Subitem</li>
<li>Subitem</li>
</ul>
<li>Item</li>
</ul>
</code></pre>
<p><strong>Example:</strong></p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<ul>
<li>Subitem</li>
<li>Subitem</li>
</ul>
<li>Item</li>
</ul>
</section> <!-- /#list-unordered -->
<section id="list-ordered">
<h2>Ordered lists</h2>
<p>Ordered lists are working as always.</p>
<pre><code>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
</code></pre>
<p><strong>Example:</strong></p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
</section> <!-- /#list-ordered -->
<section id="list-description">
<h2>Description Lists</h2>
<p>For a better look, description lists have seen an update.
<code>dt</code> elements are bolded. <code>dd</code> has
<code>margin-left: 1rem.</code>
</p>
<pre><code>
<dl>
<dt>Alice</dt>
<dd>Who the fuck is ...</dd>
<dt>Bob</dt>
<dd>Read it backwards...</dd>
</dl>
</code></pre>
<p><strong>Example:</strong></p>
<dl>
<dt>Alice</dt>
<dd>Who the fuck is ...</dd>
<dt>Bob</dt>
<dd>Read it backwards...</dd>
</dl>
</section>
<section id="list-styling">
<h2>List Stylings</h2>
<p>Sometimes, styling a list is nescessary. Currently 2 styling
classes are supported.
</p>
<p>You can use <code>class="list-unstyled"</code> to get a list
without any styling.
</p>
<pre><code>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</code></pre>
<p><strong>Example:</strong></p>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<p>With <code>class="list-inline"</code>, you can also have an
inline list. It will have no styling, too.
</p>
<pre><code>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</code></pre>
<p><strong>Example:</strong></p>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</section>
</div>
</article> <!-- /#list -->
<article id="quote">
<div class="container">
<h1>Quotes & Cites</h1>
<p>In the <a href="https://github.com/style-cheat/css/blob/master/src/modules/_quote.sass">quote module</a> only the
<code>blockquote</code> element was touched. You will also get the
option for a <code>footer</code>.
</p>
<pre><code>
<blockquote cite="Elon Musk">
<p>When something is important enough, you do it even if the odds
are not in your favor.
</p>
<footer>Elon Musk</footer>
</blockquote>
</code></pre>
<p><strong>Example:</strong></p>
<blockquote cite="Elon Musk">
<p>When something is important enough, you do it even if the odds
are not in your favor.
</p>
<footer>Elon Musk</footer>
</blockquote>
</div>
</article> <!-- /#quote -->
<article id="code">
<div class="container">
<h1>Code</h1>
<p>"Style-Cheat CSS" includes some Code Styling in the
<a href="https://github.com/style-cheat/css/blob/master/src/modules/_code.sass">code module</a>.
</p>
<section id="code-inline">
<h2>Inline Code</h2>
<p>For inline code, Style-Cheat sets <code>background: @gray</code>
and <code>padding-left/padding-right: .3rem</code>.
</p>
<pre><code>
<p>My cool <code>Inline Code</code> goes here.</p>
</code></pre>
<p><strong>Example:</strong></p>
<p>My cool <code>Inline Code</code> goes here.</p>
</section> <!-- /#code-inline -->
<section id="code-kbd">
<h2>Keyboard / User Input</h2>
<p>Use the <code><kdb></code>to indicate input that is typically
entered via keyboard.
</p>
<pre><code>
<p>You have to press <kbd>Alt</kbd> + <kbd>F4</kbd> to close the application.</p>
</code></pre>
<p><strong>Example:</strong></p>
<p>You have to press <kbd>Alt</kbd> + <kbd>F4</kbd> to close the application.</p>
</section> <!-- /#code-kbd -->
<section id="code-block">
<h2>Code Blocks</h2>
<p>Code Blocks can be used to present huge chunks of source code,
terminal commands, etc.</p>
<pre><code>
<pre><code>
#!/bin/bash
function hello {
echo Hello!
}
</code></pre>
</code></pre>
<p><strong>Example:</strong></p>
<pre><code>
#!/bin/bash
function hello {
echo Hello!
}
</code></pre>
</section> <!-- /#code-block -->
<section id="code-samp">
<h2>Sample Output</h2>
<p>If you want to present some output of a command, you can do this
with the <code><samp></code> tag. It is slightly adjusted,
to differentiate better from the normal text.
</p>
<pre><code>
<samp>Output of some command</samp>
</code></pre>
<p><strong>Example:</strong></p>
<samp>Output of some command</samp>
</section> <!-- /#code-samp -->
<section id="code-vars">
<h2>Variables</h2>
<p>The <code><var></code> tag can be used to present variables.</p>
<p><strong>Example:</strong></p>
<pre><code>
<var>Name=Alice</var>, <var>x=3.141...</var>, <var>int myCoolInteger</var>
</code></pre>
<p><strong>Example:</strong></p>
<var>Name=Alice</var>, <var>x=3.141...</var>, <var>int myCoolInteger</var>
</section> <!-- /#code-vars -->
</div>
</article> <!-- /#code -->
<article id="table">
<div class="container">
<h1>Tables</h1>
<p>The <a href="https://github.com/style-cheat/css/blob/master/src/modules/_table.sass">table module</a> provides some opt-in classes
for tables. Since tables are used for many purposes like calendars,
widgets or even simple design elements, we've decided to not touch the
<code><table></code> tag itself.
</p>
<section id="table-simple">
<h2>Simple Tables</h2>
<p>You can add <code>class="table"</code> to your table
definitions and you will see an immediate effect.
</p>
<pre><code>
<table class="table">
...
</table>
</code></pre>
<p><strong>Example:</strong></p>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Hobby</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Alice</td>
<td>Climbing</td>
<td>@wonderland</td>
</tr>
<tr>
<th>2</th>
<td>Bob</td>
<td>Walking</td>
<td>@bobby</td>
</tr>
<tr>
<th>3</th>
<td>Eve</td>
<td>Cooking</td>
<td>@eve</td>
</tr>
<tr>
<th>4</th>
<td>Trudy</td>
<td>Running</td>
<td>@trudy</td>
</tr>
<tr>
<th>5</th>
<td>Max</td>
<td>Cycling</td>
<td>Mustermann</td>
</tr>
</tbody>
</table>
</section> <!-- /#simple-table -->
<section id="table-striped">
<h2>Striped Table</h2>
<p>You can also use <code>class="table-striped"</code> to have
a better distinction of the rows.
</p>
<pre><code>
<table class="table-striped">
...
</table>
</code></pre>
<p><strong>Example:</strong></p>
<table class="table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Hobby</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Alice</td>
<td>Climbing</td>
<td>@wonderland</td>
</tr>
<tr>
<th>2</th>
<td>Bob</td>
<td>Walking</td>
<td>@bobby</td>
</tr>
<tr>
<th>3</th>
<td>Eve</td>
<td>Cooking</td>
<td>@eve</td>
</tr>
<tr>
<th>4</th>
<td>Trudy</td>
<td>Running</td>
<td>@trudy</td>
</tr>
<tr>
<th>5</th>
<td>Max</td>
<td>Cycling</td>
<td>Mustermann</td>
</tr>
</tbody>
</table>
</section> <!-- /#striped-table -->
</div>
</article> <!-- /#table -->
<article id="form">
<div class="container">
<h1>Form</h1>
<p>The <a href="https://github.com/style-cheat/css/blob/master/src/modules/_form.sass">form module</a>
is adding some styling to forms to make them easier to setup and more
usable on mobile devices.
</p>
<pre><code>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
<input class="button bg-success" type="submit" value="Submit">
<input class="button bg-alert" type="reset" value="Reset">
</form>
</code></pre>
<p><strong>Example:</strong></p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
<input class="button bg-success" type="submit" value="Submit">
<input class="button bg-alert" type="reset" value="Reset">
</form>
</div>
</article> <!-- /#form -->
<article id="link">
<div class="container">
<h1>Link</h1>
<p>The <a href="https://github.com/style-cheat/css/blob/master/src/modules/_link.sass">link module</a>
provides some link decoration.
</p>
<pre><code>
<a href="https://duckduckgo.com">Link to duckduckgo</a>
</code></pre>
<p><strong>Example:</strong></p>
<p><a href="https://duckduckgo.com">Link to duckduckgo</a></p>
</div>
</article> <!-- /#link -->
<article id="decoration">
<div class="container">
<h1>Decoration</h1>
<p>The <a href="https://github.com/style-cheat/css/blob/master/src/modules/_decoration.sass">decoration module</a>
provides some handy classes to decorate your page.
</p>
<section id="decoration-colors">
<h2>Decoration Colors</h2>
<p>You can colorize your text and elements with some prepared classes.</p>
<pre><code>
<!-- Colored Text -->
<p class="fg-alert">Some alert text!</p>
<!-- Colored Buttons -->
<a href="#" class="button bg-alert">Critical button</a>
<a href="#" class="button bg-success">Success button</a>
<!-- Colored Textboxes -->
<div class="text-box bg-warning">
<strong>Warning</strong>
<p>This is a warning information.</p>
</div>
</code></pre>
<p><strong>Example:</strong></p>
<p class="fg-alert">Some alert text!</p>
<a href="#" class="button bg-alert">Critical button</a>
<a href="#" class="button bg-success">Success button</a>
<div class="text-box bg-warning">
<strong>Warning</strong>
<p>This is a warning information.</p>
</div>
</section> <!-- /#decoration-colors -->
<section id="decoration-elements">
<h2>Decoration Elements</h2>
<p>The following elemements are handled as decoration.</p>
<pre><code>
<!-- horizontal line -->
<hr />
</code></pre>
<p><strong>Example:</strong></p>
<p>There is an <code><hr /></code> below.</p>
<hr />
<p>There is an <code><hr /></code> above</p>
</section> <!-- /#decoration-elements -->
</div>
</article> <!-- /#decoration -->
<article id="utility">
<div class="container">
<h1>Utility</h1>
<p>The <a href="https://github.com/style-cheat/css/blob/master/src/modules/_utility.sass">utility module</a>
provides some little helpers.
</p>
<section id="utility-float">
<h2>Float and Clearfix</h2>
<p>Floating content left or right is a very common scenario.</p>
<pre><code>
<p>Not floating</p>
<div class="clearfix">
<p class="float-left">Left floating</p>
<p class="float-right">Right floating</p>