-
Notifications
You must be signed in to change notification settings - Fork 29
Expand file tree
/
Copy pathstyle.html
More file actions
1842 lines (1677 loc) · 104 KB
/
style.html
File metadata and controls
1842 lines (1677 loc) · 104 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>OSF Style & UI Guidelines</title>
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'>
<link href="vendor/prism/prism.css" rel="stylesheet" />
<!-- OSF style -->
<link href="css/base.min.css" rel="stylesheet">
<!-- Guidelines style -->
<link href="page.css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body role="document">
<nav class="navbar navbar-inverse osf-navbar navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars fa-lg fa-inverse"></span>
</button>
<a class="navbar-brand" href="index.html">OSF Style Guide </span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">Home<span class="sr-only">(current)</span></a></li>
<li class="active"><a href="style.html">Style Guide</a></li>
<li><a href="ui.html">UI Guide </a></li>
<li><a href="language.html">Language</a></li>
</ul>
<div class="navbar-form navbar-right">
<button id="openGithub" role="button" class="btn btn-info"><i class="fa fa-github"></i> Open in Github</button>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-full style-header">
<div id="top" class="container theme-showcase" >
<div class="jumbotron">
<h1>Style Guide</h1>
</div>
</div>
</div>
<div class="nav-rows container">
<div class="row">
<div class="col-xs-12 col-sm-9">
<!--LAYOUT PAGE-->
<div id="layout" >
<div class="page-header">
<h2>Layout</h2>
</div>
<h3 id="container" >Container</h3>
<div class="row">
<div class="col-sm-9">
<p> OSF uses a fixed container layout as opposed to fluid. This makes sure that the width does not continue to adjust past 1200px width. Your documents should be wrapper inside a div with class "container." </p>
<pre>
<code class="language-markup">
<div class="container">
...
</div>
</code>
</pre>
</div>
<div class="col-sm-3">
<a href="http://getbootstrap.com/css/#overview" class="btn btn-sm btn-default"> Bootstrap documentation </a>
</div>
</div>
<h3 id="grid" >Grid</h3>
<div class="row">
<div class="col-sm-9">
<p> Using the grid properly is critical for the correct view of the OSF components on all devices. Within a container you should ALWAYS use grids for layout and horizontal alignment. Do not use margins, padding, float or tables for layout arrangements.</p>
<pre>
<code class="language-markup">
<div class="row">
<div class="col-md-12">...</div>
</div>
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-3">...</div>
<div class="col-md-5">...</div>
</div>
<div class="row">
<div class="col-md-6">...</div>
<div class="col-md-6">...</div>
</div>
</code>
</pre>
<div class="m-t-md m-b-md p-md osf-box-lt">
<h4 class="text-success"> How to use the grid:</h4>
<ul>
<li>Grid columns need to add up to 12.</li>
<li>Each total of 12 should be inside its own "row" div.</li>
<li>Plan out the layout of your component on paper before you start coding and then write the html code of the row structure first. This will alleviate the problem of columns not matching up or some div tags not closing.</li>
<li>Bootstrap grid is designed to fit columns together. If there is an unnecessary amount of space in between components, first check that your grid is properly built.</li>
<li>Bootstrap grids do not align heights of columns. If you need column heights to be equal you will need to manually set them or use other libraries.</li>
<li>Do not use grids to center align a component horizontally unless there is no other semantically meaningful way to do so.</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<a href="http://getbootstrap.com/css/#grid" class="btn btn-sm btn-default"> Bootstrap documentation </a>
</div>
</div>
<h3 id="layout-helper" > Layout helper CSS classes</h3>
<div class="row">
<div class="col-xs-12">
<p> For <b>margin</b> and <b>padding</b> OSF has helper classes that provide a quick method to add granular layout without having to define these distances for every item. </p>
<p class="lead"> .type + direction + size | <b> Example: </b> .m-t-xs </p>
<ul>
<li><b> Type </b>: "m" : margin or "p" : padding </li>
<li><b> Direction </b>: "t" : top, "b" : bottom, "l" : left, "r" : right; "v" : vertical (top and bottom), "h" : horizontal (left and right) or omit this and apply to all sides; i.e. .m-xs; </li>
<li><b> Size </b>: "xs": 5px, "sm": 10px, "md": 15px, "lg" : 25px, "xl" : 50px</li>
</ul>
<h5 class="f-w-lg"> Examples: </h5>
<div class="m-b-md box p-xs">XS Padding: 5px</div>
<div class="m-b-md box p-sm">SM Padding: 10px</div>
<div class="m-b-md box p-md">MD Padding: 15px</div>
<div class="m-b-md box p-lg">LG Padding: 25px</div>
<div class="m-b-md box p-xl">XL Padding: 50px;</div>
<pre>
<code class="language-markup">
<div class="m-b-md box p-xs">XS Padding: 5px </div>
<div class="m-b-md box p-sm">SM Padding: 10px </div>
<div class="m-b-md box p-md">MD Padding: 15px </div>
<div class="m-b-md box p-lg">LG Padding: 25px </div>
<div class="m-b-md box p-xl">XL Padding: 50px;</div>
</code>
</pre>
<div class="m-t-md m-b-md p-md osf-box-lt">
<h4 class="text-success"> How to space elements:</h4>
<ul>
<li>Use margin helpers at top and bottom of divs to separate content. </li>
<li>Do NOT use HR until you tried all margin sizes for spacing. Is sections need to be further separated you can try HR tag.</li>
</ul>
</div>
</div>
</div>
</div>
<!--TYPOGRAPHY PAGE-->
<div id="typography" class=" theme-showcase" >
<div class="page-header">
<h2>Typography</h2>
</div>
<p> OSF Website uses light width font for general purpose headings. For bolder fonts you can use the font helper classes:</p>
<div class="row">
<div class="col-xs-12">
<h1>Example page header <small>Subtext for header</small></h1>
<hr />
<h1><span class="m-r-lg">h1.</span> Project management with collaborators</h1>
<hr />
<h2><span class="m-r-lg">h2.</span> Project management with collaborators</h2>
<hr />
<h3><span class="m-r-lg">h3.</span> Project management with collaborators</h3>
<hr />
<h4><span class="m-r-lg">h4.</span> Project management with collaborators</h4>
<hr />
<h5><span class="m-r-lg">h5.</span> Project management with collaborators</h5>
<hr />
<h6><span class="m-r-lg">h6.</span> Project management with collaborators</h6>
<hr />
<p> <span class="m-r-lg">p. </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin ipsum iaculis lectus blandit tempus. Donec tempus ornare erat id fermentum. Nullam tempor viverra arcu vel pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum gravida velit tellus, eget facilisis sapien interdum vel. Nullam a dolor ante. Nunc ultrices finibus turpis quis interdum. Aliquam vel velit tincidunt, sagittis magna in, ultrices sem. Nulla tempus non ex eu dignissim. Sed accumsan blandit cursus. Vestibulum vulputate erat nibh, a accumsan nibh efficitur ac. Etiam tincidunt turpis nibh, et suscipit purus egestas at. Nullam quis ultrices ante. Praesent sapien urna, pulvinar varius mauris a, pulvinar ullamcorper velit. </p>
<div class="m-t-md m-b-md p-md osf-box-lt">
<h4 class="text-success"> How to use heading tags:</h4>
<ul>
<li> h1 tag should be used only once in a page for the most relevant title for the entire page. </li>
<li> You should use heading tags for sizing your text. Do NOT change font-size of text. </li>
<li> Heading tags are also a requirement for screen readers to navigate websites. </li>
</ul>
</div>
</div>
</div>
<h3 id="font-weight" > Typography helper classes</h3>
<div class="row">
<div class="col-xs-12">
<h4> Font weight helpers</h4>
<p> Font weight is how thick a font is. These weight differences are not available for all fonts, especially web fonts will have few of them but the default Bootstrap font for typography includes them.</p>
<p class="f-w-xs">XS thickness</p>
<p class="f-w-sm">SM thickness</p>
<p class="f-w-md">MD thickness</p>
<p class="f-w-lg">LG thickness</p>
<p class="f-w-xl">XL thickness</p>
<h4> Font size helpers</h4>
<p>Sometimes you will need a relatively slightly smaller or slightly bigger size for fonts. Use them in conjunction with "text-muted" and other helpers to achieve your desired effects. </p>
<p>Regular text <span class="text-smaller text-muted">Smaller text</span></p>
<p>Regular text <span class="text-bigger text-muted">Bigger text</span></p>
<pre>
<code class="language-markup">
<p class="f-w-xs">XS Thickness</p>
<p class="f-w-sm">SM Thickness</p>
<p class="f-w-md">MD Thickness</p>
<p class="f-w-lg">LG Thickness</p>
<p class="f-w-xl">XL Thickness</p>
<p>Regular Text <span class="text-smaller text-muted">Smaller text</span></p>
<p>Regular Text <span class="text-bigger text-muted">Bigger text</span></p>
</code>
</pre>
<h3 id="wordBreak" > Word break</h3>
<div class="row m-b-xl">
<div class="col-xs-12">
<p> One of the most common testing scenarios is to use single long words in layout elements. Most often these words will break the layout and can have usability consequences such as hiding buttons or other content. Most text is automatically applied word break rule sets including "p, em, b, a, td" tags. You can also use an separate class ".break-word"</p>
<div class="row">
<div class="col-sm-6">
<h4>Without .break-word </h4>
<div style="width: 150px" class="osf-box-lt p-md">supercalifragilisticexpialidocious</div>
</div>
<div class="col-sm-6">
<h4>With .break-word </h4>
<div style="width: 150px" class="osf-box-lt p-md break-word">supercalifragilisticexpialidocious</div>
</div>
</div>
</div>
</div>
<hr />
<h4 id="other-text" >Other text options</h4>
<div class="row">
<div class="col-xs-9">
<p> Bootstrap documentation provides many other alternatives. Please do NOT change font sizing of your elements. Check to see if you can use an existing convention instead at the Bootstrap website.</p>
<p> For instance, you can use different colored text with existing css classes.</p>
<div class="bs-example">
<p class="text-muted">text-muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">text-primary: Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">text-success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">text-info: Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning"> text-warning: Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">text-danger: Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<pre>
<code class="language-markup">
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
</code>
</pre>
</div>
<div class="col-xs-3">
<a href="http://getbootstrap.com/css/#type" class="btn btn-sm btn-default"> Bootstrap documentation </a>
</div>
</div>
</div>
</div>
<hr>
<h4 id="inline"> Inline edits </h4>
<p>You can provide users the opportunity to edit content "in place" meaning that the content switches to input elements to make changes and returns back to being the regular content when either changes are saved or dismissed. Use the "osf-editable" class for items that are editable inline.</p>
<p> Name: <span class="osf-editable"> OSF Project Name </span></p>
<pre>
<code class="language-markup">
<p>Name : <span class="osf-editable"> OSF Project </span></p>
</code>
</pre>
<div class="osf-box-lt p-lg">
<h4>When to use inline editing</h4>
<ul>
<li>USE if it's an isolated edit not part of a form.</li>
<li>DO NOT use within a form, it adds no value.</li>
<li>USE if the text being edited is part of a regular size text such as paragraph.</li>
<li>USE if the text being edited is not more than a few words (i.e. Don't edit long text this way)</li>
<li>USE if the edit is not critical (can be quickly changed again).</li>
</ul>
<p class="text-warning text-center"><b>If you use inline edits make sure you use them in a similar way across the site!</b></p>
</div>
</div>
<!--COLORS PAGE-->
<div id="colors">
<div class="page-header">
<h2>Colors</h2>
</div>
<div class="row">
<div class="col-sm-3">
<div class="palette-box bg-color-blue">
</div>
</div>
<div class="col-sm-3">
<h4>OSF blue</h4>
<p>#204762</p>
<p>.bg-color-blue</p>
</div>
<div class="col-sm-6">
<ul>
<li>Navbar background</li>
<li> Dominant major components</li>
</ul>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-3">
<div class="palette-box bg-color-hover">
</div>
</div>
<div class="col-sm-3">
<h4>Hover</h4>
<p>#E0EBF3</p>
<p>.bg-color-hover</p>
</div>
<div class="col-sm-6">
<ul>
<li>Row hover color</li>
<li> State changes</li>
</ul>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-3">
<div class="palette-box bg-color-light">
</div>
</div>
<div class="col-sm-3">
<h4>Light</h4>
<p>#EEEEEE</p>
<p>.bg-color-light</p>
</div>
<div class="col-sm-6">
<ul>
<li>Box or panel backgrounds</li>
<li>Optionally sidebars and non-dominant boxes</li>
</ul>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-3">
<div class="palette-box bg-color-alt">
</div>
</div>
<div class="col-sm-3">
<h4>Alternative</h4>
<p>#C7FFC7</p>
<p>.bg-color-alt</p>
</div>
<div class="col-sm-6">
<ul>
<li>Search layer background</li>
<li> Alternative dominant color</li>
</ul>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-3">
<div class="palette-box bg-color-select">
</div>
</div>
<div class="col-sm-3">
<h4>Select</h4>
<p>#337AB7</p>
<p>.bg-color-select</p>
</div>
<div class="col-sm-6">
<ul>
<li>Selected Row Color</li>
<li> Other selected items</li>
</ul>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-3">
<div class="palette-box bg-color-grey">
</div>
</div>
<div class="col-sm-3">
<h4>Grey</h4>
<p>#333333</p>
<p>.bg-color-grey</p>
</div>
<div class="col-sm-6">
<ul>
<li>General Text Color</li>
</ul>
</div>
</div>
<h2 id="bootstrap-colors" > Understanding Bootstrap colors</h2>
<hr>
<div class="row">
<div class="col-sm-3">
<div class="btn btn-lg btn-success">Success</div>
</div>
<div class="col-sm-9">
<p> Use cases: </p>
<ul>
<li>Save buttons</li>
<li>Messages which indicate a successful action, such as server connection, or successful save</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="btn btn-lg btn-primary">Primary</div>
</div>
<div class="col-sm-9">
<p> Use cases:</p>
<ul>
<li>Any neutral BUT primary action item, that is neither good nor bad. This depends on the order of items.</li>
<li>When it is the only button on the page (the color coordinates better with overall theme)</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="btn btn-lg btn-info">Info</div>
</div>
<div class="col-sm-9">
<p> Use cases: </p>
<ul>
<li>Help and info buttons and texts</li>
<li>Settings, options and details</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="btn btn-lg btn-warning">Warning</div>
</div>
<div class="col-sm-9">
<p> Use cases: </p>
<ul>
<li>Alerts that bring attention to a potentially problematic issue that is not yet causing an error but might </li>
<li>Buttons that don't have a full delete effect but should be alerting, for instance "Delete Some"</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="btn btn-lg btn-danger">Danger</div>
</div>
<div class="col-sm-9">
<p> Use cases: </p>
<ul>
<li>Error alerts</li>
<li>All Delete and remove buttons</li>
</ul>
</div>
</div>
</div>
<div id="icons">
<div class="page-header">
<h2>Icons</h2>
</div>
<div class="row">
<div class="row">
<div class="col-xs-9">
<p> OSF uses Font Awesome 4 without any overrides. Font Awesome is a font based icon library, so it can scale and take css rules as any other text. Use as shown below and check documentation for details.</p>
<div class="alert alert-info"><b><i class="fa fa-info"></i> Tip: </b> There is a lot more you can do with font awesome, such as spin, use different sizes, stack two on top of each other etc. Make sure you check out the documentation. </div>
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
<pre>
<code class="language-markup">
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
</code>
</pre>
<div class="osf-box-lt p-lg m-b-lg">
<h4> Which icons to use?</h4>
<table class="table">
<thead>
<tr>
<th>Action</th>
<th>Icon to use</th>
<th>FA class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toggling show/hide of content with up and down</td>
<td><i class="fa fa-angle-up"></i> <i class="fa fa-angle-down"></i> </td>
<td>fa-angle-right, fa-angle-down</td>
</tr>
<tr>
<td>Deleting tabular or repeating data</td>
<td><i class="fa fa-times"></i></td>
<td>fa-times</td>
</tr>
<tr>
<td>Deleting stand alone items or important items</td>
<td><i class="fa fa-trash-o"></i></td>
<td>fa-trash-o</td>
</tr>
<tr>
<td>Inline help buttons</td>
<td><i class="fa fa-question-circle"></i></td>
<td>fa-question-circle</td>
</tr>
</tbody>
</table>
<p>There is no standardization beyond these icons. Use of icons with or without buttons is very contexual to what the action is. Developers should err on the side of not using icons if in doubt and should not use icons outside their conventions (i.e. Link icons, save icons etc.) </p>
</div>
<div class="osf-box-lt p-lg">
<h4>Should we use icons with buttons?</h4>
<div class="row">
<div class="col-xs-6">
<h5 class="text-success">YES if:</h5>
<ul>
<li>There are a lot of buttons, i.e in a toolbar</li>
<li>Icons are repeated in other sections of the page to show that they are related to button text</li>
<li>If narrow screens show only icons and not the text</li>
<li>The button is very widely used together with text in general user experience. I.e. Create, Delete, Edit type of single words get icons; but not "Create Registration"</li>
</ul>
</div>
<div class="col-xs-6">
<h5 class="text-danger">NO if:</h5>
<ul>
<li>There is a stand alone button</li>
<li>Button text is not general enough to be natural (e.g. Make public) </li>
<li>The icon is not intuitive for that task, e.g. <button class="btn btn-sm btn-default"><i class="fa fa-globe"></i> Open Dropbox </button></li>
</ul>
</div>
</div>
<p><strong> If icons are use in buttons they should always be on the LEFT side </strong></p>
</div>
</div>
<div class="col-xs-3">
<a href="http://fortawesome.github.io/Font-Awesome/icons/" class="btn btn-sm btn-default"> Font Awesome documentation</a>
</div>
</div>
</div>
</div>
<!--COMPONENTS PAGE-->
<div id="components" class=" theme-showcase" >
<div class="page-header">
<h2>Components</h2>
</div>
<h3 id="buttons">Buttons</h3>
<div class="row">
<div class="col-xs-9">
<p> We use the default Bootstrap buttons EXCEPT: default button has light grey background rather than white. You don't need to add any classes, just use the standard bootstrap class for default. </p>
<p>Only one size is provided here, for more sizes please check Bootstrap documentation.</p>
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<pre>
<code class="language-markup">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</code>
</pre>
<div class="m-t-md m-b-md p-md osf-box-lt">
<h4 class="text-success"> Which buttons to use:</h4>
<p> Follow the colors and text below in your use of buttons. Mouseover the buttons
for specific use cases.</p>
<table class="table">
<thead>
<tr>
<th>Action</th>
<th>Button and text to use</th>
</tr>
</thead>
<tbody>
<tr>
<td>Non modifying changes:</td>
<td>
<button type="button" title="Cancel an action"
class="btn btn-default">Cancel</button>
<button type="button" title="Close a modal"
class="btn btn-default">Close</button>
<button type="button" title="Go back to a previous window"
class="btn btn-default">Back</button>
</td>
</tr>
<tr>
<td>Saving and adding</td>
<td>
<button type="button" title="Save aomething - Don't use submit"
class="btn btn-success">Save</button>
<button type="button" title="Upload something sciency"
class="btn btn-success">Upload</button>
<button type="button" title="Add a user"
class="btn btn-success">Add user</button>
<button type="button" title="Apply"
class="btn btn-success">Apply</button>
</td>
</tr>
<tr>
<td>Removal</td>
<td>
<button type="button" title="Delete an item - Don't use remove"
class="btn btn-danger">Delete</button>
<button type="button" title="Delete multiple items"
class="btn btn-danger">Delete all</button>
</td>
</tr>
<tr>
<td>Information and settings</td>
<td>
<button type="button" title="Access settings"
class="btn btn-info">Settings</button>
<button type="button" title="Give additional information"
class="btn btn-info"><i class="fa fa-info"></i> </button>
</td>
</tr>
<tr>
<td>Other call to action</td>
<td>
<button type="button" title="Create an account"
class="btn btn-primary">Create an account</button>
<button type="button" title="Download some science"
class="btn btn-primary">Download</button>
<button type="button" title="Open something"
class="btn btn-primary">Open</button>
<button type="button" title="Auto fill"
class="btn btn-primary">Auto fill</button>
<button type="button" title="Got it "
class="btn btn-primary">Got it</button>
</td>
</tr>
</tbody>
</table>
</div>
<h4 class="m-t-lg">Guidelines for button text</h4>
<ul>
<li>Do not use OK, even if it makes sense with the question being asked. People skim to the button often and OK doesn't help understand the meaning quickly. </li>
<li>For modals that only provide information to the user, use a single button with text "Got it" that closes the modal. Also use the X on top right. Do not use a question mark as modal header.</li>
<li>Buttons should have verbs and should start with verbs, e.g. "Make public" instead of "Public" alone or "Visibility Setting".</li>
<li> The button does not need to repeat the header, e.g. "Add" is enough for the submit button for a modal that says "Add Contributors".</li>
<li> Be deliberate in your use of Cancel vs Close. Cancel is supposed to undo any potential visual or data change or to denote change of intention by the user (e.g. Don't Save). Close simply removes an element from view. Modals need a Close button and forms need a Cancel button. If the form has brought the user to a different page Cancel should bring them back to where they were. </li>
<li>Back should be used in an OSF guided activity, where the user has to do a series of steps, and wants to return to a previous step. For example, signing up for the Preregister Prize. If the path is user driven, for example, creating a project, use the Cancel button.</li>
<li> Don't abandon Cancel or Close buttons next to Save in favor of Dismiss buttons (x at the top right of content). Cancel is easier to find and click and the X button is more appropriate for deleting portions of content (e.g. deleting a single employment institution in the profile).</li>
</ul>
<h4>Form buttons</h4>
<p>With forms don't use Submit. Use the word that the activity requires. </p>
<table class="table">
<thead>
<tr>
<th>Action</th>
<th>Text to use</th>
</tr>
</thead>
<tbody>
<tr>
<td>Creating a new item</td>
<td>Create</td>
</tr>
<tr>
<td>Editing the information of an existing item</td>
<td>Save</td>
</tr>
<tr>
<td>Deleting an item</td>
<td>Delete</td>
</tr>
<tr>
<td>Applying a setting (for instance add ons)</td>
<td>Apply</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-3">
<a href="http://getbootstrap.com/css/#buttons" class="btn btn-sm btn-default"> Bootstrap documentation </a>
</div>
</div>
<hr />
<h3 id="links"> Links </h3>
<div class="row">
<div class="col-xs-12 m-b-lg">
<p> OSF uses three types of links: </p>
<div class="example p-md m-b-md">
<h4> Regular link with color</h4>
<a href="#">Lorem ipsum</a> dolor sit amet.
</div>
<div class="example p-md m-b-md ">
<h4> With solid line </h4>
<a class="link-solid" href="#">Lorem ipsum</a> dolor sit amet.
</div>
<div class="example p-md m-b-md">
<h4> With dashed line </h4>
<a class="link-dashed" href="#">Lorem ipsum</a> dolor sit amet.
</div>
<h4> When to Use link styles?</h4>
<p>These three styles are not specific to certain use cases. In regular circumstances use the regular link. The alternatives are provided in case for design or development reasons an underline is required </p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<pre><code class="language-markup">
<a href="#">Lorem ipsum</a> dolor sit amet.
<a class="link-solid" href="#">Lorem ipsum</a> dolor sit amet.
<a class="link-dashed" href="#">Lorem ipsum</a> dolor sit amet.</code></pre>
</div>
</div>
<hr />
<h3 id="panels"> Panels/widgets </h3>
<div class="row">
<div class="col-xs-9">
<p> Panels are boxes that have special styling for header, body and footer. They are often used as widgets. We use bootstrap style with minor overrides to flatten borders. </p>
<p> <b> Tip:</b> You can use the bootstrap colors for the panels by adding panel type such as "panel-info" as class. Footer is not going to change color. </p>
</div>
<div class="col-xs-3">
<a href="http://getbootstrap.com/components/#style.html" class="btn btn-sm btn-default"> Bootstrap documentation </a>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h3 class="panel-title">Panel title</h3>
<div class="pull-right">
<a href="/abrs9/wiki/" class="btn btn-sm btn-default"> Button </a>
</div>
</div>
<div class="panel-body">
<div class="break-word"><p>Cras mollis viverra lorem at pretium. Praesent fringilla lacus vitae auctor porttitor. Suspendisse auctor tincidunt ipsum, eget pulvinar ipsum fringilla eget. Nam blandit faucibus augue, at tincidunt dolor condimentum ut. Mauris tempor luctus sem ac commodo. Praesent elit eros, cursus a eleifend vel, luctus et ex. Duis nec augue ligula. Quisque semper tristique ligula. Donec massa neque, vehicula id lectus et, ullamcorper iaculis nibh. Donec fermentum, lacus nec hendrerit ultrices, quam nulla sodales sem, quis tempor mauris urna et magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas blandit nunc enim, eget cursus tortor aliquet ac.</p>
<p>Praesent pulvinar leo a iaculis cursus. Nulla vitae bibendum purus, non venenatis eros. Etiam suscipit laoreet purus. Proin in varius elit. Morbi felis magna, posuere in ultrices vitae, commodo sit amet est. Nullam eget metus at ligula viverra suscipit. Nulla imperdiet molestie sapien, tincidunt scelerisque nunc rutrum quis.
</p>
</div>
</div>
<div class="panel-footer clearfix">
Footer contents here.
<div class="pull-right">
<button class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<pre>
<code class="language-markup">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Wiki</h3>
<div class="pull-right">
<a href="/abrs9/wiki/" class="btn btn-sm btn-default">
Button
</a>
</div>
</div>
<div class="panel-body">
<div class="break-word">
<p>
Cras mollis viverra lorem at pretium. Praesent fringilla lacus vitae auctor porttitor. Suspendisse auctor tincidunt ip...
</p>
</div>
<div class="panel-footer clearfix">
Footer contents here.
<div class="pull-right">
<button class="btn btn-success">Save</button>
</div>
</div>
</div>
</code>
</pre>
</div>
</div>
<hr />
<h3 id="modals"> Modals </h3>
<div class="row">
<div class="col-xs-9">
<p> OSF Uses modals that are based on the bootstrap versions but modified to be more flat and similar to the Google Material design modals. Use the code as shown below. </p>
<p><button class="btn btn-info" data-toggle="modal" data-target="#myModal">Click to open modal </button></p>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">Modal title</h3>
</div>
<div class="modal-body">
<p> Cras mollis viverra lorem at pretium. Praesent fringilla lacus vitae auctor porttitor. Suspendisse auctor tincidunt ipsum, eget pulvinar ipsum fringilla eget. Nam blandit faucibus augue, at tincidunt dolor condimentum ut. Mauris tempor luctus sem ac commodo. Praesent elit eros, cursus a eleifend vel, luctus et ex. Duis nec augue ligula. Quisque semper tristique ligula. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3">
<a href="http://getbootstrap.com/javascript/#modals" class="btn btn-sm btn-default"> Bootstrap documentation </a>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<pre>
<code class="language-markup">
<p><button class="btn btn-info" data-toggle="modal" data-target="#myModal">Click to open modal </button></p>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">Modal title</h3>
</div>
<div class="modal-body">
<p> Cras mollis viverra lorem at pretium. Praesent fringilla lacus vitae auctor porttitor. Suspendisse auctor tincidunt ipsum, eget pulvinar ipsum fringilla eget. Nam blandit faucibus augue, at tincidunt dolor condimentum ut. Mauris tempor luctus sem ac commodo. Praesent elit eros, cursus a eleifend vel, luctus et ex. Duis nec augue ligula. Quisque semper tristique ligula. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</code>
</pre>
<div class="osf-box-lt p-lg ">
<h4> Styling modals for alert types</h4>
<p> Sometimes you may want to adjust modals to show that the message contained is a significant delete and not just information. To this effect you can use the alert colors that were discussed in the <a href="#alerts">alert section</a> of this page. To use alert colors in the header add the pertinent alert-color class i.e. "alert-danger" as shown below:</p>
<p><button class="btn btn-danger" data-toggle="modal" data-target="#dangerModal">Delete related modal </button></p>
<p>Use only <span class="text-danger"> danger</span>, <span class="text-warning"> warning</span>, and <span class="text-info"> info</span> colors, do not use primary or success. Use colors as they relate to the operation. </p>
<div class="modal fade" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="dangerModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header alert-danger">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel2">Delete Item?</h3>
</div>
<div class="modal-body">
<p> Cras mollis viverra lorem at pretium. Praesent fringilla lacus vitae auctor porttitor. Suspendisse auctor tincidunt ipsum, eget pulvinar ipsum fringilla eget. Nam blandit faucibus augue, at tincidunt dolor condimentum ut. Mauris tempor luctus sem ac commodo. Praesent elit eros, cursus a eleifend vel, luctus et ex. Duis nec augue ligula. Quisque semper tristique ligula. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
</div>
<pre>
<code class="language-markup">
<div class="modal-header alert-danger">
...
</div>
<div class="modal-header alert-info">
...
</div>
<div class="modal-header alert-warning">
...
</div>
</code>
</pre>
<h4 class="m-t-lg">Guidelines for Modal Text</h4>
<ul>
<li>Modal titles should generally be clear, concise sentence fragments.</li>
<li>Modal titles should be in sentence case (first letter and proper nouns capitalized).</li>
<li>Modal titles should include question marks (if they are questions), but no other punctuation.</li>
<li>Follow 'Guidelines for Button Text' as shown above.</li>
<li>A user should be able to skip the body of the modal and still understand their general modal options.</li>
<li>Body text should be in full sentences.</li>
<li>These guidelines are modeled after how Google handles “Alerts with title bars.” See <a href="https://www.google.com/design/spec/components/dialogs.html#dialogs-alerts">their guide</a> for examples.</li>
</ul>