-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1811 lines (1654 loc) · 105 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>Adopt-a-Tree: Styleguide</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/style-guide.css">
</head>
<body>
<main class="main">
<div class="styleguide">
<nav class="styleguide-nav">
<button class="btn-styleguide-menu btn btn--brand-1 btn--xs" id="js-btn-styleguide-menu">MENU</button>
<ul class="styleguide-sidebar list-reset" id="js-styleguide-sidebar">
<li><a href="#styleguide-section-guidelines">Guidelines</a></li>
<li><a href="#styleguide-section-logo">Logo</a></li>
<li><a href="#styleguide-section-colors">Colors</a></li>
<li><a href="#styleguide-section-spacing">Spacing</a></li>
<li><a href="#styleguide-section-alignment">Alignment</a></li>
<li><a href="#styleguide-section-media">Media Queries</a></li>
<li><a href="#styleguide-section-grid">Grid</a></li>
<li><a href="#styleguide-section-accessibility">Accessibility</a></li>
<li><a href="#styleguide-section-typography">Typography</a></li>
<li><a href="#styleguide-section-images">Images</a></li>
<li><a href="#styleguide-section-icons">Icons</a></li>
<li><a href="#styleguide-section-buttons">Buttons</a></li>
<li><a href="#styleguide-section-forms">Forms</a></li>
<li><a href="#styleguide-section-content-blocks">Content Blocks</a></li>
<li><a href="#styleguide-section-progress-bars">Progress Bars</a></li>
<li><a href="#styleguide-section-avatars">Avatars</a></li>
<li><a href="#styleguide-section-banners">Banners</a></li>
<li><a href="#styleguide-section-lists">Lists: Styled</a></li>
<li><a href="#styleguide-section-cards">Cards</a></li>
<li><a href="#styleguide-section-loading">Loading</a></li>
<li><a href="#styleguide-section-tabs">Tabs <span class="styleguide-link-label">JS</span></a></li>
<li><a href="#styleguide-section-sliders">Sliders & Carousels <span class="styleguide-link-label">JS</span></a></li>
</ul>
</nav> <!-- /.styleguide-nav -->
<section class="styleguide-content">
<img src="assets/svg/logos/logo.svg" width="36" height="36" alt="Logo: Adopt-a-Tree" class="styleguide-logo" role="img">
<h1 class="styleguide-heading">Style Guide</h1>
<section id="styleguide-section-guidelines" class="styleguide-section">
<h2>Guidelines</h2>
<div class="styleguide-section-docs">
<p>Adopt-a-Tree uses <a href="http://sass-lang.com" target="_blank">Sass</a> as a preprocessor for this project's CSS.</p> <p>Watch and compile the Sass files using the command line, or a GUI application like <a href="https://prepros.io" target="_blank">Prepros</a>, or a task runner like <a href="https://gulpjs.com" target="_blank">Gulp</a>, or a bundler like <a href="https://webpack.js.org" target="_blank">Webpack</a>.</p>
<p>This project uses node-sass via the command line using the following command:</p>
<div class="spacing-b">
<pre><code class="styleguide-code-inline">node-sass --watch assets/scss/styles.scss assets/css/styles.css</code></pre>
</div>
<p><span class="styleguide-do">Do</span> use single-line Sass comments (which are the same as single-line JavaScript comments) for comments that other developers need to see, since they won't get compiled into the CSS stylesheet.</p>
<p><span class="styleguide-dont">Don't</span> edit the <span class="font-bold">generated CSS</span> files.</p>
<p><span class="styleguide-dont">Don't</span> use inline styles. The handful of inline styles in the style guide are purely for demo.</p>
<p><span class="styleguide-do">Do </span> use <span class="font-bold">2 spaces</span> to indent your code.</p>
<p><span class="styleguide-do">Do</span> follow hyphen-separated class naming. E.g. <code class="styleguide-code-inline">list-block</code>.</p>
<p>Modifier classes use a double-hyphen naming convention. E.g.<code class="styleguide-code-inline">list-block--profile</code>.</p>
<p><span class="styleguide-do">Do</span> create a separate class or ID for an element which requires JavaScript to modify its behavior. Prefix it with <code class="styleguide-code-inline">js-</code> and don't attach any styling to this class or ID.</p>
<p><span class="styleguide-do">Do</span> browse through the <em>variables</em>, <em>globals</em>, <em>spacing</em> and <em>typography</em> partials. They contain plenty of reusable code.</p>
<p><span class="styleguide-do">Do</span> use camelCase for naming variables and functions in JavaScript.</p>
<p><span class="styleguide-do">Do</span> use semicolons after JavaScript statements.</p>
<p><span class="styleguide-do">Do</span> strive for an accessible user interface for users of keyboards and screen readers.</p>
<p><span class="styleguide-do">Do</span> ensure the project works on modern browers, including IE Edge, Chrome, Firefox, Safari, Android and iOS.</p>
</div>
</section>
<section id="styleguide-section-logo" class="styleguide-section">
<h2>Logo</h2>
<div class="styleguide-section-docs">
<p>Adopt-a-Tree's logo is available in two colors, green and white, as two separate SVG files and a font icon with class <code class="styleguide-code-inline">at-icon-logo</code>. Usage of the SVG file in an image tag is preferred.</p>
<p>A logo with a gradient circle is also available as an SVG file.</p>
<p>All logos can be enlarged without incurring a loss in quality.</p>
</div>
<div class="styleguide-section-block">
<h3>Logo: Default: SVG</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<img src="assets/svg/logos/logo.svg" alt="Logo: Adopt-a-Tree" width="36" height="36" role="img">
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Logo: Default: Icon Font</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div>
<span class="at-icon-logo brand-1" aria-hidden="true"></span>
<span class="show-on-screen-readers">Logo: Adopt-a-Tree</span>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Logo: White Variant: SVG</h3>
<div class="styleguide-section-docs">
<p>A white variant of the logo can be optionally used to contrast dark backgrounds.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each black-bg">
<img src="assets/svg/logos/logo-white.svg" alt="Logo: Adopt-a-Tree" width="36" height="36" role="img">
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Logo: White Variant: Icon Font</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each black-bg">
<div>
<span class="at-icon-logo white" aria-hidden="true"></span>
<span class="show-on-screen-readers">Logo: Adopt-a-Tree</span>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Logo: Gradient with Circle: SVG</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<img src="assets/svg/logos/logo-gradient-green-circle.svg" alt="Logo: Adopt-a-Tree" width="144" height="144" role="img">
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
</div> <!-- /.styleguide-section-block -->
</section>
<section id="styleguide-section-colors" class="styleguide-section">
<h2>Colors</h2>
<div class="styleguide-section-docs">
<p>Use variables or classes for colors.</p>
<p>Background colors have a <code class="styleguide-code-inline">-bg</code> suffix.</p>
<p>To incorporate a new color, add the color variable to the <em>variables</em> partial and refer to it in the Sass map inside the <em>colors</em> partial.</p>
</div>
<div class="styleguide-section-block">
<div class="styleguide-section-files">Reference files: _colors.scss, _variables.scss</div>
<h3>Colors: Brand</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--colors">
<div>
<div class="brand-1">$brand-1</div>
<div class="styleguide-box-demo brand-1-bg"></div>
</div>
<div>
<div class="brand-1-light">$brand-1-light</div>
<div class="styleguide-box-demo brand-1-light-bg"></div>
</div>
<div>
<div class="brand-1-x-light">$brand-1-x-light</div>
<div class="styleguide-box-demo brand-1-x-light-bg"></div>
</div>
<div>
<div class="brand-2">$brand-2</div>
<div class="styleguide-box-demo brand-2-bg"></div>
</div>
<div>
<div class="brand-2-light">$brand-2-light</div>
<div class="styleguide-box-demo brand-2-light-bg"></div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Colors: Warm</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--colors">
<div>
<div class="red-crimson">$red-crimson</div>
<div class="styleguide-box-demo red-crimson-bg"></div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Colors: Cool</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--colors">
<div>
<div class="blue-aqua">$blue-aqua</div>
<div class="styleguide-box-demo blue-aqua-bg"></div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Colors: Black, White</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--colors">
<div>
<div class="black">$black</div>
<div class="styleguide-box-demo black-bg"></div>
</div>
<div>
<div class="white">$white</div>
<div class="styleguide-box-demo white-bg"></div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Colors: Gray Spectrum</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--colors">
<div>
<div class="gray-coal">$gray-coal</div>
<div class="styleguide-box-demo gray-coal-bg"></div>
</div>
<div>
<div class="gray-lead">$gray-lead</div>
<div class="styleguide-box-demo gray-lead-bg"></div>
</div>
<div>
<div class="gray-cement">$gray-cement</div>
<div class="styleguide-box-demo gray-cement-bg"></div>
</div>
<div>
<div class="gray-titanium">$gray-titanium</div>
<div class="styleguide-box-demo gray-titanium-bg"></div>
</div>
<div>
<div class="gray-cloud">$gray-cloud</div>
<div class="styleguide-box-demo gray-cloud-bg"></div>
</div>
<div>
<div class="gray-mist">$gray-mist</div>
<div class="styleguide-box-demo gray-mist-bg"></div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Colors: Typography</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--colors">
<div>
<div class="color-font">$color-font</div>
<div class="styleguide-box-demo color-font-bg"></div>
</div>
<div>
<div class="color-link">$color-link</div>
<div class="styleguide-box-demo color-link-bg"></div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Colors: States</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--colors">
<div>
<div class="color-error">$color-error</div>
<div class="styleguide-box-demo color-error-bg"></div>
</div>
<div>
<div class="color-success">$color-success</div>
<div class="styleguide-box-demo color-success-bg"></div>
</div>
<div>
<div class="color-info">$color-info</div>
<div class="styleguide-box-demo color-info-bg"></div>
</div>
<div>
<div class="color-disabled">$color-disabled</div>
<div class="styleguide-box-demo color-disabled-bg"></div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
</div> <!-- /.styleguide-section-block -->
</section>
<section id="styleguide-section-spacing" class="styleguide-section">
<h2>Spacing</h2>
<div class="styleguide-section-docs">
<p>Use variables or classes for spacing.</p>
<p>Spacing helpers can be used for padding, margins, positioning elements, etc.</p>
<p>The spacing variables are <code class="styleguide-code-inline">$spacing</code>, <code class="styleguide-code-inline">$spacing-2</code>, <code class="styleguide-code-inline">$spacing-3</code> and <code class="styleguide-code-inline">$spacing-half</code>.</p>
<p>The default <code class="styleguide-code-inline">$spacing</code> variable's value is 10 pixels.</p>
<p><code class="styleguide-code-inline">$spacing-2</code> is twice the value of <code class="styleguide-code-inline">$spacing</code> and so on.</p>
</div>
<div class="styleguide-section-block">
<div class="styleguide-section-files">Reference files: _globals.scss, _spacing.scss, _variables.scss</div>
<h3>Spacing: All Sides</h3>
<div class="styleguide-section-docs">
<p>Uses padding on all four sides to create spacing.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--spacing">
<div class="spacing">Spacing: All Sides</div>
<div class="spacing-2">Spacing-2: All Sides</div>
<div class="spacing-3">Spacing-3: All Sides</div>
<div class="spacing-half">Spacing-half: All Sides</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Spacing: Horizontal</h3>
<div class="styleguide-section-docs">
<p>Uses left and right padding to create spacing.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--spacing">
<div class="spacing-h">Spacing: Horizontal</div>
<div class="spacing-2-h">Spacing-2: Horizontal</div>
<div class="spacing-3-h">Spacing-3: Horizontal</div>
<div class="spacing-half-h">Spacing-half: Horizontal</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Spacing: Vertical</h3>
<div class="styleguide-section-docs">
<p>Uses top and bottom padding to create spacing.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--spacing">
<div class="spacing-v">Spacing: Vertical</div>
<div class="spacing-2-v">Spacing-2: Vertical</div>
<div class="spacing-3-v">Spacing-3: Vertical</div>
<div class="spacing-half-v">Spacing-half: Vertical</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Spacing: Left</h3>
<div class="styleguide-section-docs">
<p>Uses left padding to create spacing.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--spacing">
<div class="spacing-l">Spacing: Left</div>
<div class="spacing-2-l">Spacing-2: Left</div>
<div class="spacing-3-l">Spacing-3: Left</div>
<div class="spacing-half-l">Spacing-half: Left</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Spacing: Right</h3>
<div class="styleguide-section-docs">
<p>Uses right padding to create spacing.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--spacing">
<div class="spacing-r">Spacing: Right</div>
<div class="spacing-2-r">Spacing-2: Right</div>
<div class="spacing-3-r">Spacing-3: Right</div>
<div class="spacing-half-r">Spacing-half: Right</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Spacing: Top</h3>
<div class="styleguide-section-docs">
<p>Uses top padding to create spacing.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--spacing">
<div class="spacing-t">Spacing: Top</div>
<div class="spacing-2-t">Spacing-2: Top</div>
<div class="spacing-3-t">Spacing-3: Top</div>
<div class="spacing-half-t">Spacing-half: Top</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Spacing: Bottom</h3>
<div class="styleguide-section-docs">
<p>Uses bottom padding to create spacing.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--spacing">
<div class="spacing-b">Spacing: Bottom</div>
<div class="spacing-2-b">Spacing-2: Bottom</div>
<div class="spacing-3-b">Spacing-3: Bottom</div>
<div class="spacing-half-b">Spacing-half: Bottom</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Spacing: Reset padding on all sides</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="col gray-mist-bg padding-reset">Column: Reset Padding</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Spacing: Reset margins on all sides</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<h2 class="margin-reset">H2 Heading: Margins reset</h2>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
</div> <!-- /.styleguide-section-block -->
</section>
<section id="styleguide-section-alignment" class="styleguide-section">
<h2>Alignment</h2>
<div class="styleguide-section-docs">
<p>Alignment can occur via absolute positioning, auto margins, elements with inline-block displays and flexbox.</p>
<p>The examples below use mixins and classes to position and center elements relative to each other and their parents.</p>
</div>
<div class="styleguide-section-block">
<div class="styleguide-section-files">Reference files: _globals.scss, _grid.scss, _variables.scss</div>
<h3>Alignment: Auto Margins: Centering: Horizontal</h3>
<div class="styleguide-section-docs">
<p>Use mixins or classes to center elements with margins.</p>
<p>Auto margins are used for centering elements horizontally.</p>
<p>Auto margins are also a useful centering mechanism for elements with fixed widths.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--margin-auto">
<div class="center-element" style="width: 100px;">Horizontally Centered</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Alignment: Inline Block: Alignment</h3>
<div class="styleguide-section-docs">
<p>Use classes to position elements with an inline-block level display.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div>
<span class="at-icon-leaf vertical-align-top"></span>
<span class="vertical-align-top">Vertical Align: Top</span>
</div>
<div>
<span class="at-icon-leaf vertical-align-middle"></span>
<span class="vertical-align-middle">Vertical Align: Middle</span>
</div>
<div>
<span class="at-icon-leaf vertical-align-bottom"></span>
<span class="vertical-align-bottom">Vertical Align: Bottom</span>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Alignment: Flexbox</h3>
<div class="styleguide-section-docs">
<p>Use flexbox mixins or classes to center elements and push them to the right or left edge of their parents.</p>
<p></p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="flex flex-justify-center spacing-b">
<div class="spacing gray-mist-bg">
Flexbox: Horizontal Centering
</div>
<div class="spacing white gray-titanium-bg">
Flexbox: Horizontal Centering
</div>
</div>
<div class="flex flex-align-center spacing-b">
<div class="spacing gray-mist-bg">
<p>Flexbox: Vertical Centering <br>
Notice how the two containers are vertically centered with flexbox. Flexbox makes horizontal and vertical centering easy as pie! It's the coolest thing since floats. And it allows elements to squeeze and stretch to fill up space as needed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora cumque adipisci atque ab quam, non, maiores nostrum. Necessitatibus, sit quae magnam nesciunt totam culpa reiciendis amet molestiae libero natus iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita soluta dolores nostrum, autem illum, aut a debitis tempore sunt enim quasi quos explicabo quae quaerat itaque cumque sit repellendus eaque.</p>
</div>
<div class="spacing white gray-titanium-bg">
Flexbox: Vertical Centering
</div>
</div>
<div class="flex spacing-b">
<div class="spacing gray-mist-bg">
Child of flex container
</div>
<div class="spacing white gray-titanium-bg margin-left-auto">
Flexbox: Push element to the right
</div>
</div>
<div class="flex spacing-b">
<div class="spacing gray-mist-bg margin-right-auto">
Flexbox: Push element to the left
</div>
<div class="spacing white gray-titanium-bg">
Child of flex container
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Alignment: Positioning: Centering: Vertical & Absolute</h3>
<div class="styleguide-section-docs">
<p>Use mixins or classes to center elements with absolute positioning.</p>
<p>A parent with relative positioning is required.</p>
<p>Absolute positioning is used to center child elements.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="position-relative brand-1-bg" style="height: 100px;">
<div class="vertical-center white">Vertically Centered</div>
</div>
<div class="position-relative brand-2-bg" style="height: 100px;">
<div class="absolute-center white">Absolutely Centered</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
</div> <!-- /.styleguide-section-block -->
</section>
<section id="styleguide-section-media" class="styleguide-section">
<h2>Media Queries</h2>
<div class="styleguide-section-docs">
<p>The site primarily uses min-width media query variables since the layout is mobile-first. However, max-width media query variables are also available.</p>
<p>Min-width media query variables: <code class="styleguide-code-inline">$media-sm</code>, <code
class="styleguide-code-inline">$media-mid</code>, <code class="styleguide-code-inline">$media-lg</code>.</p>
<p>Max-width media query variables: <code class="styleguide-code-inline">$media-sm-max</code>, <code class="styleguide-code-inline">$media-mid-max</code>, <code class="styleguide-code-inline">$media-lg-max</code>.</p>
<p>Media queries are usually nested within the selector they are associated with.</p>
</div>
<div class="styleguide-section-block">
<div class="styleguide-section-files">Reference files: _variables.scss</div>
<div class="styleguide-section-docs">
<p>Click the "Code" button to see a contrived example of all media queries on the site.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<style>
.selector {
width: 100%;
// Media Queries: Min Width
@media (min-width: $media-sm) {
width: 60%;
}
@media (min-width: $media-mid) {
width: 50%;
}
@media (min-width: $media-lg) {
width: 40%;
}
// Media Queries: Max Width
@media (max-width: $media-lg-max) {
width: 90%;
}
@media (max-width: $media-mid-max) {
width: 80%;
}
@media (max-width: $media-sm-max) {
width: 70%;
}
}
</style>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
</div> <!-- /.styleguide-section-block -->
</section>
<section id="styleguide-section-grid" class="styleguide-section">
<h2>Grid</h2>
<div class="styleguide-section-docs">
<p>To create a grid structure, start with a container, include a row and add columns. Use flex helpers with rows or float helpers with columns.</p>
<p>A 12 column grid is provided with classes for each media query breakpoint. E.g. <code class="styleguide-code-inline">col-12</code>, <code class="styleguide-code-inline">col-6-sm</code>, <code class="styleguide-code-inline">col-4-mid</code> and <code class="styleguide-code-inline">col-3-lg</code>.</p>
<p>To change the number of columns, change the value of the <code class="styleguide-code-inline">grid-column-count</code> variable in the <em>variables</em> partial. Doing so will automatically create new columns across all breakpoints. For example, you could change the numbers of columns from 6 to 12 or 24.</p>
</div>
<div class="styleguide-section-block">
<div class="styleguide-section-files">Reference files: _grid.scss, _variables.scss</div>
<h3>Grid: Containers</h3>
<div class="styleguide-section-docs">
<p>Container sizes are obtained from the media query variables.</p>
<p>Each container is horizontally centered and has left and right padding.</p>
<p>A full-width container also exists for sections that span the entire width of the screen.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each styleguide-demo-each--containers">
<div class="container-lg">Container: Large: Most Common Size</div>
<div class="container-mid">Container: Mid</div>
<div class="container-sm">Container: Small</div>
<div class="container-full">Container: Full Width</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Grid: Rows & Columns: Default</h3>
<div class="styleguide-section-docs">
<p>Rows include clearfix functionality. A seperate clearfix mixin and class is available for use.</p>
<p>Rows have negative margins to offset the left and right padding of the first and last columns respectively.</p>
<p>Columns have a left and right padding that acts as gutters.</p>
<p>Rows and columns have default, small and large gutters.</p>
</div>
<h4>Rows & Columns: Default Gutters</h4>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="row flex">
<div class="col spacing-v">
<div class="spacing gray-mist-bg">Column 1</div>
</div>
<div class="col spacing-v">
<div class="spacing gray-mist-bg">Column 2</div>
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h4>Rows & Columns: Small Gutters</h4>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="row-sm flex">
<div class="col-sm spacing-v">
<div class="spacing gray-mist-bg">Column 1</div>
</div>
<div class="col-sm spacing-v">
<div class="spacing gray-mist-bg">Column 2</div>
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h4>Rows & Columns: Large Gutters</h4>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="row-lg flex">
<div class="col-lg spacing-b">
<div class="spacing gray-mist-bg">Column 1</div>
</div>
<div class="col-lg spacing-b">
<div class="spacing gray-mist-bg">Column 2</div>
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h4>Columns: Column 2 automatically fills up remaining width</h4>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="row flex">
<div class="col spacing-v">
<div class="spacing gray-mist-bg">Column 1</div>
</div>
<div class="col spacing-v flex-1">
<div class="spacing gray-mist-bg">Column 2</div>
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h4>Columns: Column 2 is pushed to the right</h4>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="row flex">
<div class="col spacing-v">
<div class="spacing gray-mist-bg">Column 1</div>
</div>
<div class="col spacing-v margin-left-auto">
<div class="spacing gray-mist-bg">Column 2</div>
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h4>Columns: Columns: Horizontally centered</h4>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="row flex flex-justify-center">
<div class="col spacing-v">
<div class="spacing gray-mist-bg">Column 1</div>
</div>
<div class="col spacing-v">
<div class="spacing gray-mist-bg">Column 2</div>
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h4>Columns: Vertically centered</h4>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="row flex flex-align-center">
<div class="col spacing-v">
<div class="spacing gray-mist-bg">Column 1</div>
</div>
<div class="col spacing-v">
<div class="spacing gray-mist-bg">
<p>Column 2: Flexbox: Vertical Centering <br>
Notice how the two containers are vertically centered with flexbox. Flexbox makes horizontal and vertical centering easy as pie! It's the coolest thing since floats. And it allows elements to squeeze and stretch to fill up space as needed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora cumque adipisci atque ab quam, non, maiores nostrum. Necessitatibus, sit quae magnam nesciunt totam culpa reiciendis amet molestiae libero natus iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita soluta dolores nostrum, autem illum, aut a debitis tempore sunt enim quasi quos explicabo quae quaerat itaque cumque sit repellendus eaque.</p>
</div>
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h4>Columns: Halves</h4>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="row flex flex-wrap">
<div class="col col-6 spacing-v">
<div class="spacing gray-mist-bg">Column 1</div>
</div>
<div class="col col-6 spacing-v">
<div class="spacing gray-mist-bg">Column 2</div>
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h4>Columns: Thirds</h4>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="row flex flex-wrap">
<div class="col col-4 spacing-v">
<div class="spacing gray-mist-bg">Column 1</div>
</div>
<div class="col col-4 spacing-v">
<div class="spacing gray-mist-bg">Column 2</div>
</div>
<div class="col col-4 spacing-v">
<div class="spacing gray-mist-bg">Column 3</div>
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h4>Columns: Different sizes on different breakpoints</h4>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="row flex flex-wrap">
<div class="col col-12 col-6-sm col-4-mid col-3-lg spacing-v">
<div class="spacing gray-mist-bg">Column 1</div>
</div>
<div class="col col-12 col-6-sm col-4-mid col-3-lg spacing-v">
<div class="spacing gray-mist-bg">Column 2</div>
</div>
<div class="col col-12 col-6-sm col-4-mid col-3-lg spacing-v">
<div class="spacing gray-mist-bg">Column 3</div>
</div>
<div class="col col-12 col-6-sm col-4-mid col-3-lg spacing-v">
<div class="spacing gray-mist-bg">Column 4</div>
</div>
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
</div> <!-- /.styleguide-section-block -->
</section>
<section id="styleguide-section-accessibility" class="styleguide-section">
<h2>Accessibility</h2>
<div class="styleguide-section-docs">
<p>Use semantic HTML elements like header, nav, main, footer, section and appropriate headings.</p>
<p>Use a class of <code class="styleguide-code-inline">show-on-screen-readers</code> to display content only for screen readers but hide it visually.</p>
<p>Use the <code class="styleguide-code-inline">aria-hidden</code> attribute to hide content from screen readers but display it visually.</p>
<p>Use the <code class="styleguide-code-inline">aria-label</code> attribute to give information to screen readers when labels can't be used.</p>
<p>Add a descriptive value for the <code class="styleguide-code-inline">alt</code> attribute of images. Exceptions include descriptive images and those cases where information will be unnecessarily repeated.</p>
<p>For SVGs referred to in image tags, add the attribute and value <code class="styleguide-code-inline">role="img"</code> to help screen readers interpret the element as an image. Note: This may cause the HTML5 validator to give you a warning.</p>
<p>Ensure users are able to navigate the site via the keyboard.</p>
<p>Ensure that every input has an <code class="styleguide-code-inline">ID</code> that matches the <code class="styleguide-code-inline">for</code> attribute of its label. Avoid using placeholders to replace labels. If you do use placeholders, make sure a label is provided for screen readers.</p>
</div>
<div class="styleguide-section-block">
<div class="styleguide-section-files">Reference files: _globals.scss</div>
<h3>Screen Readers: Informative images</h3>
<div class="styleguide-section-docs">
<p>Informative images should have meaningful alt text which can be used by screen readers.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<img src="assets/svg/logos/logo.svg" width="44" height="44" alt="Logo: Adopt-a-Tree" role="img">
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Screen Readers: Decorative images</h3>
<div class="styleguide-section-docs">
<p>Images with empty alt text are ignored by screen readers.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<img src="assets/svg/leaf-motif.svg" alt="" width="80" class="center-element" role="img">
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Screen Readers: Informative font icons</h3>
<div class="styleguide-section-docs">
<p>This example uses the <code class="styleguide-code-inline">aria-hidden</code> attribute and <code class="styleguide-code-inline">show-on-screen-readers</code> class to make an "X" icon button accessible.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<button class="btn-reset">
<span class="at-icon-x icon-size-xxl" aria-hidden="true"></span>
<span class="show-on-screen-readers">Close Lightbox</span>
</button>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Screen Readers: Decorative font icons</h3>
<div class="styleguide-section-docs">
<p>This example hides font icons, which are purely decorative, from screen readers using the <code class="styleguide-code-inline">aria-hidden</code> attribute.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<span class="at-icon-leaf" aria-hidden="true"></span>
<span>The icon on the left is purely decorative.</span>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
</div> <!-- /.styleguide-section-block -->
</section> <!-- /.styleguide-section -->
<section id="styleguide-section-typography" class="styleguide-section">
<h2>Typography</h2>
<div class="styleguide-section-docs">
<p>Typography consists of helper classes for text styling and basic styling for HTML elements like headings, lists and paragraphs.</p>
</div>
<div class="styleguide-section-block">
<div class="styleguide-section-files">Reference files: _functions.scss, _typography.scss, _variables.scss</div>
<h3>Typography: Font Families</h3>
<div class="styleguide-section-docs">
<p>Use a variable or class for font families.</p>
<p><em>Nunito Sans</em> is the default font for the project and is available via <a href="https://fonts.google.com/" target="_blank">Google Fonts</a>.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="font-family-1">$font-family-1</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Typography: Font Sizes</h3>
<div class="styleguide-section-docs">
<p>Use variables or classes for font sizes.</p>
<p>The base font size is in pixels and the rest use the <code class="styleguide-code-inline">px-to-percent</code> function to output pixel values as percentages.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="font-size">$font-size</div>
<div class="font-size-sm">$font-size-sm</div>
<div class="font-size-xs">$font-size-xs</div>
<div class="font-size-lg">$font-size-lg</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Typography: Font Weights</h3>
<div class="styleguide-section-docs">
<p>Use variables and classes for font weights.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="font-regular">$font-regular</div>
<div class="font-semi-bold">$font-semi-bold</div>
<div class="font-bold">$font-bold</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Typography: Text Styles</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div class="text-left">Text: Left Align</div>
<div class="text-right">Text: Right Align</div>
<div class="text-center">Text: Center Align</div>
<div class="text-uppercase">Text: Uppercase</div>
<div class="text-underline">Text: Underline</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Typography: Headings</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Typography: Paragraphs</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<p>Paragraph: Here's what a paragraph of text looks like.</p>
<p>Paragraph: Here's what a second paragraph of text looks like.</p>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Typography: Links</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<a href="#">Link</a>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<span class="link" tabindex="0">Class to make something resemble a link</span>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<a href="#" class="link-action">
<span class="at-icon-arrow-right link-action-icon"></span>
<span class="link-action-text font-size-sm" aria-hidden="true">Read More</span>
</a>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
<h3>Typography: Lists</h3>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<ul>
<li>Unordered List: Item 1</li>
<li>Unordered List: Item 2</li>
<li>Unordered List: Item 3</li>
</ul>
<ol>
<li>Ordered List: Item 1</li>
<li>Ordered List: Item 2</li>
<li>Ordered List: Item 3</li>
</ol>
<ul class="list-reset">
<li>List: Reset Styles: Item 1</li>
<li>List: Reset Styles: Item 2</li>
<li>List: Reset Styles: Item 3</li>
</ul>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>
</div> <!-- /.styleguide-demo-block -->
</div> <!-- /.styleguide-section-block -->
</section>
<section id="styleguide-section-images" class="styleguide-section">
<h2>Images</h2>
<div class="styleguide-section-docs">
<p>Images are responsive by default.</p>
</div>
<div class="styleguide-section-block">
<div class="styleguide-section-files">Reference files: _globals.scss</div>
<h3>Images: Responsive</h3>
<div class="styleguide-section-docs">
<p>By default, images resize according to the size of the screen and don't exceed the width of the parent's container.</p>
</div>
<div class="styleguide-demo-block">
<div class="styleguide-demo-each">
<div style="width: 250px;">
<img src="assets/img/art-heart-600px.jpg" width="600" height="369"
alt="Responsive Image: Example">
</div>
</div> <!-- /.styleguide-demo-each -->
<button class="btn-styleguide-code js-btn-styleguide-code btn btn--brand-1 btn--sm">Code</button>