uniform-ui 1.0 → 2.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (139) hide show
  1. checksums.yaml +5 -5
  2. data/lib/assets/config/manifest.js +1 -0
  3. data/lib/assets/javascripts/uniform/checkbox.js +31 -0
  4. data/lib/assets/javascripts/uniform/component.js +42 -0
  5. data/lib/assets/javascripts/uniform/dom-helpers.js +136 -0
  6. data/lib/assets/javascripts/uniform/dropdown.js +149 -0
  7. data/lib/assets/javascripts/uniform/floating-label.js +54 -0
  8. data/lib/assets/javascripts/uniform/icons.js +16 -0
  9. data/lib/assets/javascripts/uniform/modal.js +103 -0
  10. data/lib/assets/javascripts/uniform/resizer.js +43 -0
  11. data/lib/assets/javascripts/uniform/select.js +235 -0
  12. data/lib/assets/javascripts/uniform/tooltip.js +120 -0
  13. data/lib/assets/javascripts/uniform-es5.js +1 -0
  14. data/lib/assets/javascripts/uniform-jquery.js +124 -0
  15. data/lib/assets/javascripts/uniform.js +17 -0
  16. data/lib/assets/stylesheets/uniform/base.scss +3 -0
  17. data/lib/assets/stylesheets/uniform/components/alert.scss +72 -0
  18. data/lib/assets/stylesheets/uniform/components/buttons.scss +219 -0
  19. data/{vendor → lib}/assets/stylesheets/uniform/components/card.scss +33 -25
  20. data/lib/assets/stylesheets/uniform/components/container.scss +19 -0
  21. data/{vendor → lib}/assets/stylesheets/uniform/components/dropdown.scss +8 -4
  22. data/lib/assets/stylesheets/uniform/components/form/checkbox-collection.scss +103 -0
  23. data/lib/assets/stylesheets/uniform/components/form/checkbox.scss +58 -0
  24. data/lib/assets/stylesheets/uniform/components/form/floating-label.scss +64 -0
  25. data/lib/assets/stylesheets/uniform/components/form/input-group.scss +56 -0
  26. data/lib/assets/stylesheets/uniform/components/form.scss +143 -0
  27. data/lib/assets/stylesheets/uniform/components/grid.scss +158 -0
  28. data/lib/assets/stylesheets/uniform/components/label.scss +26 -0
  29. data/lib/assets/stylesheets/uniform/components/loaders.scss +80 -0
  30. data/{vendor → lib}/assets/stylesheets/uniform/components/modal.scss +26 -4
  31. data/lib/assets/stylesheets/uniform/components/nav.scss +124 -0
  32. data/lib/assets/stylesheets/uniform/components/row.scss +69 -0
  33. data/lib/assets/stylesheets/uniform/components/select.scss +122 -0
  34. data/lib/assets/stylesheets/uniform/components/table.scss +127 -0
  35. data/lib/assets/stylesheets/uniform/components/thumb.scss +41 -0
  36. data/lib/assets/stylesheets/uniform/components/tooltip.scss +63 -0
  37. data/lib/assets/stylesheets/uniform/components.scss +11 -0
  38. data/{vendor → lib}/assets/stylesheets/uniform/defaults.scss +7 -4
  39. data/lib/assets/stylesheets/uniform/functions.scss +31 -0
  40. data/lib/assets/stylesheets/uniform/helpers/border.scss +19 -0
  41. data/lib/assets/stylesheets/uniform/helpers/colors.scss +23 -0
  42. data/lib/assets/stylesheets/uniform/helpers/margin.scss +27 -0
  43. data/lib/assets/stylesheets/uniform/helpers/padding.scss +9 -0
  44. data/lib/assets/stylesheets/uniform/helpers/position.scss +13 -0
  45. data/lib/assets/stylesheets/uniform/helpers/sizes.scss +38 -0
  46. data/{vendor → lib}/assets/stylesheets/uniform/helpers/text.scss +86 -73
  47. data/lib/assets/stylesheets/uniform/helpers.scss +127 -0
  48. data/lib/assets/stylesheets/uniform/mixins.scss +116 -0
  49. data/lib/assets/stylesheets/uniform/print/grid.scss +50 -0
  50. data/lib/assets/stylesheets/uniform/variables.scss +72 -0
  51. data/lib/assets/stylesheets/uniform-print.scss +1 -0
  52. data/lib/assets/stylesheets/uniform.scss +11 -0
  53. data/lib/uniform/version.rb +3 -0
  54. data/lib/uniform.rb +15 -0
  55. metadata +87 -95
  56. data/.gitignore +0 -2
  57. data/CHANGELOG.md +0 -27
  58. data/CNAME +0 -1
  59. data/Gemfile +0 -8
  60. data/Gemfile.lock +0 -40
  61. data/LICENSE +0 -22
  62. data/README.md +0 -35
  63. data/Rakefile +0 -74
  64. data/index.html +0 -251
  65. data/lib/uniform/rails/engine.rb +0 -8
  66. data/lib/uniform/rails.rb +0 -6
  67. data/lib/uniform/ui.rb +0 -1
  68. data/preview/alerts.html.erb +0 -1
  69. data/preview/buttons.html.erb +0 -62
  70. data/preview/cards.html.erb +0 -23
  71. data/preview/colors.html.erb +0 -22
  72. data/preview/dropdown.html.erb +0 -1
  73. data/preview/form.html.erb +0 -233
  74. data/preview/grid.html.erb +0 -304
  75. data/preview/helpers.html.erb +0 -225
  76. data/preview/index.html.erb +0 -77
  77. data/preview/labels.html.erb +0 -1
  78. data/preview/layout.html.erb +0 -63
  79. data/preview/loaders.html.erb +0 -83
  80. data/preview/modal.html.erb +0 -1
  81. data/preview/nav.html.erb +0 -77
  82. data/preview/preview.scss +0 -76
  83. data/preview/rows.html.erb +0 -36
  84. data/preview/select.html.erb +0 -1
  85. data/preview/tables.html.erb +0 -1
  86. data/preview/tabs.html.erb +0 -17
  87. data/preview/tiles.html.erb +0 -1
  88. data/preview/tooltip.erb +0 -1
  89. data/preview.css +0 -0
  90. data/site/alerts.html +0 -157
  91. data/site/alerts.html copy +0 -133
  92. data/site/buttons.html +0 -286
  93. data/site/cards.html +0 -177
  94. data/site/colors.html +0 -275
  95. data/site/dropdown.html +0 -157
  96. data/site/dropdown.html copy +0 -141
  97. data/site/form.html +0 -369
  98. data/site/grid.html +0 -716
  99. data/site/helpers.html +0 -1008
  100. data/site/index.html +0 -251
  101. data/site/labels.html +0 -157
  102. data/site/layout.html +0 -313
  103. data/site/loaders.html +0 -233
  104. data/site/logo.png +0 -0
  105. data/site/modal.html +0 -157
  106. data/site/nav.html +0 -229
  107. data/site/preview.css +0 -1
  108. data/site/preview.js +0 -59
  109. data/site/rows.html +0 -190
  110. data/site/select.html +0 -157
  111. data/site/tables.html +0 -157
  112. data/site/tabs.html +0 -171
  113. data/site/tiles.html +0 -157
  114. data/site/tiles.html copy +0 -109
  115. data/site/tooltip +0 -157
  116. data/site/uniform.css +0 -1
  117. data/uniform.gemspec +0 -22
  118. data/vendor/assets/stylesheets/uniform/base.scss +0 -2
  119. data/vendor/assets/stylesheets/uniform/components/alert.scss +0 -27
  120. data/vendor/assets/stylesheets/uniform/components/buttons.scss +0 -212
  121. data/vendor/assets/stylesheets/uniform/components/form.scss +0 -290
  122. data/vendor/assets/stylesheets/uniform/components/grid.scss +0 -225
  123. data/vendor/assets/stylesheets/uniform/components/label.scss +0 -63
  124. data/vendor/assets/stylesheets/uniform/components/loaders.scss +0 -82
  125. data/vendor/assets/stylesheets/uniform/components/nav.scss +0 -197
  126. data/vendor/assets/stylesheets/uniform/components/row.scss +0 -92
  127. data/vendor/assets/stylesheets/uniform/components/select.scss +0 -98
  128. data/vendor/assets/stylesheets/uniform/components/table.scss +0 -83
  129. data/vendor/assets/stylesheets/uniform/components/tabs.scss +0 -45
  130. data/vendor/assets/stylesheets/uniform/components/tile.scss +0 -20
  131. data/vendor/assets/stylesheets/uniform/components/tooltip.scss +0 -46
  132. data/vendor/assets/stylesheets/uniform/helpers/colors.scss +0 -37
  133. data/vendor/assets/stylesheets/uniform/helpers/margin.scss +0 -44
  134. data/vendor/assets/stylesheets/uniform/helpers/padding.scss +0 -74
  135. data/vendor/assets/stylesheets/uniform/helpers/sizes.scss +0 -31
  136. data/vendor/assets/stylesheets/uniform/helpers.scss +0 -124
  137. data/vendor/assets/stylesheets/uniform/mixins.scss +0 -77
  138. data/vendor/assets/stylesheets/uniform/variables.scss +0 -36
  139. data/vendor/assets/stylesheets/uniform.scss +0 -9
data/site/grid.html DELETED
@@ -1,716 +0,0 @@
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>Grid</h1>
150
- <p>Similar to Bootstrap 4 with some modifications. Uses flexbox with a host of helper options.</p>
151
- <h3>Breakpoints</h3>
152
- <p>
153
- Any helper can have <code>-sm</code>, <code>-md</code>, <code>-lg</code>,
154
- or <code>-xl</code> added to cause helper to only go into effect for that
155
- breakpoint.
156
- </p>
157
- <p><code>xs</code> = 480px</p>
158
- <p><code>sm</code> = 768px</p>
159
- <p><code>md</code> = 992px</p>
160
- <p><code>lg</code> = 1200px</p>
161
- <pre class=''>&lt;div class=&quot;grid&quot;&gt;
162
- &lt;div class=&quot;col&quot;&gt;content&lt;/div&gt;
163
- &lt;div class=&quot;col&quot;&gt;content&lt;/div&gt;
164
- &lt;div class=&quot;col&quot;&gt;content&lt;/div&gt;
165
- &lt;/div&gt;</pre>
166
- <h3>Grid Options</h3>
167
-
168
- <div class="margin-bottom bg-gray-light pad-bottom">
169
- .grid .grid-center
170
- <div class="grid grid-center">
171
- <div class="col bg-green-light">
172
- <div class="bg-red-light">col</div>
173
- </div>
174
- <div class="col bg-green-light">
175
- <div class="bg-red-light height-100-px">col height-100-px</div>
176
- </div>
177
- <div class="col bg-green-light">
178
- <div class="bg-red-light">col</div>
179
- </div>
180
- </div>
181
- </div>
182
-
183
- <div class="margin-bottom bg-gray-light pad-bottom">
184
- .grid .grid-top
185
- <div class="grid grid-top">
186
- <div class="col bg-green-light">
187
- <div class="bg-red-light">col</div>
188
- </div>
189
- <div class="col bg-green-light">
190
- <div class="bg-red-light height-100-px">col height-100-px</div>
191
- </div>
192
- <div class="col bg-green-light">
193
- <div class="bg-red-light">col</div>
194
- </div>
195
- </div>
196
- </div>
197
-
198
- <div class="margin-bottom bg-gray-light pad-bottom">
199
- .grid .grid-bottom
200
- <div class="grid grid-bottom">
201
- <div class="col bg-green-light">
202
- <div class="bg-red-light">col</div>
203
- </div>
204
- <div class="col bg-green-light">
205
- <div class="bg-red-light height-100-px">col height-100-px</div>
206
- </div>
207
- <div class="col bg-green-light">
208
- <div class="bg-red-light">col</div>
209
- </div>
210
- </div>
211
- </div>
212
-
213
- <div class="margin-bottom bg-gray-light pad-bottom">
214
- .grid .grid-stretch
215
- <div class="grid grid-stretch">
216
- <div class="col bg-green-light">
217
- <div class="bg-red-light">col</div>
218
- </div>
219
- <div class="col bg-green-light">
220
- <div class="bg-red-light height-100-px">col height-100-px</div>
221
- </div>
222
- <div class="col bg-green-light">
223
- <div class="bg-red-light">col</div>
224
- </div>
225
- </div>
226
- </div>
227
-
228
- <div class="margin-bottom bg-gray-light pad-bottom">
229
- .grid .grid-h-left
230
- <div class="grid grid-h-left">
231
- <div class="col bg-green-light">
232
- <div class="bg-red-light">col</div>
233
- </div>
234
- <div class="col bg-green-light">
235
- <div class="bg-red-light height-100-px">col height-100-px</div>
236
- </div>
237
- <div class="col bg-green-light">
238
- <div class="bg-red-light">col</div>
239
- </div>
240
- </div>
241
- </div>
242
-
243
- <div class="margin-bottom bg-gray-light pad-bottom">
244
- .grid .grid-h-center
245
- <div class="grid grid-h-center">
246
- <div class="col bg-green-light">
247
- <div class="bg-red-light">col</div>
248
- </div>
249
- <div class="col bg-green-light">
250
- <div class="bg-red-light height-100-px">col height-100-px</div>
251
- </div>
252
- <div class="col bg-green-light">
253
- <div class="bg-red-light">col</div>
254
- </div>
255
- </div>
256
- </div>
257
-
258
- <div class="margin-bottom bg-gray-light pad-bottom">
259
- .grid .grid-h-right
260
- <div class="grid grid-h-right">
261
- <div class="col bg-green-light">
262
- <div class="bg-red-light">col</div>
263
- </div>
264
- <div class="col bg-green-light">
265
- <div class="bg-red-light height-100-px">col height-100-px</div>
266
- </div>
267
- <div class="col bg-green-light">
268
- <div class="bg-red-light">col</div>
269
- </div>
270
- </div>
271
- </div>
272
-
273
- <div class="margin-bottom bg-gray-light pad-bottom">
274
- .grid .grid-h-around
275
- <div class="grid grid-h-around">
276
- <div class="col bg-green-light">
277
- <div class="bg-red-light">col</div>
278
- </div>
279
- <div class="col bg-green-light">
280
- <div class="bg-red-light height-100-px">col height-100-px</div>
281
- </div>
282
- <div class="col bg-green-light">
283
- <div class="bg-red-light">col</div>
284
- </div>
285
- </div>
286
- </div>
287
-
288
- <div class="margin-bottom bg-gray-light pad-bottom">
289
- .grid .grid-h-between
290
- <div class="grid grid-h-between">
291
- <div class="col bg-green-light">
292
- <div class="bg-red-light">col</div>
293
- </div>
294
- <div class="col bg-green-light">
295
- <div class="bg-red-light height-100-px">col height-100-px</div>
296
- </div>
297
- <div class="col bg-green-light">
298
- <div class="bg-red-light">col</div>
299
- </div>
300
- </div>
301
- </div>
302
-
303
-
304
-
305
- <div class="margin-bottom bg-gray-light pad-bottom">
306
- .grid .grid-v-top .height-300-px
307
- <div class="grid grid-v-top height-300-px">
308
- <div class="col-4 bg-green-light border">
309
- <div class="bg-red-light">col-4</div>
310
- </div>
311
- <div class="col-4 bg-green-light border">
312
- <div class="bg-red-light height-100-px">col-4 height-100-px</div>
313
- </div>
314
- <div class="col-4 bg-green-light border">
315
- <div class="bg-red-light">col-4</div>
316
- </div>
317
-
318
- <div class="col-4 bg-green-light border">
319
- <div class="bg-red-light">col-4</div>
320
- </div>
321
-
322
- <div class="col-4 bg-green-light border">
323
- <div class="bg-red-light">col-4</div>
324
- </div>
325
-
326
- <div class="col-4 bg-green-light border">
327
- <div class="bg-red-light">col-4</div>
328
- </div>
329
-
330
- <div class="col-4 bg-green-light border">
331
- <div class="bg-red-light">col-4</div>
332
- </div>
333
- </div>
334
- </div>
335
-
336
- <div class="margin-bottom bg-gray-light pad-bottom">
337
- .grid .grid-v-center .height-300-px
338
- <div class="grid grid-v-center height-300-px">
339
- <div class="col-4 bg-green-light border">
340
- <div class="bg-red-light">col-4</div>
341
- </div>
342
- <div class="col-4 bg-green-light border">
343
- <div class="bg-red-light height-100-px">col-4 height-100-px</div>
344
- </div>
345
- <div class="col-4 bg-green-light border">
346
- <div class="bg-red-light">col-4</div>
347
- </div>
348
-
349
- <div class="col-4 bg-green-light border">
350
- <div class="bg-red-light">col-4</div>
351
- </div>
352
-
353
- <div class="col-4 bg-green-light border">
354
- <div class="bg-red-light">col-4</div>
355
- </div>
356
-
357
- <div class="col-4 bg-green-light border">
358
- <div class="bg-red-light">col-4</div>
359
- </div>
360
-
361
- <div class="col-4 bg-green-light border">
362
- <div class="bg-red-light">col-4</div>
363
- </div>
364
- </div>
365
- </div>
366
-
367
- <div class="margin-bottom bg-gray-light pad-bottom">
368
- .grid .grid-v-bottom .height-300-px
369
- <div class="grid grid-v-bottom height-300-px">
370
- <div class="col-4 bg-green-light border">
371
- <div class="bg-red-light">col-4</div>
372
- </div>
373
- <div class="col-4 bg-green-light border">
374
- <div class="bg-red-light height-100-px">col-4 height-100-px</div>
375
- </div>
376
- <div class="col-4 bg-green-light border">
377
- <div class="bg-red-light">col-4</div>
378
- </div>
379
-
380
- <div class="col-4 bg-green-light border">
381
- <div class="bg-red-light">col-4</div>
382
- </div>
383
-
384
- <div class="col-4 bg-green-light border">
385
- <div class="bg-red-light">col-4</div>
386
- </div>
387
-
388
- <div class="col-4 bg-green-light border">
389
- <div class="bg-red-light">col-4</div>
390
- </div>
391
-
392
- <div class="col-4 bg-green-light border">
393
- <div class="bg-red-light">col-4</div>
394
- </div>
395
- </div>
396
- </div>
397
-
398
- <div class="margin-bottom bg-gray-light pad-bottom">
399
- .grid .grid-v-around .height-300-px
400
- <div class="grid grid-v-around height-300-px">
401
- <div class="col-4 bg-green-light border">
402
- <div class="bg-red-light">col-4</div>
403
- </div>
404
- <div class="col-4 bg-green-light border">
405
- <div class="bg-red-light height-100-px">col-4 height-100-px</div>
406
- </div>
407
- <div class="col-4 bg-green-light border">
408
- <div class="bg-red-light">col-4</div>
409
- </div>
410
-
411
- <div class="col-4 bg-green-light border">
412
- <div class="bg-red-light">col-4</div>
413
- </div>
414
-
415
- <div class="col-4 bg-green-light border">
416
- <div class="bg-red-light">col-4</div>
417
- </div>
418
-
419
- <div class="col-4 bg-green-light border">
420
- <div class="bg-red-light">col-4</div>
421
- </div>
422
-
423
- <div class="col-4 bg-green-light border">
424
- <div class="bg-red-light">col-4</div>
425
- </div>
426
- </div>
427
- </div>
428
-
429
- <div class="margin-bottom bg-gray-light pad-bottom">
430
- .grid .grid-v-between .height-300-px
431
- <div class="grid grid-v-between height-300-px">
432
- <div class="col-4 bg-green-light border">
433
- <div class="bg-red-light">col-4</div>
434
- </div>
435
- <div class="col-4 bg-green-light border">
436
- <div class="bg-red-light height-100-px">col-4 height-100-px</div>
437
- </div>
438
- <div class="col-4 bg-green-light border">
439
- <div class="bg-red-light">col-4</div>
440
- </div>
441
-
442
- <div class="col-4 bg-green-light border">
443
- <div class="bg-red-light">col-4</div>
444
- </div>
445
-
446
- <div class="col-4 bg-green-light border">
447
- <div class="bg-red-light">col-4</div>
448
- </div>
449
-
450
- <div class="col-4 bg-green-light border">
451
- <div class="bg-red-light">col-4</div>
452
- </div>
453
-
454
- <div class="col-4 bg-green-light border">
455
- <div class="bg-red-light">col-4</div>
456
- </div>
457
- </div>
458
- </div>
459
-
460
- <div class="margin-bottom bg-gray-light pad-bottom">
461
- .grid .grid-v-stretch .height-300-px
462
- <div class="grid grid-v-stretch height-300-px">
463
- <div class="col-4 bg-green-light border">
464
- <div class="bg-red-light">col-4</div>
465
- </div>
466
- <div class="col-4 bg-green-light border">
467
- <div class="bg-red-light height-100-px">col-4 height-100-px</div>
468
- </div>
469
- <div class="col-4 bg-green-light border">
470
- <div class="bg-red-light">col-4</div>
471
- </div>
472
-
473
- <div class="col-4 bg-green-light border">
474
- <div class="bg-red-light">col-4</div>
475
- </div>
476
-
477
- <div class="col-4 bg-green-light border">
478
- <div class="bg-red-light">col-4</div>
479
- </div>
480
-
481
- <div class="col-4 bg-green-light border">
482
- <div class="bg-red-light">col-4</div>
483
- </div>
484
-
485
- <div class="col-4 bg-green-light border">
486
- <div class="bg-red-light">col-4</div>
487
- </div>
488
- </div>
489
- </div>
490
-
491
-
492
-
493
- <div class="margin-bottom bg-gray-light pad-bottom">
494
- .grid .no-wrap .height-300-px
495
- <div class="grid no-wrap height-300-px">
496
- <div class="col-4 bg-green-light border">
497
- <div class="bg-red-light">col-4</div>
498
- </div>
499
- <div class="col-4 bg-green-light border">
500
- <div class="bg-red-light height-100-px">col-4 height-100-px</div>
501
- </div>
502
- <div class="col-4 bg-green-light border">
503
- <div class="bg-red-light">col-4</div>
504
- </div>
505
-
506
- <div class="col-4 bg-green-light border">
507
- <div class="bg-red-light">col-4</div>
508
- </div>
509
-
510
- <div class="col-4 bg-green-light border">
511
- <div class="bg-red-light">col-4</div>
512
- </div>
513
-
514
- <div class="col-4 bg-green-light border">
515
- <div class="bg-red-light">col-4</div>
516
- </div>
517
-
518
- <div class="col-4 bg-green-light border">
519
- <div class="bg-red-light">col-4</div>
520
- </div>
521
- </div>
522
- </div>
523
-
524
- <div class="margin-bottom bg-gray-light pad-bottom">
525
- .grid .grid-vertical
526
- <div class="grid grid-vertical">
527
- <div class="col bg-green-light">
528
- <div class="bg-red-light">col</div>
529
- </div>
530
- <div class="col bg-green-light">
531
- <div class="bg-red-light height-100-px">col height-100-px</div>
532
- </div>
533
- <div class="col bg-green-light">
534
- <div class="bg-red-light">col</div>
535
- </div>
536
- </div>
537
- </div>
538
-
539
- <div class="margin-bottom bg-gray-light pad-bottom">
540
- .grid .no-gutter
541
- <div class="grid no-gutter">
542
- <div class="col bg-green-light">
543
- <div class="bg-red-light">col</div>
544
- </div>
545
- <div class="col bg-green-light">
546
- <div class="bg-red-light height-100-px">col height-100-px</div>
547
- </div>
548
- <div class="col bg-green-light">
549
- <div class="bg-red-light">col</div>
550
- </div>
551
- </div>
552
- </div>
553
- <div class="margin-bottom bg-gray-light pad-bottom">
554
- .grid .nest
555
- <div class="grid nest">
556
- <div class="col bg-green-light">
557
- <div class="bg-red-light">col</div>
558
- </div>
559
- <div class="col bg-green-light">
560
- <div class="bg-red-light height-100-px">col height-100-px</div>
561
- </div>
562
- <div class="col bg-green-light">
563
- <div class="bg-red-light">col</div>
564
- </div>
565
- </div>
566
- </div>
567
-
568
-
569
-
570
-
571
-
572
- <h3>Col Options</h3>
573
- <div class="margin-bottom bg-gray-light pad-bottom">
574
- .grid
575
- <div class="grid">
576
- <div class="col">
577
- <div class="bg-green-light">col</div>
578
- </div>
579
- <div class="col">
580
- <div class="bg-green-light pad-v">
581
- <div class="width-200-px bg-red-light">
582
- col > width-200-px
583
- </div>
584
- </div>
585
- </div>
586
- <div class="col">
587
- <div class="bg-green-light">col</div>
588
- </div>
589
- </div>
590
- </div>
591
-
592
- <div class="margin-bottom bg-gray-light pad-bottom">
593
- .grid
594
- <div class="grid">
595
- <div class="col">
596
- <div class="bg-green-light">col</div>
597
- </div>
598
- <div class="col">
599
- <div class="bg-green-light pad-v">
600
- <div class="width-200-px bg-red-light">
601
- col > width-200-px
602
- </div>
603
- </div>
604
- </div>
605
- <div class="col-fill">
606
- <div class="bg-green-light">col-fill</div>
607
- </div>
608
- </div>
609
- </div>
610
-
611
- <div class="margin-bottom bg-gray-light pad-bottom">
612
- .grid
613
- <div class="grid">
614
- <div class="col-4">
615
- <div class="bg-green-light">col-4</div>
616
- </div>
617
- <div class="col-4">
618
- <div class="bg-green-light">col-4</div>
619
- </div>
620
- <div class="col-4">
621
- <div class="bg-green-light">col-4</div>
622
- </div>
623
- </div>
624
- </div>
625
-
626
- <div class="margin-bottom bg-gray-light pad-bottom">
627
- .grid
628
- <div class="grid">
629
- <div class="col-2">
630
- <div class="bg-green-light">col-2</div>
631
- </div>
632
- <div class="col-6">
633
- <div class="bg-green-light">col-6</div>
634
- </div>
635
- <div class="col-4">
636
- <div class="bg-green-light">col-4</div>
637
- </div>
638
- </div>
639
- </div>
640
-
641
- <div class="margin-bottom bg-gray-light pad-bottom">
642
- .grid
643
- <div class="grid">
644
- <div class="col-3 col-push-2">
645
- <div class="bg-green-light">.col-3 .col-push-2</div>
646
- </div>
647
- </div>
648
- </div>
649
-
650
-
651
- <div class="margin-bottom bg-gray-light pad-bottom">
652
- .grid
653
- <div class="grid">
654
- <div class="col-4">
655
- <div class="bg-green-light">col-4</div>
656
- </div>
657
- <div class="col-4">
658
- <div class="bg-green-light">col-4</div>
659
- </div>
660
- <div class="col-4">
661
- <div class="bg-green-light">col-4</div>
662
- </div>
663
- </div>
664
- </div>
665
-
666
-
667
- <div class="margin-bottom bg-gray-light pad-bottom">
668
- .grid
669
- <div class="grid">
670
- <div class="col col-center">
671
- <div class="bg-green-light">col col-center</div>
672
- </div>
673
- <div class="col">
674
- <div class="bg-green-light pad-v">
675
- <div class="width-200-px bg-red-light">
676
- col > width-200-px
677
- </div>
678
- </div>
679
- </div>
680
- <div class="col col-bottom">
681
- <div class="bg-green-light">col col-bottom</div>
682
- </div>
683
- <div class="col col-stretch bg-green-light">
684
- <div class="">col col-stretch</div>
685
- </div>
686
- </div>
687
- </div>
688
-
689
- <div class="margin-bottom bg-gray-light pad-bottom">
690
- .grid
691
- <div class="grid">
692
- <div class="col">
693
- <div class="bg-green-light">col</div>
694
- </div>
695
- <div class="col no-gutter bg-green-light pad-v">
696
- <div class="width-200-px bg-red-light">
697
- col no-gutter > width-200-px
698
- </div>
699
- </div>
700
- <div class="col">
701
- <div class="bg-green-light">col</div>
702
- </div>
703
- </div>
704
- </div>
705
-
706
-
707
- </div>
708
- </div>
709
- <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
710
- <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
711
- <script
712
- src="https://code.jquery.com/jquery-1.11.3.min.js"
713
- integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
714
- crossorigin="anonymous"></script>
715
- <script src="/site/preview.js"></script>
716
- </body>