-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
1272 lines (1256 loc) · 164 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><head><meta charset="utf-8"/><title>Basscss</title><meta name="description" content="Low-level CSS toolkit"/><meta name="author" content="Brent Jackson"/><meta name="keywords" content="atomic css, functional css, css, framework, oocss, basscss"/><meta name="viewport" content="width=device-width,initial-scale=1"/><style>*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,sans-serif;line-height:1.5;margin:0;color:#111;background-color:#fff}img{max-width:100%;height:auto}svg{max-height:100%}a{color:#07c}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25;margin-top:1em;margin-bottom:.5em}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1rem}h5{font-size:.875rem}h6{font-size:.75rem}blockquote,dl,ol,p,pre,ul{margin-top:1em;margin-bottom:1em}code,pre,samp{font-family:Roboto Mono,Source Code Pro,Menlo,Consolas,Liberation Mono,monospace}code,samp{padding:.125em}code,pre,samp{font-size:87.5%}pre{overflow:scroll}blockquote{font-size:1.25rem;font-style:italic;margin-left:0}hr{margin-top:1.5em;margin-bottom:1.5em;border:0;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#ccc}
.label{font-size:.875rem;font-weight:700;display:block;margin-bottom:.5rem}.input,.select{height:2.5rem}.input,.select,.textarea{font-family:inherit;font-size:inherit;display:block;width:100%;padding:.5rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:3px}
.hover-underline:hover,h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{text-decoration:underline}code{color:#07c;background-image:linear-gradient(transparent,transparent 87.5%,rgba(0,119,204,.125) 0)}pre{padding-left:1rem;border-left:3px solid rgba(0,0,0,.0625)}.MarkedExample-rendered *{border-color:#ccc}.palatino{font-family:Palatino,Georgia,serif}@media screen and (min-width:64em){.lg-px4{padding-left:4rem;padding-right:4rem}}.MarkedExample .fixed{position:relative}.Prose h2{margin-top:3rem}td,th{border-bottom:1px solid rgba(0,0,0,.0625)}.color-inherit{color:inherit}.border-thick{border-width:3px}.border-darken{border-color:rgba(0,0,0,.0625)}.border-gray{border-color:#ccc}.black{color:#111}.white{color:#fff}.blue{color:#07c}.gray{color:#ccc}.darken{color:rgba(0,0,0,.0625)}.bg-black{background-color:#111}.bg-white{background-color:#fff}.bg-blue{background-color:#07c}.bg-gray{background-color:#ccc}.bg-darken{background-color:rgba(0,0,0,.0625)}table{border-collapse:separate;border-spacing:0;max-width:100%;width:100%}td,th{padding:.5em 0;line-height:inherit}th{text-align:left;font-weight:700;vertical-align:bottom}td{vertical-align:top}.btn{font-family:inherit;font-size:.875rem;font-weight:700;text-decoration:none;height:2.5em;margin:0;padding:.5em 1em;border:0;border-radius:3px;color:#fff;background-color:#07c}.btn:hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,.25)}.measure{max-width:36em;outline:1px solid tomato}
/*! Basscss | http://basscss.com | MIT License */.h1{font-size:2rem}.h2{font-size:1.5rem}.h3{font-size:1.25rem}.h4{font-size:1rem}.h5{font-size:.875rem}.h6{font-size:.75rem}.font-family-inherit{font-family:inherit}.font-size-inherit{font-size:inherit}.text-decoration-none{text-decoration:none}.bold{font-weight:700}.regular{font-weight:400}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.break-word{word-wrap:break-word}.line-height-1{line-height:1}.line-height-2{line-height:1.125}.line-height-3{line-height:1.25}.line-height-4{line-height:1.5}.list-style-none{list-style:none}.underline{text-decoration:underline}.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.max-width-1{max-width:24rem}.max-width-2{max-width:32rem}.max-width-3{max-width:48rem}.max-width-4{max-width:64rem}.border-box{box-sizing:border-box}.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0,.mx0{margin-left:0}.mx0{margin-right:0}.my0{margin-top:0;margin-bottom:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1,.mx1{margin-left:.5rem}.mx1{margin-right:.5rem}.my1{margin-top:.5rem;margin-bottom:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2,.mx2{margin-left:1rem}.mx2{margin-right:1rem}.my2{margin-top:1rem;margin-bottom:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3,.mx3{margin-left:2rem}.mx3{margin-right:2rem}.my3{margin-top:2rem;margin-bottom:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4,.mx4{margin-left:4rem}.mx4{margin-right:4rem}.my4{margin-top:4rem;margin-bottom:4rem}.mxn1{margin-left:-.5rem;margin-right:-.5rem}.mxn2{margin-left:-1rem;margin-right:-1rem}.mxn3{margin-left:-2rem;margin-right:-2rem}.mxn4{margin-left:-4rem;margin-right:-4rem}.ml-auto{margin-left:auto}.mr-auto,.mx-auto{margin-right:auto}.mx-auto{margin-left:auto}.p0{padding:0}.pt0{padding-top:0}.pr0{padding-right:0}.pb0{padding-bottom:0}.pl0,.px0{padding-left:0}.px0{padding-right:0}.py0{padding-top:0;padding-bottom:0}.p1{padding:.5rem}.pt1{padding-top:.5rem}.pr1{padding-right:.5rem}.pb1{padding-bottom:.5rem}.pl1{padding-left:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.pt2{padding-top:1rem}.pr2{padding-right:1rem}.pb2{padding-bottom:1rem}.pl2{padding-left:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:2rem}.pt3{padding-top:2rem}.pr3{padding-right:2rem}.pb3{padding-bottom:2rem}.pl3{padding-left:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-left:2rem;padding-right:2rem}.p4{padding:4rem}.pt4{padding-top:4rem}.pr4{padding-right:4rem}.pb4{padding-bottom:4rem}.pl4{padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-left:4rem;padding-right:4rem}.col{float:left}.col,.col-right{box-sizing:border-box}.col-right{float:right}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}@media (min-width:40em){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.33333%}.sm-col-2{width:16.66667%}.sm-col-3{width:25%}.sm-col-4{width:33.33333%}.sm-col-5{width:41.66667%}.sm-col-6{width:50%}.sm-col-7{width:58.33333%}.sm-col-8{width:66.66667%}.sm-col-9{width:75%}.sm-col-10{width:83.33333%}.sm-col-11{width:91.66667%}.sm-col-12{width:100%}}@media (min-width:52em){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.33333%}.md-col-2{width:16.66667%}.md-col-3{width:25%}.md-col-4{width:33.33333%}.md-col-5{width:41.66667%}.md-col-6{width:50%}.md-col-7{width:58.33333%}.md-col-8{width:66.66667%}.md-col-9{width:75%}.md-col-10{width:83.33333%}.md-col-11{width:91.66667%}.md-col-12{width:100%}}@media (min-width:64em){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.33333%}.lg-col-2{width:16.66667%}.lg-col-3{width:25%}.lg-col-4{width:33.33333%}.lg-col-5{width:41.66667%}.lg-col-6{width:50%}.lg-col-7{width:58.33333%}.lg-col-8{width:66.66667%}.lg-col-9{width:75%}.lg-col-10{width:83.33333%}.lg-col-11{width:91.66667%}.lg-col-12{width:100%}}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}@media (min-width:40em){.sm-flex{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (min-width:52em){.md-flex{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (min-width:64em){.lg-flex{display:-webkit-box;display:-ms-flexbox;display:flex}}.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.items-start{-webkit-box-align:start;-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start}.items-end{-webkit-box-align:end;-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end}.items-center{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.items-baseline{-webkit-box-align:baseline;-ms-flex-align:baseline;-ms-grid-row-align:baseline;align-items:baseline}.items-stretch{-webkit-box-align:stretch;-ms-flex-align:stretch;-ms-grid-row-align:stretch;align-items:stretch}.self-start{-ms-flex-item-align:start;align-self:flex-start}.self-end{-ms-flex-item-align:end;align-self:flex-end}.self-center{-ms-flex-item-align:center;align-self:center}.self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.self-stretch{-ms-flex-item-align:stretch;align-self:stretch}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.justify-around{-ms-flex-pack:distribute;justify-content:space-around}.content-start{-ms-flex-line-pack:start;align-content:flex-start}.content-end{-ms-flex-line-pack:end;align-content:flex-end}.content-center{-ms-flex-line-pack:center;align-content:center}.content-between{-ms-flex-line-pack:justify;align-content:space-between}.content-around{-ms-flex-line-pack:distribute;align-content:space-around}.content-stretch{-ms-flex-line-pack:stretch;align-content:stretch}.flex-auto{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;min-height:0}.flex-none{-webkit-box-flex:0;-ms-flex:none;flex:none}.order-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-last{-webkit-box-ordinal-group:100000;-ms-flex-order:99999;order:99999}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.border{border-style:solid;border-width:1px}.border-top{border-top-style:solid;border-top-width:1px}.border-right{border-right-style:solid;border-right-width:1px}.border-bottom{border-bottom-style:solid;border-bottom-width:1px}.border-left{border-left-style:solid;border-left-width:1px}.border-none{border:0}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.hide{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}@media (max-width:40em){.xs-hide{display:none!important}}@media (min-width:40em) and (max-width:52em){.sm-hide{display:none!important}}@media (min-width:52em) and (max-width:64em){.md-hide{display:none!important}}@media (min-width:64em){.lg-hide{display:none!important}}.display-none{display:none!important}
.hljs{-webkit-text-size-adjust:none}.diff .hljs-header,.hljs-comment,.hljs-javadoc{color:#aaa;font-style:italic}.css .rule .hljs-keyword,.hljs-keyword,.hljs-request,.hljs-status,.hljs-subst,.hljs-winutils,.nginx .hljs-title{color:#111;font-weight:700}.hljs-hexcolor,.hljs-number,.ruby .hljs-constant{color:#3d9970}.hljs-dartdoc,.hljs-phpdoc,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula{color:#0074d9}.hljs-id,.hljs-title,.scss .hljs-preprocessor{color:#0074d9;font-weight:700}.hljs-list .hljs-keyword,.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type,.tex .hljs-command,.vhdl .hljs-literal{color:#001f3f;font-weight:700}.django .hljs-tag .hljs-keyword,.hljs-rules .hljs-property,.hljs-tag,.hljs-tag .hljs-title{color:#001f3f;font-weight:400}.hljs-attribute,.hljs-regexp,.hljs-variable,.lisp .hljs-body{color:#3d9970}.clojure .hljs-keyword,.hljs-prompt,.hljs-symbol,.lisp .hljs-keyword,.ruby .hljs-symbol .hljs-string,.scheme .hljs-keyword,.tex .hljs-special{color:#b10dc9}.hljs-built_in{color:#001f3f}.hljs-cdata,.hljs-doctype,.hljs-pi,.hljs-pragma,.hljs-preprocessor,.hljs-shebang{color:#aaa;font-weight:700}.hljs-deletion{background:#f012be}.hljs-addition{background:#01ff70}.diff .hljs-change{background:#001f3f}.hljs-chunk{color:#ddd}</style><link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" type="text/css"/><link rel="icon" href="/images/0cb7a3e04e305ef915e64aa1a921ba05.png"/><link rel="apple-touch-icon-precomposed" href="/images/f48c400f6f1aa4b44cb2b7a8103291b9.png"/></head><body><div class=""><div class="px3 lg-px4"><header class="py4"><div class="flex flex-wrap items-center mt4"><div class=""><svg viewBox="0 0 32 32" width="48" height="48" fill="currentcolor"><path d="M 0.315455101251475 17.607114386689492 L 9.25 8.511067019790897 L 22.75 18.511067019790897 L 31.684544898748523 14.392885613310508 L 22.75 23.488932980209103 L 9.25 13.488932980209103 L 0.315455101251475 17.607114386689492"></path></svg><h1 class="m0">Basscss <span class="h5">v8.0.2</span></h1><p class="h3 mt1 mb1">Low-Level CSS Toolkit <span class="h6 bold caps">2.13 KB</span></p><div class="flex flex-wrap items-center mb2"><a href="https://travis-ci.org/basscss/basscss" class="my1"><img src="https://travis-ci.org/basscss/basscss.svg" class="block" alt="Build Status"/></a><div class="inline-block" style="width:16px;"></div><div class="my1" style="height:20px;"><a href="https://twitter.com/share" class="twitter-share-button" data-text="Basscss: Low-Level CSS Toolkit" data-url="http://basscss.com" data-via="basscss">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document, "script", "twitter-wjs");</script></div><div class="inline-block" style="width:16px;"></div><iframe src="//ghbtns.com/github-btn.html?user=basscss&repo=basscss&type=star&count=true" class="my1" frameborder="0" scrolling="0" width="96px" height="20px"></iframe></div></div><div class="flex-auto"></div><div><style> #carbonads { display: inline-block; font-size: 14px; line-height: 1.25; text-align: left; } #carbonads a, #carbonads a:hover { text-decoration: none; color: inherit; } #carbonads span { display: block } #carbonads > span::before, #carbonads > span::after { content: ''; display: table; } #carbonads > span::after { clear: both; } .carbon-img { float: left; margin-right: .5em; } .carbon-img > img { display: block } .carbon-text { overflow: hidden } .carbon-poweredby { float: left; margin-top: .25em; opacity: 0.5; } @media (min-width: 40em) { #carbonads { max-width: 320px; } } </style><script async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=basscsscom" id="_carbonads_js"></script></div></div></header><nav id="nav" class="pl2 my2 border-left border-thick border-darken" style="max-width:768px;"><div class="mxn2 flex flex-wrap "><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#getting-started" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Getting Started</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-type-scale" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Type Scale</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-typography" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Typography</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-layout" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Layout</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-align" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Align</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-margin" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Margin</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-padding" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Padding</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-position" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Position</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-grid" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Grid</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-flexbox" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Flexbox</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-border" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Border</a></div><div class="px2 col-6 sm-col-4 md-col-3 "><a href="#basscss-hide" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Hide</a></div></div></nav><section id="features" class="py4"><h2 class="h1"><a href="#features" class="color-inherit text-decoration-none hover-underline">Lightning Fast Modular CSS with No Side Effects</a></h2><div class="mxn2 flex flex-wrap "><div class="px2 col-12 sm-col-6 md-col-4 "><h3>Code with Confidence</h3><p>Using clear, humanized naming conventions, Basscss is quick to internalize and easy to reason about while speeding up development time with more scalable, more readable code.</p></div><div class="px2 col-12 sm-col-6 md-col-4 "><h3>No Side Effects</h3><p>Things behave exactly as expected with immutable utilities and styles that do one thing well to help prevent common pitfalls with CSS.</p></div><div class="px2 col-12 sm-col-6 md-col-4 "><h3>Composable</h3><p>Reusable, interoperable styles work like building blocks to lay the foundation for any stylesheet and can be mixed and matched in any number of combinations.</p></div><div class="px2 col-12 sm-col-6 md-col-4 "><h3>Designed for Design</h3><p>Basscss strikes a balance between consistency and flexibility to allow for rapid prototyping and quick iterative changes when designing in the browser.</p></div><div class="px2 col-12 sm-col-6 md-col-4 "><h3>Responsive by Default</h3><p>Basscss provides lightweight, performant styles and flexible utilities to design for any device and to help reduce boilerplate in stylesheets.</p></div><div class="px2 col-12 sm-col-6 md-col-4 "><h3>Unassuming</h3><p>Modular and customizable typography and layout styles don’t dictate what things should look like and play well with other stylesheets and frameworks.</p></div></div></section><section id="testimonials" class="py4"><div class="mxn2 flex flex-wrap "><div class="px2 col-12 sm-col-6 md-col-4 "><blockquote class="m0 mb2"><p class="palatino mb0">“Basscss is an atomic class based CSS library... A very good one! But I really hated it at the time. But I don’t hate it anymore!”</p><cite class="h5"><a href="https://medium.com/buzzfeed-design/how-i-learned-to-stop-worrying-and-love-the-atomic-class-98d6ccc45781#.yqnsfkbx2" class="color-inherit text-decoration-none">– Sam Thurman</a></cite></blockquote></div><div class="px2 col-12 sm-col-6 md-col-4 "><blockquote class="m0 mb2"><p class="palatino mb0">“I used Basscss for http://nodeconf.com and it was such a pleasure to work with. I think I’ll use it for my personal site too!”</p><cite class="h5"><a href="https://twitter.com/fox/status/572441586983936000" class="color-inherit text-decoration-none">– Karolina Szczur</a></cite></blockquote></div><div class="px2 col-12 sm-col-6 md-col-4 "><blockquote class="m0 mb2"><p class="palatino mb0">“Writing CSS is easy. Writing long lived maintainable CSS in a real webapp is hard. Until Jon Gold introduced me to [Basscss]”</p><cite class="h5"><a href="https://twitter.com/joewalnes/status/668126388499574784" class="color-inherit text-decoration-none">– Joe Walnes</a></cite></blockquote></div><div class="px2 col-12 sm-col-6 md-col-4 "><blockquote class="m0 mb2"><p class="palatino mb0">“Basscss is so good it’s worth losing sleep over tonight.”</p><cite class="h5"><a href="https://twitter.com/303/status/622293670583087104" class="color-inherit text-decoration-none">– Justin Maxwell</a></cite></blockquote></div><div class="px2 col-12 sm-col-6 md-col-4 "><blockquote class="m0 mb2"><p class="palatino mb0">“Probably does everything you use Bootstrap for, but in 3.5kb”</p><cite class="h5"><a href="https://twitter.com/problogdesign/status/621730043920785408" class="color-inherit text-decoration-none">– Michael Martin</a></cite></blockquote></div><div class="px2 col-12 sm-col-6 md-col-4 "><blockquote class="m0 mb2"><p class="palatino mb0">“Been using Basscss to rapidly prototype ideas for BuzzFeed. So good.”</p><cite class="h5"><a href="https://twitter.com/cap/status/571511244835840000" class="color-inherit text-decoration-none">– Cap Watkins</a></cite></blockquote></div></div></section><div class="max-width-4 mx-auto mb4"><section id="getting-started" class="py4"><h2 class="h1"><a href="#getting-started" class="color-inherit text-decoration-none hover-underline">Getting Started</a></h2><pre>npm install basscss@8.0.2</pre><p>Or use the <a href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" class="" target="_blank">CDN Link</a></p><pre><link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet"></pre></section><div class=""><section id="basscss-type-scale" class="py4"><h2 class="h1"><a href="#basscss-type-scale" class="color-inherit text-decoration-none hover-underline">Type Scale</a></h2><div class="Prose"><p>This module provides utilities for adjusting font-size.</p>
<p>The <code>.h1</code> – <code>.h6</code> font-size utilities can be used to override an element’s default size.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<p class="h1">Pastrami 1</p>
<p class="h2">Pastrami 2</p>
<p class="h3">Pastrami 3</p>
<p class="h4">Pastrami 4</p>
<p class="h5">Pastrami 5</p>
<p class="h6">Pastrami 6</p>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"h1"</span>></span>Pastrami 1<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"h2"</span>></span>Pastrami 2<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"h3"</span>></span>Pastrami 3<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"h4"</span>></span>Pastrami 4<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"h5"</span>></span>Pastrami 5<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"h6"</span>></span>Pastrami 6<span class="hljs-tag"></<span class="hljs-title">p</span>></span></pre>
</div>
<p>These are especially useful for altering the visual appearance of semantically correct headings.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<h2 class="h1">Larger than default h2 style, but semantically correct</h2>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">h2</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"h1"</span>></span>Larger than default h2 style, but semantically correct<span class="hljs-tag"></<span class="hljs-title">h2</span>></span></pre>
</div>
</div><div class="right-align"><a href="#" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Top</a></div></section><section id="basscss-typography" class="py4"><h2 class="h1"><a href="#basscss-typography" class="color-inherit text-decoration-none hover-underline">Typography</a></h2><div class="Prose"><p>Change typographic weights, styles, and alignment with these utility styles.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<p class="bold">Bold</p>
<p class="regular">Regular</p>
<p class="italic">Italic</p>
<p class="caps">Caps</p>
<p class="left-align">Left align</p>
<p class="center">Center</p>
<p class="right-align">Right align</p>
<p class="justify">Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
<p class="nowrap">No wrap</p>
<p class="underline">Underline</p>
<p class="truncate">Truncate</p>
<p class="font-family-inherit">Font Family Inherit</p>
<p class="font-size-inherit">Font Size Inherit</p>
<a class="text-decoration-none">Text Decoration None</a>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"bold"</span>></span>Bold<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"regular"</span>></span>Regular<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"italic"</span>></span>Italic<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"caps"</span>></span>Caps<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"left-align"</span>></span>Left align<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"center"</span>></span>Center<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"right-align"</span>></span>Right align<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"justify"</span>></span>Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nowrap"</span>></span>No wrap<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"underline"</span>></span>Underline<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"truncate"</span>></span>Truncate<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"font-family-inherit"</span>></span>Font Family Inherit<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"font-size-inherit"</span>></span>Font Size Inherit<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-decoration-none"</span>></span>Text Decoration None<span class="hljs-tag"></<span class="hljs-title">a</span>></span></pre>
</div>
<h2 id="lists">Lists</h2>
<p>To remove default list styling, use <code>.list-reset</code>.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<ul class="list-reset">
<li>List Reset</li>
<li>Removes bullets</li>
<li>Removes numbers</li>
<li>Removes padding</li>
</ul>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"list-reset"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>List Reset<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Removes bullets<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Removes numbers<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>Removes padding<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span></pre>
</div>
<p>To set lists inline, use utilities.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<ul class="list-reset">
<li class="inline-block mr1">Half-Smoke</li>
<li class="inline-block mr1">Kielbasa</li>
<li class="inline-block mr1">Bologna</li>
<li class="inline-block mr1">Prosciutto</li>
</ul>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"list-reset"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inline-block mr1"</span>></span>Half-Smoke<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inline-block mr1"</span>></span>Kielbasa<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inline-block mr1"</span>></span>Bologna<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inline-block mr1"</span>></span>Prosciutto<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span></pre>
</div>
</div><div class="right-align"><a href="#" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Top</a></div></section><section id="basscss-layout" class="py4"><h2 class="h1"><a href="#basscss-layout" class="color-inherit text-decoration-none hover-underline">Layout</a></h2><div class="Prose"><p>Change the default document flow with these display, float, and other utilities.</p>
<h2 id="display">Display</h2>
<p>To adjust the display of an element, use the <code>.block</code>, <code>.inline</code>, <code>.inline-block</code>, <code>.table</code>, and <code>.table-cell</code> utilities.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="inline">inline</div>
<div class="inline-block">inline-block</div>
<a href="#" class="block">block</a>
<div class="table">
<div class="table-cell">table-cell</div>
<div class="table-cell">table-cell</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inline"</span>></span>inline<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inline-block"</span>></span>inline-block<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"block"</span>></span>block<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table-cell"</span>></span>table-cell<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table-cell"</span>></span>table-cell<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="overflow">Overflow</h2>
<p>To adjust element overflow, use <code>.overflow-hidden</code>, <code>.overflow-scroll</code>, and <code>.overflow-auto</code>.
<code>.overflow-hidden</code> can also be used to create a new block formatting context or clear floats.</p>
<h2 id="floats">Floats</h2>
<p>Use <code>.clearfix</code>, <code>.left</code>, and <code>.right</code> to clear and set floats.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix border">
<div class="left border">.left</div>
<div class="right border">.right</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"left border"</span>></span>.left<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"right border"</span>></span>.right<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="max-width">Max Width</h2>
<p>Use <code>.fit</code> to set max-width 100%.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="col-3">
<img class="fit" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder.svg" />
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fit"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder.svg"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>Use max-width utilities to control the width of containers.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<p class="max-width-1">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
<p class="max-width-2">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
<p class="max-width-3">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
<p class="max-width-4">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"max-width-1"</span>></span>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"max-width-2"</span>></span>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"max-width-3"</span>></span>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"max-width-4"</span>></span>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.<span class="hljs-tag"></<span class="hljs-title">p</span>></span></pre>
</div>
<h2 id="box-sizing-border-box">Box-Sizing Border-Box</h2>
<p>Use <code>.border-box</code> to set box-sizing border-box per element.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="col-6 p2 border-box border">.border-box</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-6 p2 border-box border"</span>></span>.border-box<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="media-object">Media Object</h2>
<p>Create a media object using basic utilities.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix mb2 border">
<div class="left p2 mr1 border">Image</div>
<div class="overflow-hidden">
<p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix mb2 border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"left p2 mr1 border"</span>></span>Image<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"overflow-hidden"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">b</span>></span>Body<span class="hljs-tag"></<span class="hljs-title">b</span>></span> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="double-sided-media-object">Double-Sided Media Object</h2>
<p>For a container with a flexible center, use a double-sided media object.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix mb2 border">
<div class="left p2 mr1 border">Image</div>
<div class="right p2 ml1 border">Image</div>
<div class="overflow-hidden">
<p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix mb2 border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"left p2 mr1 border"</span>></span>Image<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"right p2 ml1 border"</span>></span>Image<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"overflow-hidden"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"><<span class="hljs-title">b</span>></span>Body<span class="hljs-tag"></<span class="hljs-title">b</span>></span> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
</div><div class="right-align"><a href="#" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Top</a></div></section><section id="basscss-align" class="py4"><h2 class="h1"><a href="#basscss-align" class="color-inherit text-decoration-none hover-underline">Align</a></h2><div class="Prose"><p>Adjust vertical alignment with these utilities.</p>
<p>To adjust the alignment of an element, use <code>.align-baseline</code>, <code>.align-top</code>, <code>.align-middle</code> or <code>.align-bottom</code>.
The vertical-align property only applies to inline or table-cell boxes.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="overflow-auto">
<div class="table">
<div class="table-cell"><h1>Hamburger</h1></div>
<div class="table-cell align-baseline">.align-baseline</div>
<div class="table-cell align-top">.align-top</div>
<div class="table-cell align-middle">.align-middle</div>
<div class="table-cell align-bottom">.align-bottom</div>
</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"overflow-auto"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table-cell"</span>></span><span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table-cell align-baseline"</span>></span>.align-baseline<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table-cell align-top"</span>></span>.align-top<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table-cell align-middle"</span>></span>.align-middle<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table-cell align-bottom"</span>></span>.align-bottom<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
</div><div class="right-align"><a href="#" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Top</a></div></section><section id="basscss-margin" class="py4"><h2 class="h1"><a href="#basscss-margin" class="color-inherit text-decoration-none hover-underline">Margin</a></h2><div class="Prose"><p>Immutable margin utilities are based on a global white space scale defined with custom properties.
These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.</p>
<h2 id="naming-convention">Naming Convention</h2>
<p>Due to the ubiquitous nature of setting margin,
these utilities use a shorthand naming convention.</p>
<div class="overflow-scroll">
<table class="mb2 table-flush table-light">
<thead>
<tr> <th>Shorthand</th> <th>Description</th> </tr>
</thead>
<tbody>
<tr> <td>m</td> <td>Margin</td> </tr>
<tr> <td>t</td> <td>Top</td> </tr>
<tr> <td>r</td> <td>Right</td> </tr>
<tr> <td>b</td> <td>Bottom</td> </tr>
<tr> <td>l</td> <td>Left</td> </tr>
<tr> <td>x</td> <td>X-axis (left and right)</td> </tr>
<tr> <td>y</td> <td>Y-axis (top and bottom)</td> </tr>
<tr> <td>n</td> <td>Negative</td> </tr>
<tr> <td>0</td> <td>0 reset</td> </tr>
<tr> <td>1</td> <td>--space-1 (default .5rem)</td> </tr>
<tr> <td>2</td> <td>--space-2 (default 1rem)</td> </tr>
<tr> <td>3</td> <td>--space-3 (default 2rem)</td> </tr>
<tr> <td>4</td> <td>--space-4 (default 4rem)</td> </tr>
</tbody>
</table>
</div>
<p>Change or reset default margins using the white space scale.
Negative x-axis margins are used to offset margins and padding of child elements.
Margin auto is used to horizontally center block-level elements with a set width.</p>
<pre><span class="hljs-class">.m0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.mt0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.mr0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.mb0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.ml0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.mx0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.my0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.m1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.mt1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.mr1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.mb1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.ml1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.mx1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.my1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.m2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.mt2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.mr2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.mb2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.ml2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.mx2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.my2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.m3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.mt3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.mr3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.mb3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.ml3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.mx3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.my3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.m4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.mt4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.mr4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.mb4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.ml4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.mx4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.my4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.mxn1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">-var</span>(--space-<span class="hljs-number">1</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">-var</span>(--space-<span class="hljs-number">1</span>)</span></span>; }</span>
<span class="hljs-class">.mxn2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">-var</span>(--space-<span class="hljs-number">2</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">-var</span>(--space-<span class="hljs-number">2</span>)</span></span>; }</span>
<span class="hljs-class">.mxn3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">-var</span>(--space-<span class="hljs-number">3</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">-var</span>(--space-<span class="hljs-number">3</span>)</span></span>; }</span>
<span class="hljs-class">.mxn4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-function">-var</span>(--space-<span class="hljs-number">4</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> <span class="hljs-function">-var</span>(--space-<span class="hljs-number">4</span>)</span></span>; }</span>
<span class="hljs-class">.ml-auto</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> auto </span></span></span>}
<span class="hljs-class">.mr-auto</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> auto </span></span></span>}
<span class="hljs-class">.mx-auto</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> auto</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> auto</span></span>; }</span></pre><h2 id="resetting-margins">Resetting Margins</h2>
<p>To increase information density and to better align elements, remove default margins from typographic elements
using the margin utilities.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<h1 class="m0">No margin</h1>
<h1 class="mt0">No margin top</h1>
<h1 class="mb0">No margin bottom</h1>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"m0"</span>></span>No margin<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"mt0"</span>></span>No margin top<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"mb0"</span>></span>No margin bottom<span class="hljs-tag"></<span class="hljs-title">h1</span>></span></pre>
</div>
<h2 id="add-spacing">Add Spacing</h2>
<p>Add spacing around elements using a combination of margin utilities.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="mxn1">
<div class="m1">Hamburger</div>
<div class="m1">Hamburger</div>
<div class="m1">Hamburger</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"mxn1"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"m1"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"m1"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"m1"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>The negative margin utilities also work with padded children.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="border">
<div class="mxn2">
<div class="px2 border">Padded div</div>
</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"mxn2"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"px2 border"</span>></span>Padded div<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="center-elements">Center Elements</h2>
<p>Block elements with a set width can be centered with <code>.mx-auto</code>.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<img src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg"
width="96"
height="96"
class="block mx-auto" />
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg"</span>
<span class="hljs-attribute">width</span>=<span class="hljs-value">"96"</span>
<span class="hljs-attribute">height</span>=<span class="hljs-value">"96"</span>
<span class="hljs-attribute">class</span>=<span class="hljs-value">"block mx-auto"</span> /></span></pre>
</div>
<h2 id="space-flexbox-items">Space Flexbox Items</h2>
<p>The <code>.ml-auto</code> and <code>.mr-auto</code> utilities can be used to add spacing around flexbox items.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="flex">
<div class="ml-auto">Hamburger</div>
<div>Hot Dog</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"ml-auto"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p><span class="red">Margins should never be declared outside of these utilities.</span>
This is meant to help create consistency and avoid magic numbers.
If, for some reason, the default white space scale does not suit your design,
customize and extend it before using it.</p>
</div><div class="right-align"><a href="#" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Top</a></div></section><section id="basscss-padding" class="py4"><h2 class="h1"><a href="#basscss-padding" class="color-inherit text-decoration-none hover-underline">Padding</a></h2><div class="Prose"><p>Immutable padding utilities are based on a global white space scale defined with custom properties.
These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.</p>
<h2 id="naming-convention">Naming Convention</h2>
<p>Due to the ubiquitous nature of setting padding,
these utilities use a shorthand naming convention.</p>
<div class="overflow-scroll">
<table class="mb2 table-flush table-light">
<thead>
<tr> <th>Shorthand</th> <th>Description</th> </tr>
</thead>
<tbody>
<tr> <td>p</td> <td>Padding</td> </tr>
<tr> <td>t</td> <td>Top</td> </tr>
<tr> <td>r</td> <td>Right</td> </tr>
<tr> <td>b</td> <td>Bottom</td> </tr>
<tr> <td>l</td> <td>Left</td> </tr>
<tr> <td>x</td> <td>X-axis (left and right)</td> </tr>
<tr> <td>y</td> <td>Y-axis (top and bottom)</td> </tr>
<tr> <td>n</td> <td>Negative (margin only)</td> </tr>
<tr> <td>0</td> <td>0 reset</td> </tr>
<tr> <td>1</td> <td>--space-1 (default .5rem)</td> </tr>
<tr> <td>2</td> <td>--space-2 (default 1rem)</td> </tr>
<tr> <td>3</td> <td>--space-3 (default 2rem)</td> </tr>
<tr> <td>4</td> <td>--space-4 (default 4rem)</td> </tr>
</tbody>
</table>
</div>
<p>Padding utilities are only available in symmetrical orientations.
This is to normalize the spacing used around elements and maintain a consistent visual rhythm.</p>
<pre><span class="hljs-class">.p0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.pt0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.pr0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.pb0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.pl0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.px0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.py0</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-number">0</span> </span></span></span>}
<span class="hljs-class">.p1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.pt1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.pr1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.pb1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.pl1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.py1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.px1</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">1</span>) </span></span></span>}
<span class="hljs-class">.p2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.pt2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.pr2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.pb2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.pl2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.py2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.px2</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">2</span>) </span></span></span>}
<span class="hljs-class">.p3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.pt3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.pr3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.pb3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.pl3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.py3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.px3</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">3</span>) </span></span></span>}
<span class="hljs-class">.p4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.pt4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.pr4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.pb4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.pl4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.py4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}
<span class="hljs-class">.px4</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>)</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--space-<span class="hljs-number">4</span>) </span></span></span>}</pre><h2 id="box">Box</h2>
<p>To create a simple box component, use padding along with color utilities.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="p2 bg-white border rounded">
A simple box
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"p2 bg-white border rounded"</span>></span>
A simple box
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="overflow-hidden border rounded">
<div class="p2 bold white bg-blue">
Panel Header
</div>
<div class="p2">
Panel Body
</div>
<div class="p2 bg-silver">
Panel Footer
</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"overflow-hidden border rounded"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"p2 bold white bg-blue"</span>></span>
Panel Header
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"p2"</span>></span>
Panel Body
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"p2 bg-silver"</span>></span>
Panel Footer
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p><span class="red">Padding should never be declared outside of these utilities.</span>
This is meant to help create consistency and avoid magic numbers.
If, for some reason, the default white space scale does not suit your design, customize and extend it before use.</p>
</div><div class="right-align"><a href="#" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Top</a></div></section><section id="basscss-position" class="py4"><h2 class="h1"><a href="#basscss-position" class="color-inherit text-decoration-none hover-underline">Position</a></h2><div class="Prose"><p>This module includes basic positioning utilities to alter the default document flow.</p>
<p class="red">Use positions with caution. They are often unnecessary and commonly misused.</p>
<p>Use <code>.relative</code> to create a new stacking context.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="relative">
<div>Hamburger</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"relative"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>Use <code>.absolute</code> to move elements out of the default document flow.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="relative mb4">
<div>Hamburger</div>
<div class="absolute bg-white border rounded">
<a href="#" class="block p1">Dropdown Action</a>
<a href="#" class="block p1">Action</a>
</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"relative mb4"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"absolute bg-white border rounded"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"block p1"</span>></span>Dropdown Action<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"block p1"</span>></span>Action<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>Use <code>.fixed</code> to position an element relative to the viewport. Fixed positioning is notoriously tricky to use well and can lead to inaccessible content and unwanted side effects. Use fixed positioning with caution.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="fixed">
Hamburger
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fixed"</span>></span>
Hamburger
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p><em>Note: fixed positioning has been disabled here for demonstration only.</em></p>
<p>To anchor to a particular side, use <code>.top-0</code>, <code>.right-0</code>, <code>.bottom-0</code>, or <code>.left-0</code>. Margin and padding utilities can be used to space elements apart.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="fixed top-0 right-0 m2">
Hamburger
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fixed top-0 right-0 m2"</span>></span>
Hamburger
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To fill an entire width or height, use opposing directions.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="fixed top-0 left-0 right-0 p2 white bg-black">
Fixed bar
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fixed top-0 left-0 right-0 p2 white bg-black"</span>></span>
Fixed bar
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To ensure the desired stacking order, use z-index utilities.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="fixed z2 top-0 left-0 right-0 p2 white bg-black">
Fixed bar
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fixed z2 top-0 left-0 right-0 p2 white bg-black"</span>></span>
Fixed bar
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
</div><div class="right-align"><a href="#" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Top</a></div></section><section id="basscss-grid" class="py4"><h2 class="h1"><a href="#basscss-grid" class="color-inherit text-decoration-none hover-underline">Grid</a></h2><div class="Prose"><p>This module contains responsive float and width utilities to create a variety of grid layouts.
Use this module in combination with layout, white space, and other utilities.</p>
<p>Start by using a <code>.clearfix</code> container.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix">
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix"</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To optionally set a max-width, use a utility from the basscss-layout module.
The <code>.mx-auto</code> utility sets margin left and right auto to center the container.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="max-width-4 mx-auto">
<div class="clearfix">
</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"max-width-4 mx-auto"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix"</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>Float columns using the <code>.col</code> style. This also sets box-sizing border-box for each column.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix border">
<div class="col border">.col</div>
<div class="col border">.col</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col border"</span>></span>.col<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col border"</span>></span>.col<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>Add column width utilities. The total column-width number should add up to 12.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix border">
<div class="col col-6 border">.col.col-6</div>
<div class="col col-6 border">.col.col-6</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col col-6 border"</span>></span>.col.col-6<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col col-6 border"</span>></span>.col.col-6<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="responsive-grid">Responsive Grid</h2>
<p>Use breakpoint-prefixed column utilities to change the grid at different screen widths.</p>
<p>All breakpoint-based styles in Basscss follow the same naming convention.</p>
<div class="overflow-auto">
<table class="mb2 table-flush table-light">
<thead>
<tr> <th>Prefix</th> <th>Description</th> </tr>
</thead>
<tbody>
<tr> <td>(no prefix)</td> <td>Not scoped to a breakpoint</td> </tr>
<tr> <td>sm-</td> <td>--breakpoint-sm (default: min-width 40em)</td> </tr>
<tr> <td>md-</td> <td>--breakpoint-md (default: min-width 52em)</td> </tr>
<tr> <td>lg-</td> <td>--breakpoint-lg (default: min-width 64em)</td> </tr>
</tbody>
</table>
</div>
<p>Apply the grid from the small breakpoint and up with the <code>.sm-col</code> and <code>.sm-col-6</code> utilities.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix border">
<div class="sm-col sm-col-6 border">.sm-col.sm-col-6</div>
<div class="sm-col sm-col-6 border">.sm-col.sm-col-6</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sm-col sm-col-6 border"</span>></span>.sm-col.sm-col-6<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sm-col sm-col-6 border"</span>></span>.sm-col.sm-col-6<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>Add width adjustments for larger breakpoints. Resize the viewport width of the browser to see the effect.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix border">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 border">.sm-col.sm-col-6.md-col-5.lg-col-4</div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8 border">.sm-col.sm-col-6.md-col-7.lg-col-8</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sm-col sm-col-6 md-col-5 lg-col-4 border"</span>></span>.sm-col.sm-col-6.md-col-5.lg-col-4<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sm-col sm-col-6 md-col-7 lg-col-8 border"</span>></span>.sm-col.sm-col-6.md-col-7.lg-col-8<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="gutters">Gutters</h2>
<p>Use padding and negative margin utilities to create gutters based on the white space scale.
The negative margin ensures content inside each column lines up with content outside of the grid.
When using negative margin, be sure to compensate for the extra width created
with a padded parent element or by using overflow hidden.
Otherwise, horizontal scrolling may occur.</p>
<p>Create gutters with a width of 2 units using <code>.mxn2</code> and <code>.px2</code>.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix mxn2 border">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div class="border">.px2</div></div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8 px2"><div class="border">.px2</div></div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix mxn2 border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sm-col sm-col-6 md-col-5 lg-col-4 px2"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>.px2<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sm-col sm-col-6 md-col-7 lg-col-8 px2"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>.px2<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>For larger or smaller gutters, use any other step on the white space scale.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix mxn1 border">
<div class="col col-6 px1"><div class="border">.px1</div></div>
<div class="col col-6 px1"><div class="border">.px1</div></div>
</div>
<div class="clearfix mxn3 border">
<div class="col col-6 px3"><div class="border">.px3</div></div>
<div class="col col-6 px3"><div class="border">.px3</div></div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix mxn1 border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col col-6 px1"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>.px1<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col col-6 px1"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>.px1<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix mxn3 border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col col-6 px3"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>.px3<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col col-6 px3"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>.px3<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="nesting">Nesting</h2>
<p>Nest entire grid structures within columns to created nested grids.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix mxn2 border">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div class="border">Unnested</div></div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8 px2">
<div class="clearfix mxn2">
<div class="col col-6 px2"><div class="border">Nested</div></div>
<div class="col col-6 px2"><div class="border">Nested</div></div>
</div>
</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix mxn2 border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sm-col sm-col-6 md-col-5 lg-col-4 px2"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Unnested<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sm-col sm-col-6 md-col-7 lg-col-8 px2"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix mxn2"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col col-6 px2"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Nested<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col col-6 px2"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Nested<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="reversed">Reversed</h2>
<p>To reverse the order of columns, use the <code>.col-right</code> class to float columns right.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix border">
<div class="col-right col-6 border">.col-right.col-6</div>
<div class="col col-6 border">.col.col-6</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-right col-6 border"</span>></span>.col-right.col-6<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col col-6 border"</span>></span>.col.col-6<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="centering-columns">Centering Columns</h2>
<p>Use the <code>.mx-auto</code> class to center columns within their containers.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix mxn2 border">
<div class="col-8 px2 mx-auto">
<div class="border">Centered Column</div>
</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix mxn2 border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-8 px2 mx-auto"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Centered Column<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="breakpoint-based-floats">Breakpoint Based Floats</h2>
<p>Column float utilities can be used independently of width utilities to control floating at different breakpoints.
This example demonstrates a responsive media object.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="clearfix border">
<div class="sm-col p2 border">.sm-col</div>
<div class="overflow-hidden border">.overflow-hidden</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"clearfix border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sm-col p2 border"</span>></span>.sm-col<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"overflow-hidden border"</span>></span>.overflow-hidden<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<h2 id="width-utilities">Width Utilities</h2>
<p>Column width utilities can also be used independently to add percentage based widths to any block or inline-block element.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="border">
<div class="right sm-col-6 md-col-4 p2 border">.sm-col-6.md-col-4</div>
<p>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"right sm-col-6 md-col-4 p2 border"</span>></span>.sm-col-6.md-col-4<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
</div><div class="right-align"><a href="#" class="h6 caps bold inline-block py1 color-inherit text-decoration-none hover-underline">Top</a></div></section><section id="basscss-flexbox" class="py4"><h2 class="h1"><a href="#basscss-flexbox" class="color-inherit text-decoration-none hover-underline">Flexbox</a></h2><div class="Prose"><p>These flexbox-based utilities can replace the need for a grid system in many instances, and provide powerful constraint-based micro-layout solutions.
To learn more about the flexbox module, see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> and the <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Specification</a>.</p>
<p>To set a container to display flex, add the <code>.flex</code> class.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="flex">
<div>Hamburger</div>
<div>Hot Dog</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To set a container to display flex at certain breakpoints, use the <code>.sm-flex</code>, <code>.md-flex</code>, and <code>.lg-flex</code> styles.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="sm-flex">
<div>Hamburger</div>
<div>Hot Dog</div>
</div>
<div class="md-flex">
<div>Hamburger</div>
<div>Hot Dog</div>
</div>
<div class="lg-flex">
<div>Hamburger</div>
<div>Hot Dog</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sm-flex"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"md-flex"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"lg-flex"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To set a flexbox container to column direction, use <code>.flex-column</code>.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="flex flex-column">
<span>Hamburger</span>
<span>Hot Dog</span>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex flex-column"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To enable wrapping of flexbox containers, use <code>.flex-wrap</code>.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="flex flex-wrap">
<div class="col-4">Hamburger</div>
<div class="col-4">Hamburger</div>
<div class="col-4">Hamburger</div>
<div class="col-4">Hamburger</div>
<div class="col-4">Hamburger</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex flex-wrap"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-4"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-4"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-4"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-4"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-4"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To set a flexbox item to automatically fill the available space, use the <code>flex-auto</code> utility.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="flex border">
<div class="flex-auto border">Hamburger</div>
<div class="border">Hot Dog</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex-auto border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To prevent a flexbox item from growing or shrinking, use the <code>flex-none</code> utility.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="flex border">
<div class="flex-none border">Hamburger</div>
<div class="border">Hot Dog</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex-none border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To control alignment of flexbox items, use the <code>align-items</code> utilities. These styles uses a shorthand naming convention. <code>items</code> for the <code>align-items</code> property and <code>start</code> and <code>end</code> for the <code>flex-start</code> and <code>flex-end</code> values.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="flex items-start border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-end border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-baseline border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-stretch border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex items-start border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex items-end border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex items-center border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex items-baseline border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex items-stretch border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To align flexbox items on an item-by-item basis, use the <code>align-self</code> utilities. These override values set by the <code>align-items</code> property. A shorthand naming convention of <code>self</code> for the <code>align-self</code> property is used.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="flex items-center border">
<h1 class="self-start border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
<h1 class="self-end border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-start border">
<h1 class="self-center border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
<h1 class="self-baseline border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
<h1 class="self-stretch border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
</div>
<pre class="MarkedExample-code h5 m0 p2 border-none rounded-bottom"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex items-center border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"self-start border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex items-center border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"self-end border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex items-start border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"self-center border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex items-center border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"self-baseline border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"flex items-center border"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h1</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"self-stretch border"</span>></span>Hamburger<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"border"</span>></span>Hot Dog<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></pre>
</div>
<p>To control the spacing for items on the main axis, use the <code>justify-content</code> utilities. These styles use a shorhand naming convention. <code>justify</code> for the <code>justify-content</code> property and <code>around</code> and <code>between</code> for the <code>space-around</code> and <code>space-between</code> values.</p>
<div class="MarkedExample mb2 border border-thick border-darken rounded">
<div class="MarkedExample-rendered p2 border-bottom border-thick border-darken">
<div class="flex justify-start border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex justify-end border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex justify-center border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex justify-between border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>