uniform-ui 0.6 → 1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +27 -0
  3. data/CNAME +1 -0
  4. data/Gemfile +0 -4
  5. data/Gemfile.lock +1 -11
  6. data/README.md +2 -3
  7. data/Rakefile +34 -24
  8. data/index.html +240 -1160
  9. data/preview/{_tables.html.erb → alerts.html.erb} +0 -0
  10. data/preview/buttons.html.erb +62 -0
  11. data/preview/cards.html.erb +23 -0
  12. data/preview/colors.html.erb +22 -0
  13. data/preview/{_tabs.html.erb → dropdown.html.erb} +0 -0
  14. data/preview/form.html.erb +233 -0
  15. data/preview/grid.html.erb +304 -0
  16. data/preview/helpers.html.erb +225 -0
  17. data/preview/index.html.erb +74 -50
  18. data/preview/{_tiles.html.erb → labels.html.erb} +0 -0
  19. data/preview/layout.html.erb +63 -0
  20. data/preview/loaders.html.erb +83 -0
  21. data/preview/modal.html.erb +1 -0
  22. data/preview/nav.html.erb +77 -0
  23. data/preview/preview.scss +39 -10
  24. data/preview/rows.html.erb +36 -0
  25. data/preview/select.html.erb +1 -0
  26. data/preview/tables.html.erb +1 -0
  27. data/preview/tabs.html.erb +17 -0
  28. data/preview/tiles.html.erb +1 -0
  29. data/preview/tooltip.erb +1 -0
  30. data/site/alerts.html +157 -0
  31. data/site/alerts.html copy +133 -0
  32. data/site/buttons.html +286 -0
  33. data/site/cards.html +177 -0
  34. data/site/colors.html +275 -0
  35. data/site/dropdown.html +157 -0
  36. data/site/dropdown.html copy +141 -0
  37. data/site/form.html +369 -0
  38. data/site/grid.html +716 -0
  39. data/site/helpers.html +1008 -0
  40. data/site/index.html +208 -617
  41. data/site/labels.html +157 -0
  42. data/site/layout.html +313 -0
  43. data/site/loaders.html +233 -0
  44. data/site/modal.html +157 -0
  45. data/site/nav.html +229 -0
  46. data/site/preview.css +1 -1
  47. data/site/preview.js +59 -0
  48. data/site/rows.html +190 -0
  49. data/site/select.html +157 -0
  50. data/site/tables.html +157 -0
  51. data/site/tabs.html +171 -0
  52. data/site/tiles.html +157 -0
  53. data/site/tiles.html copy +109 -0
  54. data/site/tooltip +157 -0
  55. data/site/uniform.css +1 -1
  56. data/uniform.gemspec +2 -8
  57. data/vendor/assets/stylesheets/uniform.scss +4 -4
  58. data/vendor/assets/stylesheets/uniform/base.scss +2 -0
  59. data/vendor/assets/stylesheets/uniform/components/alert.scss +27 -0
  60. data/vendor/assets/stylesheets/uniform/components/buttons.scss +135 -86
  61. data/vendor/assets/stylesheets/uniform/components/card.scss +69 -67
  62. data/vendor/assets/stylesheets/uniform/components/dropdown.scss +69 -0
  63. data/vendor/assets/stylesheets/uniform/components/form.scss +268 -85
  64. data/vendor/assets/stylesheets/uniform/components/grid.scss +214 -72
  65. data/vendor/assets/stylesheets/uniform/components/label.scss +63 -0
  66. data/vendor/assets/stylesheets/uniform/components/loaders.scss +38 -18
  67. data/vendor/assets/stylesheets/uniform/components/modal.scss +51 -0
  68. data/vendor/assets/stylesheets/uniform/components/nav.scss +171 -54
  69. data/vendor/assets/stylesheets/uniform/components/row.scss +69 -101
  70. data/vendor/assets/stylesheets/uniform/components/select.scss +98 -0
  71. data/vendor/assets/stylesheets/uniform/components/table.scss +83 -0
  72. data/vendor/assets/stylesheets/uniform/components/tabs.scss +39 -26
  73. data/vendor/assets/stylesheets/uniform/components/tile.scss +15 -27
  74. data/vendor/assets/stylesheets/uniform/components/tooltip.scss +46 -0
  75. data/vendor/assets/stylesheets/uniform/defaults.scss +85 -19
  76. data/vendor/assets/stylesheets/uniform/helpers.scss +82 -81
  77. data/vendor/assets/stylesheets/uniform/helpers/colors.scss +37 -0
  78. data/vendor/assets/stylesheets/uniform/helpers/margin.scss +44 -0
  79. data/vendor/assets/stylesheets/uniform/helpers/padding.scss +74 -0
  80. data/vendor/assets/stylesheets/uniform/helpers/sizes.scss +31 -0
  81. data/vendor/assets/stylesheets/uniform/helpers/text.scss +121 -0
  82. data/vendor/assets/stylesheets/uniform/mixins.scss +25 -48
  83. data/vendor/assets/stylesheets/uniform/variables.scss +10 -28
  84. metadata +61 -85
  85. data/preview/_buttons.html.erb +0 -59
  86. data/preview/_cards.html.erb +0 -82
  87. data/preview/_colors.html.erb +0 -12
  88. data/preview/_forms.html.erb +0 -196
  89. data/preview/_grid.html.erb +0 -49
  90. data/preview/_helpers.html.erb +0 -158
  91. data/preview/_inputs.html.erb +0 -93
  92. data/preview/_installation.html.erb +0 -4
  93. data/preview/_lists.html.erb +0 -53
  94. data/preview/_loaders.html.erb +0 -72
  95. data/preview/_nav.html.erb +0 -46
  96. data/preview/_philosophy.html.erb +0 -33
  97. data/preview/_rows.html.erb +0 -35
  98. data/preview/_uniform.html.erb +0 -4
  99. data/site/site/logo.png +0 -0
  100. data/site/site/preview.css +0 -1
  101. data/site/site/uniform.css +0 -1
  102. data/vendor/assets/stylesheets/uniform/components/inputs.scss +0 -131
  103. data/vendor/assets/stylesheets/uniform/components/lists.scss +0 -62
  104. data/vendor/assets/stylesheets/uniform/components/table-container.scss +0 -44
  105. data/vendor/assets/stylesheets/uniform/components/table-form.scss +0 -159
  106. data/vendor/assets/stylesheets/uniform/mixins/grid-framework.scss +0 -142
data/site/helpers.html ADDED
@@ -0,0 +1,1008 @@
1
+ <!DOCTYPE html>
2
+ <head>
3
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
4
+ <title>Uniform</title>
5
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css" type="text/css" media="screen">
6
+ <link rel="stylesheet" href="/site/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
7
+ <link rel="stylesheet" href="/site/preview.css" type="text/css" media="screen" charset="utf-8">
8
+ </head>
9
+ <body>
10
+ <div class="side-nav">
11
+ <div class="pad">
12
+ <a href="/">
13
+ <img src="/site/logo.png" class="block">
14
+ </a>
15
+ </div>
16
+ <div class="uniformNav vertical">
17
+ <div class="nav">
18
+
19
+
20
+
21
+ <a href="/site/helpers.html">
22
+ Helpers
23
+
24
+ </a>
25
+
26
+
27
+ <a href="/site/colors.html">
28
+ Colors
29
+
30
+ </a>
31
+
32
+
33
+ <a href="/site/grid.html">
34
+ Grid
35
+
36
+ </a>
37
+
38
+
39
+ <a href="/site/buttons.html">
40
+ Buttons
41
+
42
+ </a>
43
+
44
+
45
+ <a href="/site/tables.html">
46
+ Tables
47
+
48
+ <span class="uniformLabel yellow">todo</span>
49
+
50
+ </a>
51
+
52
+
53
+ <a href="/site/cards.html">
54
+ Cards
55
+
56
+ </a>
57
+
58
+
59
+ <a href="/site/rows.html">
60
+ Rows
61
+
62
+ </a>
63
+
64
+
65
+ <a href="/site/form.html">
66
+ Form
67
+
68
+ </a>
69
+
70
+
71
+ <a href="/site/loaders.html">
72
+ Loaders
73
+
74
+ </a>
75
+
76
+
77
+ <a href="/site/nav.html">
78
+ Nav
79
+
80
+ </a>
81
+
82
+
83
+ <a href="/site/tabs.html">
84
+ Tabs
85
+
86
+ </a>
87
+
88
+
89
+ <a href="/site/tiles.html">
90
+ Tiles
91
+
92
+ <span class="uniformLabel yellow">todo</span>
93
+
94
+ </a>
95
+
96
+
97
+ <a href="/site/labels.html">
98
+ Labels
99
+
100
+ <span class="uniformLabel yellow">todo</span>
101
+
102
+ </a>
103
+
104
+
105
+ <a href="/site/alerts.html">
106
+ Alerts
107
+
108
+ <span class="uniformLabel yellow">todo</span>
109
+
110
+ </a>
111
+
112
+
113
+ <a href="/site/dropdown.html">
114
+ Dropdown
115
+
116
+ <span class="uniformLabel yellow">todo</span>
117
+
118
+ </a>
119
+
120
+
121
+ <a href="/site/modal.html">
122
+ Modal
123
+
124
+ <span class="uniformLabel yellow">todo</span>
125
+
126
+ </a>
127
+
128
+
129
+ <a href="/site/select.html">
130
+ Select
131
+
132
+ <span class="uniformLabel yellow">todo</span>
133
+
134
+ </a>
135
+
136
+
137
+ <a href="/site/tooltip.html">
138
+ Tooltip
139
+
140
+ <span class="uniformLabel yellow">todo</span>
141
+
142
+ </a>
143
+
144
+ </div>
145
+ </div>
146
+ </div>
147
+ <div class="main-content overflow-hidden">
148
+ <div class="section">
149
+ <h1>Helpers</h1>
150
+ <p>These classes are mostly used as modifieres to base elements or compontents</p>
151
+
152
+ <h3>Breakpoints</h3>
153
+ <p>
154
+ Any helper can have <code>-sm</code>, <code>-md</code>, <code>-lg</code>,
155
+ or <code>-xl</code> added to cause helper to only go into effect for that
156
+ breakpoint.
157
+ </p>
158
+
159
+ <h3>Padding</h3>
160
+ <table class="uniformTable top">
161
+ <tr>
162
+ <th></th>
163
+ <th></th>
164
+ </tr>
165
+
166
+ <tr class="middle">
167
+ <td>
168
+ <code>.pad-tiny</code>
169
+ </td>
170
+ <td>
171
+ <pre class='margin-none'>padding: 0.25em;</pre>
172
+ </td>
173
+ </tr>
174
+
175
+ <tr class="middle">
176
+ <td>
177
+ <code>.pad-less</code>
178
+ </td>
179
+ <td>
180
+ <pre class='margin-none'>padding: 0.5em;</pre>
181
+ </td>
182
+ </tr>
183
+
184
+ <tr class="middle">
185
+ <td>
186
+ <code>.pad</code>
187
+ </td>
188
+ <td>
189
+ <pre class='margin-none'>padding: 1em;</pre>
190
+ </td>
191
+ </tr>
192
+
193
+ <tr class="middle">
194
+ <td>
195
+ <code>.pad-more</code>
196
+ </td>
197
+ <td>
198
+ <pre class='margin-none'>padding: 2em;</pre>
199
+ </td>
200
+ </tr>
201
+
202
+ <tr class="middle">
203
+ <td>
204
+ <code>.pad-super</code>
205
+ </td>
206
+ <td>
207
+ <pre class='margin-none'>padding: 4em;</pre>
208
+ </td>
209
+ </tr>
210
+
211
+ <tr class="middle">
212
+ <td>
213
+ <code>.pad-h</code>
214
+ </td>
215
+ <td>
216
+ <pre class='margin-none'>padding-left: 1em; padding-right: 1em;</pre>
217
+ </td>
218
+ </tr>
219
+
220
+ <tr class="middle">
221
+ <td>
222
+ <code>.pad-h-less</code>
223
+ </td>
224
+ <td>
225
+ <pre class='margin-none'>padding-left: 0.5em; padding-right: 0.5em;</pre>
226
+ </td>
227
+ </tr>
228
+
229
+ <tr class="middle">
230
+ <td>
231
+ <code>.pad-v</code>
232
+ </td>
233
+ <td>
234
+ <pre class='margin-none'>padding-top: 1em; padding-bottom: 1em;</pre>
235
+ </td>
236
+ </tr>
237
+
238
+ <tr class="middle">
239
+ <td>
240
+ <code>.pad-v-less</code>
241
+ </td>
242
+ <td>
243
+ <pre class='margin-none'>padding-top: 0.5em; padding-bottom: 0.5em;</pre>
244
+ </td>
245
+ </tr>
246
+
247
+ </table>
248
+
249
+ <h3>Margin</h3>
250
+ <table class="uniformTable top">
251
+ <tr>
252
+ <th></th>
253
+ <th></th>
254
+ </tr>
255
+
256
+ <tr class="middle">
257
+ <td>
258
+ <code>.margin-tiny</code>
259
+ </td>
260
+ <td>
261
+ <pre class='margin-none'>margin-top: 0.25em; margin-bottom:0.25em</pre>
262
+ </td>
263
+ </tr>
264
+
265
+ <tr class="middle">
266
+ <td>
267
+ <code>.margin-less</code>
268
+ </td>
269
+ <td>
270
+ <pre class='margin-none'>margin-top: 0.5em; margin-bottom: 0.5em</pre>
271
+ </td>
272
+ </tr>
273
+
274
+ <tr class="middle">
275
+ <td>
276
+ <code>.margin</code>
277
+ </td>
278
+ <td>
279
+ <pre class='margin-none'>margin-top: 1em; margin-bottom: 1em;</pre>
280
+ </td>
281
+ </tr>
282
+
283
+ <tr class="middle">
284
+ <td>
285
+ <code>.margin-more</code>
286
+ </td>
287
+ <td>
288
+ <pre class='margin-none'>margin-top 2em; margin-bottom: 2em</pre>
289
+ </td>
290
+ </tr>
291
+
292
+ <tr class="middle">
293
+ <td>
294
+ <code>.margin-super</code>
295
+ </td>
296
+ <td>
297
+ <pre class='margin-none'>margin-top: 4em; margin-bottom: 2em</pre>
298
+ </td>
299
+ </tr>
300
+
301
+ <tr class="middle">
302
+ <td>
303
+ <code>.margin-h</code>
304
+ </td>
305
+ <td>
306
+ <pre class='margin-none'>margin-left: 1em; margin-right: 1em;</pre>
307
+ </td>
308
+ </tr>
309
+
310
+ <tr class="middle">
311
+ <td>
312
+ <code>.margin-none</code>
313
+ </td>
314
+ <td>
315
+ <pre class='margin-none'>margin: 0 !important;</pre>
316
+ </td>
317
+ </tr>
318
+
319
+ </table>
320
+
321
+ <h3>Colors</h3>
322
+ <table class="uniformTable top">
323
+ <tr>
324
+ <th></th>
325
+ <th></th>
326
+ </tr>
327
+
328
+ <tr class="middle">
329
+ <td>
330
+ <code>.text-green</code>
331
+ </td>
332
+ <td>
333
+ <pre class='margin-none'>color: $green</pre>
334
+ </td>
335
+ </tr>
336
+
337
+ <tr class="middle">
338
+ <td>
339
+ <code>.bg-green</code>
340
+ </td>
341
+ <td>
342
+ <pre class='margin-none'>background-color: $green</pre>
343
+ </td>
344
+ </tr>
345
+
346
+ <tr class="middle">
347
+ <td>
348
+ <code>.a-green</code>
349
+ </td>
350
+ <td>
351
+ <pre class='margin-none'>a{ color: $green}</pre>
352
+ </td>
353
+ </tr>
354
+
355
+ <tr class="middle">
356
+ <td>
357
+ <code>.a-hover-green</code>
358
+ </td>
359
+ <td>
360
+ <pre class='margin-none'>a:hover{ color: $green}</pre>
361
+ </td>
362
+ </tr>
363
+
364
+ </table>
365
+
366
+ <h3>Sizes</h3>
367
+ <table class="uniformTable top">
368
+ <tr>
369
+ <th></th>
370
+ <th></th>
371
+ </tr>
372
+
373
+ <tr class="middle">
374
+ <td>
375
+ <code>.width-50-p</code>
376
+ </td>
377
+ <td>
378
+ <pre class='margin-none'>width: 50%</pre>
379
+ </td>
380
+ </tr>
381
+
382
+ <tr class="middle">
383
+ <td>
384
+ <code>.width-50-px</code>
385
+ </td>
386
+ <td>
387
+ <pre class='margin-none'>width: 50px</pre>
388
+ </td>
389
+ </tr>
390
+
391
+ <tr class="middle">
392
+ <td>
393
+ <code>.width-50-vw</code>
394
+ </td>
395
+ <td>
396
+ <pre class='margin-none'>width: 50vw</pre>
397
+ </td>
398
+ </tr>
399
+
400
+ <tr class="middle">
401
+ <td>
402
+ <code>.max-width-50-p</code>
403
+ </td>
404
+ <td>
405
+ <pre class='margin-none'>max-width: 50%</pre>
406
+ </td>
407
+ </tr>
408
+
409
+ <tr class="middle">
410
+ <td>
411
+ <code>.max-width-50-px</code>
412
+ </td>
413
+ <td>
414
+ <pre class='margin-none'>max-width: 50px</pre>
415
+ </td>
416
+ </tr>
417
+
418
+ <tr class="middle">
419
+ <td>
420
+ <code>.height-50-p</code>
421
+ </td>
422
+ <td>
423
+ <pre class='margin-none'>height: 50%</pre>
424
+ </td>
425
+ </tr>
426
+
427
+ <tr class="middle">
428
+ <td>
429
+ <code>.height-50-px</code>
430
+ </td>
431
+ <td>
432
+ <pre class='margin-none'>height: 50px</pre>
433
+ </td>
434
+ </tr>
435
+
436
+ <tr class="middle">
437
+ <td>
438
+ <code>.height-50-vh</code>
439
+ </td>
440
+ <td>
441
+ <pre class='margin-none'>height: 50vh</pre>
442
+ </td>
443
+ </tr>
444
+
445
+ <tr class="middle">
446
+ <td>
447
+ <code>.max-height-50-px</code>
448
+ </td>
449
+ <td>
450
+ <pre class='margin-none'>max-height: 50px</pre>
451
+ </td>
452
+ </tr>
453
+
454
+ <tr class="middle">
455
+ <td>
456
+ <code>.min-height-50-vh</code>
457
+ </td>
458
+ <td>
459
+ <pre class='margin-none'>min-height: 50vh</pre>
460
+ </td>
461
+ </tr>
462
+
463
+ </table>
464
+
465
+ <h3>Text</h3>
466
+ <table class="uniformTable top">
467
+ <tr>
468
+ <th></th>
469
+ <th></th>
470
+ </tr>
471
+
472
+ <tr class="middle">
473
+ <td>
474
+ <code>.text-caps</code>
475
+ </td>
476
+ <td>
477
+ <pre class='margin-none'>text-transform: uppercase</pre>
478
+ </td>
479
+ </tr>
480
+
481
+ <tr class="middle">
482
+ <td>
483
+ <code>.text-small-less</code>
484
+ </td>
485
+ <td>
486
+ <pre class='margin-none'>font-size: 0.9em</pre>
487
+ </td>
488
+ </tr>
489
+
490
+ <tr class="middle">
491
+ <td>
492
+ <code>.text-small</code>
493
+ </td>
494
+ <td>
495
+ <pre class='margin-none'>font-size: 0.8em</pre>
496
+ </td>
497
+ </tr>
498
+
499
+ <tr class="middle">
500
+ <td>
501
+ <code>.text-large</code>
502
+ </td>
503
+ <td>
504
+ <pre class='margin-none'>font-size: 1.2em</pre>
505
+ </td>
506
+ </tr>
507
+
508
+ <tr class="middle">
509
+ <td>
510
+ <code>.text-1rem</code>
511
+ </td>
512
+ <td>
513
+ <pre class='margin-none'>font-size: 1rem</pre>
514
+ </td>
515
+ </tr>
516
+
517
+ <tr class="middle">
518
+ <td>
519
+ <code>.text-larger</code>
520
+ </td>
521
+ <td>
522
+ <pre class='margin-none'>font-size: 1.4em</pre>
523
+ </td>
524
+ </tr>
525
+
526
+ <tr class="middle">
527
+ <td>
528
+ <code>.text-super</code>
529
+ </td>
530
+ <td>
531
+ <pre class='margin-none'>font-size: 3em</pre>
532
+ </td>
533
+ </tr>
534
+
535
+ <tr class="middle">
536
+ <td>
537
+ <code>.text-subtle</code>
538
+ </td>
539
+ <td>
540
+ <pre class='margin-none'>font-size: 90%; opacity: 0.8</pre>
541
+ </td>
542
+ </tr>
543
+
544
+ <tr class="middle">
545
+ <td>
546
+ <code>.text-subtle-more</code>
547
+ </td>
548
+ <td>
549
+ <pre class='margin-none'>font-size: 80%; opacity: 0.6</pre>
550
+ </td>
551
+ </tr>
552
+
553
+ <tr class="middle">
554
+ <td>
555
+ <code>.text-muted</code>
556
+ </td>
557
+ <td>
558
+ <pre class='margin-none'>opacity: 0.8</pre>
559
+ </td>
560
+ </tr>
561
+
562
+ <tr class="middle">
563
+ <td>
564
+ <code>.text-muted-more</code>
565
+ </td>
566
+ <td>
567
+ <pre class='margin-none'>opacity: 0.6</pre>
568
+ </td>
569
+ </tr>
570
+
571
+ <tr class="middle">
572
+ <td>
573
+ <code>.text-left</code>
574
+ </td>
575
+ <td>
576
+ <pre class='margin-none'>text-align: left !important</pre>
577
+ </td>
578
+ </tr>
579
+
580
+ <tr class="middle">
581
+ <td>
582
+ <code>.text-right</code>
583
+ </td>
584
+ <td>
585
+ <pre class='margin-none'>text-align: right</pre>
586
+ </td>
587
+ </tr>
588
+
589
+ <tr class="middle">
590
+ <td>
591
+ <code>.text-center</code>
592
+ </td>
593
+ <td>
594
+ <pre class='margin-none'>text-align: center</pre>
595
+ </td>
596
+ </tr>
597
+
598
+ <tr class="middle">
599
+ <td>
600
+ <code>.text-justify</code>
601
+ </td>
602
+ <td>
603
+ <pre class='margin-none'>text-align: justify</pre>
604
+ </td>
605
+ </tr>
606
+
607
+ <tr class="middle">
608
+ <td>
609
+ <code>.text-overflow</code>
610
+ </td>
611
+ <td>
612
+ <pre class='margin-none'>@include text-overflow</pre>
613
+ </td>
614
+ </tr>
615
+
616
+ <tr class="middle">
617
+ <td>
618
+ <code>.text-bold</code>
619
+ </td>
620
+ <td>
621
+ <pre class='margin-none'>font-weight: 700</pre>
622
+ </td>
623
+ </tr>
624
+
625
+ <tr class="middle">
626
+ <td>
627
+ <code>.text-light</code>
628
+ </td>
629
+ <td>
630
+ <pre class='margin-none'>font-weight: 300</pre>
631
+ </td>
632
+ </tr>
633
+
634
+ <tr class="middle">
635
+ <td>
636
+ <code>.text-lightest</code>
637
+ </td>
638
+ <td>
639
+ <pre class='margin-none'>font-weight: 100</pre>
640
+ </td>
641
+ </tr>
642
+
643
+ <tr class="middle">
644
+ <td>
645
+ <code>.text-normal</code>
646
+ </td>
647
+ <td>
648
+ <pre class='margin-none'>font-weight: normal !important</pre>
649
+ </td>
650
+ </tr>
651
+
652
+ <tr class="middle">
653
+ <td>
654
+ <code>.text-middle</code>
655
+ </td>
656
+ <td>
657
+ <pre class='margin-none'>vertical-align:middle</pre>
658
+ </td>
659
+ </tr>
660
+
661
+ <tr class="middle">
662
+ <td>
663
+ <code>.text-top</code>
664
+ </td>
665
+ <td>
666
+ <pre class='margin-none'>vertical-align:top</pre>
667
+ </td>
668
+ </tr>
669
+
670
+ <tr class="middle">
671
+ <td>
672
+ <code>.text-tight</code>
673
+ </td>
674
+ <td>
675
+ <pre class='margin-none'>line-height:1.3</pre>
676
+ </td>
677
+ </tr>
678
+
679
+ <tr class="middle">
680
+ <td>
681
+ <code>.required</code>
682
+ </td>
683
+ <td>
684
+ <pre class='margin-none'>color:$red</pre>
685
+ </td>
686
+ </tr>
687
+
688
+ <tr class="middle">
689
+ <td>
690
+ <code>.warn:hover</code>
691
+ </td>
692
+ <td>
693
+ <pre class='margin-none'>color:$red</pre>
694
+ </td>
695
+ </tr>
696
+
697
+ <tr class="middle">
698
+ <td>
699
+ <code>p.large</code>
700
+ </td>
701
+ <td>
702
+ <pre class='margin-none'>font-size:1.5em; font-weight:300</pre>
703
+ </td>
704
+ </tr>
705
+
706
+ <tr class="middle">
707
+ <td>
708
+ <code>.text-italic</code>
709
+ </td>
710
+ <td>
711
+ <pre class='margin-none'>font-style: italic</pre>
712
+ </td>
713
+ </tr>
714
+
715
+ <tr class="middle">
716
+ <td>
717
+ <code>.text-no-wrap</code>
718
+ </td>
719
+ <td>
720
+ <pre class='margin-none'>white-space: nowrap; overflow:hidden</pre>
721
+ </td>
722
+ </tr>
723
+
724
+ <tr class="middle">
725
+ <td>
726
+ <code>.text-no-decoration</code>
727
+ </td>
728
+ <td>
729
+ <pre class='margin-none'>text-decoration: none; a{text-decoration: none;}</pre>
730
+ </td>
731
+ </tr>
732
+
733
+ <tr class="middle">
734
+ <td>
735
+ <code>.text-height-1</code>
736
+ </td>
737
+ <td>
738
+ <pre class='margin-none'>line-height: 1</pre>
739
+ </td>
740
+ </tr>
741
+
742
+ <tr class="middle">
743
+ <td>
744
+ <code>.text-warn</code>
745
+ </td>
746
+ <td>
747
+ <pre class='margin-none'>&amp;:hover{color:$red !important;}</pre>
748
+ </td>
749
+ </tr>
750
+
751
+ </table>
752
+
753
+ <h3>Layout</h3>
754
+ <table class="uniformTable top">
755
+ <tr>
756
+ <th></th>
757
+ <th></th>
758
+ </tr>
759
+
760
+ <tr class="middle">
761
+ <td>
762
+ <code>.hidden</code>
763
+ </td>
764
+ <td>
765
+ <pre class='margin-none'>display:none !important;</pre>
766
+ </td>
767
+ </tr>
768
+
769
+ <tr class="middle">
770
+ <td>
771
+ <code>.round</code>
772
+ </td>
773
+ <td>
774
+ <pre class='margin-none'>border-radius:50%;</pre>
775
+ </td>
776
+ </tr>
777
+
778
+ <tr class="middle">
779
+ <td>
780
+ <code>.rounded</code>
781
+ </td>
782
+ <td>
783
+ <pre class='margin-none'>border-radius: 0.25em;</pre>
784
+ </td>
785
+ </tr>
786
+
787
+ <tr class="middle">
788
+ <td>
789
+ <code>.pointer</code>
790
+ </td>
791
+ <td>
792
+ <pre class='margin-none'>cursor: pointer !important;</pre>
793
+ </td>
794
+ </tr>
795
+
796
+ <tr class="middle">
797
+ <td>
798
+ <code>.cursor-help</code>
799
+ </td>
800
+ <td>
801
+ <pre class='margin-none'>cursor: help;</pre>
802
+ </td>
803
+ </tr>
804
+
805
+ <tr class="middle">
806
+ <td>
807
+ <code>.handle</code>
808
+ </td>
809
+ <td>
810
+ <pre class='margin-none'>cursor: hand;</pre>
811
+ </td>
812
+ </tr>
813
+
814
+ <tr class="middle">
815
+ <td>
816
+ <code>.honeypot</code>
817
+ </td>
818
+ <td>
819
+ <pre class='margin-none'>position:absolute !important;
820
+ left:-999999px !important;
821
+ width:1px !important;
822
+ display:block !important;</pre>
823
+ </td>
824
+ </tr>
825
+
826
+ <tr class="middle">
827
+ <td>
828
+ <code>.border-#{$direction}</code>
829
+ </td>
830
+ <td>
831
+ <pre class='margin-none'>border-#{$direction}: 1px solid $gray-light;</pre>
832
+ </td>
833
+ </tr>
834
+
835
+ <tr class="middle">
836
+ <td>
837
+ <code>.border-dark-#{$direction}</code>
838
+ </td>
839
+ <td>
840
+ <pre class='margin-none'>border-#{$direction}: 1px solid darken($gray-light, 20);</pre>
841
+ </td>
842
+ </tr>
843
+
844
+ <tr class="middle">
845
+ <td>
846
+ <code>img.disabled</code>
847
+ </td>
848
+ <td>
849
+ <pre class='margin-none'>@include grayscale(1, 0.3)</pre>
850
+ </td>
851
+ </tr>
852
+
853
+ <tr class="middle">
854
+ <td>
855
+ <code>table.fixed</code>
856
+ </td>
857
+ <td>
858
+ <pre class='margin-none'>table-layout: fixed;</pre>
859
+ </td>
860
+ </tr>
861
+
862
+ <tr class="middle">
863
+ <td>
864
+ <code>.float-right</code>
865
+ </td>
866
+ <td>
867
+ <pre class='margin-none'>float:right;</pre>
868
+ </td>
869
+ </tr>
870
+
871
+ <tr class="middle">
872
+ <td>
873
+ <code>.float-left</code>
874
+ </td>
875
+ <td>
876
+ <pre class='margin-none'>float: left;</pre>
877
+ </td>
878
+ </tr>
879
+
880
+ <tr class="middle">
881
+ <td>
882
+ <code>.bleed-fix</code>
883
+ </td>
884
+ <td>
885
+ <pre class='margin-none'>position:static; overflow:hidden;</pre>
886
+ </td>
887
+ </tr>
888
+
889
+ <tr class="middle">
890
+ <td>
891
+ <code>.clear</code>
892
+ </td>
893
+ <td>
894
+ <pre class='margin-none'>clear:both;</pre>
895
+ </td>
896
+ </tr>
897
+
898
+ <tr class="middle">
899
+ <td>
900
+ <code>.block </code>
901
+ </td>
902
+ <td>
903
+ <pre class='margin-none'>display: block;</pre>
904
+ </td>
905
+ </tr>
906
+
907
+ <tr class="middle">
908
+ <td>
909
+ <code>.inline-block </code>
910
+ </td>
911
+ <td>
912
+ <pre class='margin-none'>display:inline-block !important;</pre>
913
+ </td>
914
+ </tr>
915
+
916
+ <tr class="middle">
917
+ <td>
918
+ <code>.align-middle</code>
919
+ </td>
920
+ <td>
921
+ <pre class='margin-none'>@include align-middle;</pre>
922
+ </td>
923
+ </tr>
924
+
925
+ <tr class="middle">
926
+ <td>
927
+ <code>.relative</code>
928
+ </td>
929
+ <td>
930
+ <pre class='margin-none'>position:relative;</pre>
931
+ </td>
932
+ </tr>
933
+
934
+ <tr class="middle">
935
+ <td>
936
+ <code>ul.raw</code>
937
+ </td>
938
+ <td>
939
+ <pre class='margin-none'>margin: 0; padding: 0; list-style:none;</pre>
940
+ </td>
941
+ </tr>
942
+
943
+ <tr class="middle">
944
+ <td>
945
+ <code>.text-col-2</code>
946
+ </td>
947
+ <td>
948
+ <pre class='margin-none'>column-count: 2; column-gap: 5em;</pre>
949
+ </td>
950
+ </tr>
951
+
952
+ <tr class="middle">
953
+ <td>
954
+ <code>button.raw</code>
955
+ </td>
956
+ <td>
957
+ <pre class='margin-none'>outline: none; appearance: none; border: none; background:none;</pre>
958
+ </td>
959
+ </tr>
960
+
961
+ <tr class="middle">
962
+ <td>
963
+ <code>.overflow-hidden</code>
964
+ </td>
965
+ <td>
966
+ <pre class='margin-none'>overflow:hidden;</pre>
967
+ </td>
968
+ </tr>
969
+
970
+ <tr class="middle">
971
+ <td>
972
+ <code>.overflow-y</code>
973
+ </td>
974
+ <td>
975
+ <pre class='margin-none'>overflow-y: auto;</pre>
976
+ </td>
977
+ </tr>
978
+
979
+ <tr class="middle">
980
+ <td>
981
+ <code>img.block</code>
982
+ </td>
983
+ <td>
984
+ <pre class='margin-none'>display:block; width: 100%;</pre>
985
+ </td>
986
+ </tr>
987
+
988
+ <tr class="middle">
989
+ <td>
990
+ <code>.height-auto</code>
991
+ </td>
992
+ <td>
993
+ <pre class='margin-none'>height: auto;</pre>
994
+ </td>
995
+ </tr>
996
+
997
+ </table>
998
+
999
+ </div>
1000
+ </div>
1001
+ <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
1002
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
1003
+ <script
1004
+ src="https://code.jquery.com/jquery-1.11.3.min.js"
1005
+ integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
1006
+ crossorigin="anonymous"></script>
1007
+ <script src="/site/preview.js"></script>
1008
+ </body>