uniform-ui 0.6 → 1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +27 -0
- data/CNAME +1 -0
- data/Gemfile +0 -4
- data/Gemfile.lock +1 -11
- data/README.md +2 -3
- data/Rakefile +34 -24
- data/index.html +240 -1160
- data/preview/{_tables.html.erb → alerts.html.erb} +0 -0
- data/preview/buttons.html.erb +62 -0
- data/preview/cards.html.erb +23 -0
- data/preview/colors.html.erb +22 -0
- data/preview/{_tabs.html.erb → dropdown.html.erb} +0 -0
- data/preview/form.html.erb +233 -0
- data/preview/grid.html.erb +304 -0
- data/preview/helpers.html.erb +225 -0
- data/preview/index.html.erb +74 -50
- data/preview/{_tiles.html.erb → labels.html.erb} +0 -0
- data/preview/layout.html.erb +63 -0
- data/preview/loaders.html.erb +83 -0
- data/preview/modal.html.erb +1 -0
- data/preview/nav.html.erb +77 -0
- data/preview/preview.scss +39 -10
- data/preview/rows.html.erb +36 -0
- data/preview/select.html.erb +1 -0
- data/preview/tables.html.erb +1 -0
- data/preview/tabs.html.erb +17 -0
- data/preview/tiles.html.erb +1 -0
- data/preview/tooltip.erb +1 -0
- data/site/alerts.html +157 -0
- data/site/alerts.html copy +133 -0
- data/site/buttons.html +286 -0
- data/site/cards.html +177 -0
- data/site/colors.html +275 -0
- data/site/dropdown.html +157 -0
- data/site/dropdown.html copy +141 -0
- data/site/form.html +369 -0
- data/site/grid.html +716 -0
- data/site/helpers.html +1008 -0
- data/site/index.html +208 -617
- data/site/labels.html +157 -0
- data/site/layout.html +313 -0
- data/site/loaders.html +233 -0
- data/site/modal.html +157 -0
- data/site/nav.html +229 -0
- data/site/preview.css +1 -1
- data/site/preview.js +59 -0
- data/site/rows.html +190 -0
- data/site/select.html +157 -0
- data/site/tables.html +157 -0
- data/site/tabs.html +171 -0
- data/site/tiles.html +157 -0
- data/site/tiles.html copy +109 -0
- data/site/tooltip +157 -0
- data/site/uniform.css +1 -1
- data/uniform.gemspec +2 -8
- data/vendor/assets/stylesheets/uniform.scss +4 -4
- data/vendor/assets/stylesheets/uniform/base.scss +2 -0
- data/vendor/assets/stylesheets/uniform/components/alert.scss +27 -0
- data/vendor/assets/stylesheets/uniform/components/buttons.scss +135 -86
- data/vendor/assets/stylesheets/uniform/components/card.scss +69 -67
- data/vendor/assets/stylesheets/uniform/components/dropdown.scss +69 -0
- data/vendor/assets/stylesheets/uniform/components/form.scss +268 -85
- data/vendor/assets/stylesheets/uniform/components/grid.scss +214 -72
- data/vendor/assets/stylesheets/uniform/components/label.scss +63 -0
- data/vendor/assets/stylesheets/uniform/components/loaders.scss +38 -18
- data/vendor/assets/stylesheets/uniform/components/modal.scss +51 -0
- data/vendor/assets/stylesheets/uniform/components/nav.scss +171 -54
- data/vendor/assets/stylesheets/uniform/components/row.scss +69 -101
- data/vendor/assets/stylesheets/uniform/components/select.scss +98 -0
- data/vendor/assets/stylesheets/uniform/components/table.scss +83 -0
- data/vendor/assets/stylesheets/uniform/components/tabs.scss +39 -26
- data/vendor/assets/stylesheets/uniform/components/tile.scss +15 -27
- data/vendor/assets/stylesheets/uniform/components/tooltip.scss +46 -0
- data/vendor/assets/stylesheets/uniform/defaults.scss +85 -19
- data/vendor/assets/stylesheets/uniform/helpers.scss +82 -81
- data/vendor/assets/stylesheets/uniform/helpers/colors.scss +37 -0
- data/vendor/assets/stylesheets/uniform/helpers/margin.scss +44 -0
- data/vendor/assets/stylesheets/uniform/helpers/padding.scss +74 -0
- data/vendor/assets/stylesheets/uniform/helpers/sizes.scss +31 -0
- data/vendor/assets/stylesheets/uniform/helpers/text.scss +121 -0
- data/vendor/assets/stylesheets/uniform/mixins.scss +25 -48
- data/vendor/assets/stylesheets/uniform/variables.scss +10 -28
- metadata +61 -85
- data/preview/_buttons.html.erb +0 -59
- data/preview/_cards.html.erb +0 -82
- data/preview/_colors.html.erb +0 -12
- data/preview/_forms.html.erb +0 -196
- data/preview/_grid.html.erb +0 -49
- data/preview/_helpers.html.erb +0 -158
- data/preview/_inputs.html.erb +0 -93
- data/preview/_installation.html.erb +0 -4
- data/preview/_lists.html.erb +0 -53
- data/preview/_loaders.html.erb +0 -72
- data/preview/_nav.html.erb +0 -46
- data/preview/_philosophy.html.erb +0 -33
- data/preview/_rows.html.erb +0 -35
- data/preview/_uniform.html.erb +0 -4
- data/site/site/logo.png +0 -0
- data/site/site/preview.css +0 -1
- data/site/site/uniform.css +0 -1
- data/vendor/assets/stylesheets/uniform/components/inputs.scss +0 -131
- data/vendor/assets/stylesheets/uniform/components/lists.scss +0 -62
- data/vendor/assets/stylesheets/uniform/components/table-container.scss +0 -44
- data/vendor/assets/stylesheets/uniform/components/table-form.scss +0 -159
- data/vendor/assets/stylesheets/uniform/mixins/grid-framework.scss +0 -142
data/site/form.html
ADDED
|
@@ -0,0 +1,369 @@
|
|
|
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>Forms</h1>
|
|
150
|
+
<h3>UniformForm</h3>
|
|
151
|
+
<div class="grid">
|
|
152
|
+
<div class="col-6">
|
|
153
|
+
<form class="uniformForm">
|
|
154
|
+
<div class="form-group">
|
|
155
|
+
<label>Name</label>
|
|
156
|
+
<input type="text">
|
|
157
|
+
</div>
|
|
158
|
+
<div class="form-group" data-error-message="example error message">
|
|
159
|
+
<label>Phone</label>
|
|
160
|
+
<input type="text">
|
|
161
|
+
</div>
|
|
162
|
+
<div class="form-group">
|
|
163
|
+
<label>Email</label>
|
|
164
|
+
<input type="text">
|
|
165
|
+
</div>
|
|
166
|
+
</form>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="col-6">
|
|
169
|
+
<pre class=''><form class="uniformForm">
|
|
170
|
+
<div class="form-group">
|
|
171
|
+
<label>Name</label>
|
|
172
|
+
<input type="text">
|
|
173
|
+
</div>
|
|
174
|
+
<div class="form-group" data-error-message="example error message">
|
|
175
|
+
<label>Phone</label>
|
|
176
|
+
<input type="text">
|
|
177
|
+
</div>
|
|
178
|
+
<div class="form-group">
|
|
179
|
+
<label>Email</label>
|
|
180
|
+
<input type="text">
|
|
181
|
+
</div>
|
|
182
|
+
</form></pre>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div class="grid">
|
|
187
|
+
<div class="col-6">
|
|
188
|
+
<form class="uniformForm uniformForm-table">
|
|
189
|
+
<div class="form-group">
|
|
190
|
+
<label>Name</label>
|
|
191
|
+
<div>
|
|
192
|
+
<input type="text">
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="form-group">
|
|
196
|
+
<label>Phone</label>
|
|
197
|
+
<div>
|
|
198
|
+
<div data-error-message="example error message">
|
|
199
|
+
<input type="text">
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="form-group">
|
|
204
|
+
<label>Email</label>
|
|
205
|
+
<div>
|
|
206
|
+
<input type="text">
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</form>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="col-6">
|
|
212
|
+
<pre class=''><form class="uniformForm uniformForm-table">
|
|
213
|
+
<div class="form-group">
|
|
214
|
+
<label>Name</label>
|
|
215
|
+
<input type="text">
|
|
216
|
+
</div>
|
|
217
|
+
<div class="form-group" data-error-message="example error message">
|
|
218
|
+
<label>Phone</label>
|
|
219
|
+
<input type="text">
|
|
220
|
+
</div>
|
|
221
|
+
<div class="form-group">
|
|
222
|
+
<label>Email</label>
|
|
223
|
+
<input type="text">
|
|
224
|
+
</div>
|
|
225
|
+
</form></pre>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
<h3>UniformInput</h3>
|
|
231
|
+
<div class="grid">
|
|
232
|
+
<div class="col-6">
|
|
233
|
+
<p><input type="text" class="uniformInput" /></p>
|
|
234
|
+
<p><input type="text" class="uniformInput large" /></p>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="col-6">
|
|
237
|
+
<pre class=''><input type="text" class="uniformInput" /></pre>
|
|
238
|
+
<pre class=''><input type="text" class="uniformInput large" /></pre>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
<h3>Custom Inputs</h3>
|
|
243
|
+
<div class="grid nest">
|
|
244
|
+
<div class="col-6">
|
|
245
|
+
<p>Styled Select Box</p>
|
|
246
|
+
<p><span class="uniformSelect"><select><option>An Option</option></select></span></p>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="col-6">
|
|
249
|
+
<pre class=''><span class='uniformSelect'>
|
|
250
|
+
<select>
|
|
251
|
+
<option>An Option</option>
|
|
252
|
+
</select>
|
|
253
|
+
</span></pre>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
<div class="col-6">
|
|
257
|
+
<p>uniformCheckboxCollection</p>
|
|
258
|
+
<div class="uniformCheckboxCollection">
|
|
259
|
+
<label><input type="checkbox"> Option 1</label>
|
|
260
|
+
<label><input type="checkbox"> Option 2</label>
|
|
261
|
+
<label><input type="checkbox"> Option 3</label>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
<div class="col-6">
|
|
265
|
+
<pre class=''><div class="uniformCheckboxCollection">
|
|
266
|
+
<label><input type="checkbox"> Option 1</label>
|
|
267
|
+
<label><input type="checkbox"> Option 2</label>
|
|
268
|
+
<label><input type="checkbox"> Option 3</label>
|
|
269
|
+
</div></pre>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
<div class="col-6">
|
|
273
|
+
<p>uniformCheckboxCollection.inline</p>
|
|
274
|
+
<div class="uniformCheckboxCollection inline">
|
|
275
|
+
<label><input type="radio"> Option 1</label>
|
|
276
|
+
<label><input type="radio"> Option 2</label>
|
|
277
|
+
<label><input type="radio"> Option 3</label>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
<div class="col-6">
|
|
281
|
+
<pre class=''><div class="uniformCheckboxCollection inline">
|
|
282
|
+
<label><input type="radio"> Option 1</label>
|
|
283
|
+
<label><input type="radio"> Option 2</label>
|
|
284
|
+
<label><input type="radio"> Option 3</label>
|
|
285
|
+
</div></pre>
|
|
286
|
+
</div>
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<h3>Floating Label</h3>
|
|
292
|
+
<p>Requires Javascript to fully work, but fails gracefully when not applied.</p>
|
|
293
|
+
<div class="grid">
|
|
294
|
+
<div class="col-6">
|
|
295
|
+
<div class="uniformFloatingLabel">
|
|
296
|
+
<label for="example-1">Name</label>
|
|
297
|
+
<input type="text" class="pad-more" id="example-1">
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
<div class="col-6">
|
|
301
|
+
<pre class=''><div class="uniformFloatingLabel">
|
|
302
|
+
<label for="example-1">Name</label>
|
|
303
|
+
<input type="text" class="pad-more" id="example-1">
|
|
304
|
+
</div></pre>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
|
|
308
|
+
<h3>Input Group</h3>
|
|
309
|
+
<p>Ever want to put in an input and it's label in line, and have it be 100% width responsive? Well, you can't, unless you use something like uniformInputGroup.</p>
|
|
310
|
+
<div class="grid">
|
|
311
|
+
<div class="col-6">
|
|
312
|
+
<div class="uniformInputGroup">
|
|
313
|
+
<span class="label">
|
|
314
|
+
<label for="rate">$</label>
|
|
315
|
+
</span>
|
|
316
|
+
<span class="input">
|
|
317
|
+
<input id="rate">
|
|
318
|
+
</span>
|
|
319
|
+
<span class="units">
|
|
320
|
+
<label for="rate">/hour</label>
|
|
321
|
+
</span>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
<div class="col-6">
|
|
325
|
+
<pre class=''><div class="uniformInputGroup">
|
|
326
|
+
<span class="label">
|
|
327
|
+
<label for="rate">$</label>
|
|
328
|
+
</span>
|
|
329
|
+
<span class="input">
|
|
330
|
+
<input id="rate">
|
|
331
|
+
</span>
|
|
332
|
+
<span class="units">
|
|
333
|
+
<label for="rate">/hour</label>
|
|
334
|
+
</span>
|
|
335
|
+
</div></pre>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
<div class="grid">
|
|
339
|
+
<div class="col-6">
|
|
340
|
+
<div class="uniformInputGroup">
|
|
341
|
+
<span class="label">
|
|
342
|
+
<label for="car">Car Preference</label>
|
|
343
|
+
</span>
|
|
344
|
+
<span>
|
|
345
|
+
<input id="name" value="Jonathan Doe" disabled>
|
|
346
|
+
</span>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
<div class="col-6">
|
|
350
|
+
<pre class=''><div class="uniformInputGroup">
|
|
351
|
+
<span class="label">
|
|
352
|
+
<label for="car">Car Preference</label>
|
|
353
|
+
</span>
|
|
354
|
+
<span class="input">
|
|
355
|
+
<input id="name" value="Jonathan Doe" disabled>
|
|
356
|
+
</span>
|
|
357
|
+
</div></pre>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
|
|
363
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
|
|
364
|
+
<script
|
|
365
|
+
src="https://code.jquery.com/jquery-1.11.3.min.js"
|
|
366
|
+
integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
|
|
367
|
+
crossorigin="anonymous"></script>
|
|
368
|
+
<script src="/site/preview.js"></script>
|
|
369
|
+
</body>
|
data/site/grid.html
ADDED
|
@@ -0,0 +1,716 @@
|
|
|
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=''><div class="grid">
|
|
162
|
+
<div class="col">content</div>
|
|
163
|
+
<div class="col">content</div>
|
|
164
|
+
<div class="col">content</div>
|
|
165
|
+
</div></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>
|