uniform-ui 0.5 → 0.5.1

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.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +2 -1
  3. data/Gemfile +2 -1
  4. data/Gemfile.lock +12 -0
  5. data/Rakefile +34 -8
  6. data/index.html +587 -406
  7. data/preview/index.html.erb +423 -433
  8. data/preview/preview.scss +42 -0
  9. data/site/index.html +660 -0
  10. data/site/logo.png +0 -0
  11. data/site/preview.css +1 -0
  12. data/site/site/logo.png +0 -0
  13. data/site/site/preview.css +1 -0
  14. data/site/site/uniform.css +1 -0
  15. data/site/uniform.css +1 -0
  16. data/uniform.gemspec +3 -2
  17. data/vendor/assets/stylesheets/uniform/components/{buttons.css.scss → buttons.scss} +66 -33
  18. data/vendor/assets/stylesheets/uniform/components/card.scss +83 -0
  19. data/vendor/assets/stylesheets/uniform/components/form.scss +221 -0
  20. data/vendor/assets/stylesheets/uniform/components/grid.scss +83 -0
  21. data/vendor/assets/stylesheets/uniform/components/{inputs.css.scss → inputs.scss} +57 -29
  22. data/vendor/assets/stylesheets/uniform/components/lists.scss +62 -0
  23. data/vendor/assets/stylesheets/uniform/components/loaders.scss +62 -0
  24. data/vendor/assets/stylesheets/uniform/components/nav.scss +44 -0
  25. data/vendor/assets/stylesheets/uniform/components/row.scss +165 -0
  26. data/vendor/assets/stylesheets/uniform/components/table-container.scss +44 -0
  27. data/vendor/assets/stylesheets/uniform/components/table-form.scss +264 -0
  28. data/vendor/assets/stylesheets/uniform/components/tabs.scss +32 -0
  29. data/vendor/assets/stylesheets/uniform/components/tile.scss +32 -0
  30. data/vendor/assets/stylesheets/uniform/defaults.scss +30 -0
  31. data/vendor/assets/stylesheets/uniform/helpers.scss +128 -0
  32. data/vendor/assets/stylesheets/uniform/mixins/grid-framework.scss +142 -0
  33. data/vendor/assets/stylesheets/uniform/{mixins.css.scss → mixins.scss} +16 -32
  34. data/vendor/assets/stylesheets/uniform/variables.scss +54 -0
  35. data/vendor/assets/stylesheets/{uniform.css.scss → uniform.scss} +4 -1
  36. metadata +44 -13
  37. data/preview/preview.css +0 -1
  38. data/preview/preview.css.scss +0 -3
  39. data/preview/uniform.css +0 -0
  40. data/vendor/assets/stylesheets/uniform/components/loaders.css.scss +0 -149
  41. data/vendor/assets/stylesheets/uniform/helpers.css.scss +0 -31
  42. data/vendor/assets/stylesheets/uniform/variables.css.scss +0 -44
data/site/index.html ADDED
@@ -0,0 +1,660 @@
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/preview.css" type="text/css" media="screen" charset="utf-8">
7
+ <link rel="stylesheet" href="site/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
8
+ </head>
9
+ <body>
10
+
11
+
12
+ <div class="side-nav">
13
+ <div style="padding: 20px; padding-right: 30px">
14
+ <img src="site/logo.png" style="width: 100%; height: auto;">
15
+ </div>
16
+ <ul class="uniform-nav">
17
+
18
+ <li><a href="#uniform">Uniform</a></li>
19
+
20
+ <li><a href="#installation">Installation</a></li>
21
+
22
+ <li><a href="#philosophy">Philosophy</a></li>
23
+
24
+ <li><a href="#colors">Colors</a></li>
25
+
26
+ <li><a href="#buttons">Buttons</a></li>
27
+
28
+ <li><a href="#grid">Grid</a></li>
29
+
30
+ <li><a href="#inputs">Inputs</a></li>
31
+
32
+ <li><a href="#forms">Forms</a></li>
33
+
34
+ <li><a href="#loaders">Loaders</a></li>
35
+
36
+ <li><a href="#cards">Cards</a></li>
37
+
38
+ <li><a href="#tiles">Tiles</a></li>
39
+
40
+ <li><a href="#rows">Rows</a></li>
41
+
42
+ <li><a href="#lists">Lists</a></li>
43
+
44
+ <li><a href="#tables">Tables</a></li>
45
+
46
+ <li><a href="#nav">Nav</a></li>
47
+
48
+ <li><a href="#tabs">Tabs</a></li>
49
+
50
+ <li><a href="#helpers">Helpers</a></li>
51
+
52
+ </ul>
53
+ </div>
54
+ <div class="main-content">
55
+
56
+ <a name="uniform"></a>
57
+ <div class="section">
58
+
59
+
60
+ <div class="center">
61
+ <img src="site/logo.png" width="451" height="101">
62
+ <p class="large">Sass components and defaults for building a UI that's on fleak.</p>
63
+ </div>
64
+
65
+ </div>
66
+
67
+ <a name="installation"></a>
68
+ <div class="section">
69
+
70
+ <h1>Installation</h1>
71
+
72
+ <p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
73
+ <p>Execute:<br/><code>$ bundle</code></p>
74
+ <p>Or install it yourself:<br/><code>$ gem install uniform-ui</code></p>
75
+ <p>Include the css library in your asset pipeline.<br/><code>@import 'uniform';</code></p>
76
+
77
+
78
+
79
+ </div>
80
+
81
+ <a name="philosophy"></a>
82
+ <div class="section">
83
+
84
+ <h1>Philosophy</h1>
85
+
86
+ <h3>Don't use ID's</h3>
87
+ <p>Unless you have to, and even then, think twice. HTML Id's make things not reusable. There should only be one instance of an id in a document</p>
88
+
89
+ <h3>Use Semanitc Classes Presentationaly :)</h3>
90
+ <p>Here's a decent post on OOCSS (Object Oriented CSS) as it relates to semantic vs presentational classes: <a href="http://blackfalcon.roughdraft.io/5255648-oocss-v-ooscss-sasscast-show-notes">OOCSS v OOSCSS</a>
91
+ <p><strong>TL;DR:</strong> Semantic classes explain what that element is. Presentational classes explain what the shoud look like.</p>
92
+ <p><code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
93
+ <p>Some of us don't want to touch css files (preference: presentational), and some of us live there (preference: semantic). Honestly, the art of good ui development is balancing semantic and presentational classes. Each taken to their extreme is bad.</p>
94
+ <p>Structure html so that the semantic class is first and presentational classes follow.</p>
95
+ <p><code>class="property-list ul-list col-sm-4"</code></p>
96
+
97
+ <h3>Save the Namespace, save the world</h3>
98
+ <p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
99
+ <p><code>class="label"</code> should be <code>class="text-label"</code></p>
100
+
101
+ <h3>Train-case</h3>
102
+ <p>Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.</p>
103
+
104
+ <div class="row">
105
+ <div class="col-sm-6">
106
+ <h3>Wrappers and Containers</h3>
107
+ <p>The order of nesting should go Wrapper > Element > Container. Sometimes you have to have an inside layer to do advanced css things, and the container should be that layer. This is not a suggestion for every object; use wrapper and/or container as needed.</p>
108
+ </div>
109
+ <div class="col-sm-6">
110
+ <h3>&nbsp;</h3>
111
+ <pre><xmp><div class="property-wrapper">
112
+ <div class="property">
113
+ <div class="property-container">
114
+ </div>
115
+ </div>
116
+ </div></xmp></pre>
117
+ </div>
118
+ </div>
119
+
120
+ </div>
121
+
122
+ <a name="colors"></a>
123
+ <div class="section">
124
+
125
+ <h1>Colors</h1>
126
+
127
+ <table>
128
+ <tr>
129
+ <td><span class='swatch green-light-bg'></span></td>
130
+ <td><code>sass// $green-light</code></td>
131
+ <td><code>class// .green-light</code></td>
132
+ </tr>
133
+ <tr>
134
+ <td><span class='swatch green-bg'></span></td>
135
+ <td><code>sass// $green</code></td>
136
+ <td><code>class// .green</code></td>
137
+ </tr>
138
+ <tr>
139
+ <td><span class='swatch green-dark-bg'></span></td>
140
+ <td><code>sass// $green-dark</code></td>
141
+ <td><code>class// .green-dark</code></td>
142
+ </tr>
143
+ <tr><td colspan='3'>&nbsp;</td></tr>
144
+ <tr>
145
+ <td><span class='swatch blue-light-bg'></span></td>
146
+ <td><code>sass// $blue-light</code></td>
147
+ <td><code>class// .blue-light</code></td>
148
+ </tr>
149
+ <tr>
150
+ <td><span class='swatch blue-bg'></span></td>
151
+ <td><code>sass// $blue</code></td>
152
+ <td><code>class// .blue</code></td>
153
+ </tr>
154
+ <tr>
155
+ <td><span class='swatch blue-dark-bg'></span></td>
156
+ <td><code>sass// $blue-dark</code></td>
157
+ <td><code>class// .blue-dark</code></td>
158
+ </tr>
159
+ <tr><td colspan='3'>&nbsp;</td></tr>
160
+ <tr>
161
+ <td><span class='swatch red-light-bg'></span></td>
162
+ <td><code>sass// $red-light</code></td>
163
+ <td><code>class// .red-light</code></td>
164
+ </tr>
165
+ <tr>
166
+ <td><span class='swatch red-bg'></span></td>
167
+ <td><code>sass// $red</code></td>
168
+ <td><code>class// .red</code></td>
169
+ </tr>
170
+ <tr>
171
+ <td><span class='swatch red-dark-bg'></span></td>
172
+ <td><code>sass// $red-dark</code></td>
173
+ <td><code>class// .red-dark</code></td>
174
+ </tr>
175
+ <tr><td colspan='3'>&nbsp;</td></tr>
176
+ <tr>
177
+ <td><span class='swatch gray-light-bg'></span></td>
178
+ <td><code>sass// $gray-light</code></td>
179
+ <td><code>class// .gray-light</code></td>
180
+ </tr>
181
+ <tr>
182
+ <td><span class='swatch gray-bg'></span></td>
183
+ <td><code>sass// $gray</code></td>
184
+ <td><code>class// .gray</code></td>
185
+ </tr>
186
+ <tr>
187
+ <td><span class='swatch gray-dark-bg'></span></td>
188
+ <td><code>sass// $gray-dark</code></td>
189
+ <td><code>class// .gray-dark</code></td>
190
+ </tr>
191
+ <tr><td colspan='3'>&nbsp;</td></tr>
192
+ <tr>
193
+ <td><span class='swatch yellow-light-bg'></span></td>
194
+ <td><code>sass// $yellow-light</code></td>
195
+ <td><code>class// .yellow-light</code></td>
196
+ </tr>
197
+ <tr>
198
+ <td><span class='swatch yellow-bg'></span></td>
199
+ <td><code>sass// $yellow</code></td>
200
+ <td><code>class// .yellow</code></td>
201
+ </tr>
202
+ <tr>
203
+ <td><span class='swatch yellow-dark-bg'></span></td>
204
+ <td><code>sass// $yellow-dark</code></td>
205
+ <td><code>class// .yellow-dark</code></td>
206
+ </tr>
207
+ <tr><td colspan='3'>&nbsp;</td></tr>
208
+ </table>
209
+
210
+ </div>
211
+
212
+ <a name="buttons"></a>
213
+ <div class="section">
214
+
215
+ <h1>Buttons</h1>
216
+
217
+ <p>Mix and match styles to make the right button, all colors are available as well.</p>
218
+ <p><code>&lt;a href=&#39;#&#39; class=&#39;btn&#39;&gt;&lt;/a&gt;</code></p>
219
+ <table class="table" cellspacing="0" cellpadding="0">
220
+ <tr>
221
+ <th></th>
222
+ <th>Normal</th>
223
+ <th><code>.green</code></th>
224
+ </tr>
225
+ <tr>
226
+ <th></th>
227
+ <td><a class="btn">Button</a></td>
228
+ <td><a class="btn green">Button</a></td>
229
+ </tr>
230
+ <tr>
231
+ <th><code>:hover</code> or <code>.hover</code></th>
232
+ <td><a class="btn hover">Button</a></td>
233
+ <td><a class="btn green hover">Button</a></td>
234
+ </tr>
235
+ <tr>
236
+ <th><code>:active</code> or <code>.active</code></th>
237
+ <td><a class="btn active">Button</a></td>
238
+ <td><a class="btn green active">Button</a></td>
239
+ </tr>
240
+ <tr>
241
+ <th><code>:disabled</code> or <code>.disabled</code></th>
242
+ <td><a class="btn disabled">Button</a></td>
243
+ <td><a class="btn green disabled">Button</a></td>
244
+ </tr>
245
+ <tr>
246
+ <th><code>.subtle</code></th>
247
+ <td><a class="btn subtle">Button</a></td>
248
+ <td><a class="btn green subtle">Button</a></td>
249
+ </tr>
250
+ <tr>
251
+ <th><code>.small</code></th>
252
+ <td><a class="btn small">Button</a></td>
253
+ <td><a class="btn green small">Button</a></td>
254
+ </tr>
255
+ <tr>
256
+ <th><code>.large</code></th>
257
+ <td><a class="btn large">Button</a></td>
258
+ <td><a class="btn green large">Button</a></td>
259
+ </tr>
260
+ <tr>
261
+ <th><code>.outline</code></th>
262
+ <td><a class="btn outline">Button</a></td>
263
+ <td><a class="btn green outline">Button</a></td>
264
+ </tr>
265
+ <tr>
266
+ <th><code>.circle</code></th>
267
+ <td><a class="btn circle">Button</a></td>
268
+ <td><a class="btn green circle">Button</a></td>
269
+ </tr>
270
+ <tr>
271
+ <th><code>.block</code></th>
272
+ <td><a class="btn block">Button</a></td>
273
+ <td><a class="btn green block">Button</a></td>
274
+ </tr>
275
+ </table>
276
+
277
+ </div>
278
+
279
+ <a name="grid"></a>
280
+ <div class="section">
281
+
282
+ <h1>Grid</h1>
283
+
284
+ TODO
285
+
286
+ </div>
287
+
288
+ <a name="inputs"></a>
289
+ <div class="section">
290
+
291
+ <h1>Inputs</h1>
292
+
293
+ <h3>Custom Inputs</h3>
294
+ <div class="row">
295
+ <div class="col-sm-6">
296
+ <p>Styled Select Box
297
+ <p><span class="uniform-select"><select><option>An Option</option></select></span></p>
298
+ </div>
299
+ <div class="col-sm-6">
300
+ <pre><xmp><span class='uniform-select'>
301
+ <select>
302
+ <option>An Option</option>
303
+ </select>
304
+ </span></xmp></pre>
305
+ </div>
306
+ </div>
307
+
308
+ <h3>Inline Inputs</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 inline-input.</p>
310
+ <div class="row">
311
+ <div class="col-sm-6">
312
+
313
+
314
+ <div class="inline-input">
315
+ <span class="label">
316
+ <label for="rate">$</label>
317
+ </span>
318
+ <span>
319
+ <input id="rate">
320
+ </span>
321
+ <span class="units">
322
+ <label for="rate">/hour</label>
323
+ </span>
324
+ </div>
325
+ </div>
326
+ <div class="col-sm-6">
327
+ <pre><xmp><div class="inline-input">
328
+ <span class="label">$</span>
329
+ <span>
330
+ <input id="name" placeholder="Jonathan Doe">
331
+ </span>
332
+ <span class="units">/hour</span>
333
+ </div></xmp></pre>
334
+ </div>
335
+ </div>
336
+ <div class="row">
337
+ <div class="col-sm-6">
338
+ <div class="inline-input">
339
+ <span class="label"><label for="car">Car Preference</label></span>
340
+ <span class="select"><select id="car"><option>Tesla</option></select></span>
341
+ </div>
342
+ </div>
343
+ <div class="col-sm-6">
344
+ <pre><xmp><div class="inline-input">
345
+ <span class="label">
346
+ <label for="car">Car Preference</label>
347
+ </span>
348
+ <span>
349
+ <select id="car"><option>Tesla</option></select>
350
+ </span>
351
+ </div></xmp></pre>
352
+ </div>
353
+ </div>
354
+ <div class="row">
355
+ <div class="col-sm-6">
356
+ <div class="inline-input block">
357
+ <span class="label">
358
+ <label for="car">Car Preference</label>
359
+ </span>
360
+ <span>
361
+ <input id="name" value="Jonathan Doe" disabled>
362
+ </span>
363
+ </div>
364
+ </div>
365
+ <div class="col-sm-6">
366
+ <pre><xmp><div class="inline-input block">
367
+ <span class="label">
368
+ <label for="car">Car Preference</label>
369
+ </span>
370
+ <span>
371
+ <input id="name" value="Jonathan Doe" disabled>
372
+ </span>
373
+ </div></xmp></pre>
374
+ </div>
375
+ </div>
376
+
377
+ </div>
378
+
379
+ <a name="forms"></a>
380
+ <div class="section">
381
+
382
+ <h1>Forms</h1>
383
+
384
+ TODO
385
+
386
+ </div>
387
+
388
+ <a name="loaders"></a>
389
+ <div class="section">
390
+
391
+ <h1>Loaders</h1>
392
+
393
+ <div class="row">
394
+ <div class="col-sm-6">
395
+ <div class="uniform-loader">
396
+ <div class="uniform-loader-container">
397
+ <span>&bull;</span>
398
+ <span>&bull;</span>
399
+ <span>&bull;</span>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ <div class="col-sm-6">
404
+ <pre><xmp><div class="uniform-loader">
405
+ <div class="uniform-loader-container">
406
+ <span>&bull;</span>
407
+ <span>&bull;</span>
408
+ <span>&bull;</span>
409
+ </div>
410
+ </div></xmp></pre>
411
+ </div>
412
+ </div>
413
+ <div class="row">
414
+ <div class="col-sm-6">
415
+ <span style="position:relative; display:inline-block">
416
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
417
+ <div class="uniform-loader cover">
418
+ <div class="uniform-loader-container">
419
+ <span>&bull;</span>
420
+ <span>&bull;</span>
421
+ <span>&bull;</span>
422
+ </div>
423
+ </div>
424
+ </span>
425
+ </div>
426
+ <div class="col-sm-6">
427
+ <pre><xmp><span style="position:relative; display:inline-block">
428
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
429
+ <div class="uniform-loader cover">
430
+ <div class="uniform-loader-container">
431
+ <span>&bull;</span>
432
+ <span>&bull;</span>
433
+ <span>&bull;</span>
434
+ </div>
435
+ </div>
436
+ </span></xmp></pre>
437
+ </div>
438
+ </div>
439
+ <div class="row">
440
+ <div class="col-sm-6">
441
+ <span style="position:relative; display:inline-block">
442
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
443
+ <div class="uniform-loader cover light">
444
+ <div class="uniform-loader-container">
445
+ <span>&bull;</span>
446
+ <span>&bull;</span>
447
+ <span>&bull;</span>
448
+ </div>
449
+ </div>
450
+ </span>
451
+ </div>
452
+ <div class="col-sm-6">
453
+ <pre><xmp><span style="position:relative; display:inline-block">
454
+ <img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
455
+ <div class="uniform-loader cover light">
456
+ <div class="uniform-loader-container">
457
+ <span>&bull;</span>
458
+ <span>&bull;</span>
459
+ <span>&bull;</span>
460
+ </div>
461
+ </div>
462
+ </span></xmp></pre>
463
+ </div>
464
+ </div>
465
+
466
+ </div>
467
+
468
+ <a name="cards"></a>
469
+ <div class="section">
470
+
471
+ <h1>Cards</h1>
472
+
473
+ <div class="row">
474
+ <div class="col-sm-6">
475
+ <div class="uniform-card">
476
+ <div class="uniform-card-title">
477
+ <span class="type">Sample Card</span>
478
+ </div>
479
+ <div class="uniform-card-body">Put Content In Here</div>
480
+ </div>
481
+ </div>
482
+ <div class="col-sm-6">
483
+ <pre><xmp><div class="uniform-card">
484
+ <div class="uniform-card-title">
485
+ <span class="type">Sample Card</span>
486
+ </div>
487
+ <div class="uniform-card-body">Put Content In Here</div>
488
+ </div></xmp></pre>
489
+ </div>
490
+ </div>
491
+ <div class="row">
492
+ <div class="col-sm-6">
493
+ <div class="uniform-card">
494
+ <div class="uniform-card-avatar">
495
+ <img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
496
+ </div>
497
+ <div class="uniform-card-container">
498
+ <div class="uniform-card-title">
499
+ <span class="type">John Dozer</span>
500
+ <div class="actions">
501
+ <a class="btn">Edit</a>
502
+ </div>
503
+ </div>
504
+ <div class="uniform-card-body">
505
+ <div class="uniform-card-attributes">
506
+ <div>
507
+ <div>Company</div>
508
+ <div>Friendly Associates</div>
509
+ </div>
510
+ <div>
511
+ <div>Title</div>
512
+ <div>Head Dude</div>
513
+ </div>
514
+ <div>
515
+ <div>Skills</div>
516
+ <div>Stapling, Jogging</div>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ <div class="col-sm-6">
524
+ <pre><xmp><div class="uniform-card">
525
+ <div class="uniform-card-avatar">
526
+ <img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
527
+ </div>
528
+ <div class="uniform-card-container">
529
+ <div class="uniform-card-title">
530
+ <span class="type">John Dozer</span>
531
+ <div class="actions">
532
+ <a class="btn">Edit</a>
533
+ </div>
534
+ </div>
535
+ <div class="uniform-card-body">
536
+ <div class="uniform-card-attributes">
537
+ <div>
538
+ <div>Company</div>
539
+ <div>Friendly Associates</div>
540
+ </div>
541
+ <div>
542
+ <div>Title</div>
543
+ <div>Head Dude</div>
544
+ </div>
545
+ <div>
546
+ <div>Skills</div>
547
+ <div>Stapling, Jogging</div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div></xmp></pre>
553
+ </div>
554
+ </div>
555
+
556
+ </div>
557
+
558
+ <a name="tiles"></a>
559
+ <div class="section">
560
+
561
+ <h1>Tiles</h1>
562
+
563
+ TODO
564
+
565
+ </div>
566
+
567
+ <a name="rows"></a>
568
+ <div class="section">
569
+
570
+ <h1>Rows</h1>
571
+
572
+ TODO
573
+
574
+ </div>
575
+
576
+ <a name="lists"></a>
577
+ <div class="section">
578
+
579
+ <h1>Lists</h1>
580
+
581
+ TODO
582
+
583
+ </div>
584
+
585
+ <a name="tables"></a>
586
+ <div class="section">
587
+
588
+ <h1>Tables</h1>
589
+
590
+ TODO
591
+
592
+ </div>
593
+
594
+ <a name="nav"></a>
595
+ <div class="section">
596
+
597
+ <h1>Nav</h1>
598
+
599
+ <div class="row">
600
+ <div class="col-sm-6">
601
+ <div class="uniform-nav horizontal main">
602
+ <div class="pad">Logo</div>
603
+ <div class="right">
604
+ <div><a>Account</a></div>
605
+ <div><a>Sign Out</a></div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ <div class="col-sm-6">
610
+ <pre><xmp><div class="uniform-nav horizontal main">
611
+ <div class="pad">Logo</div>
612
+ <div class="right">
613
+ <div><a>Account</a></div>
614
+ <div><a>Sign Out</a></div>
615
+ </div>
616
+ </div></xmp></pre>
617
+ </div>
618
+ </div>
619
+ <div class="row">
620
+ <div class="col-sm-6">
621
+ <div class="uniform-nav">
622
+ <ul>
623
+ <li><a>Account</a></li>
624
+ <li><a>Sign Out</a></li>
625
+ </ul>
626
+ </div>
627
+ </div>
628
+ <div class="col-sm-6">
629
+ <pre><xmp><div class="uniform-nav">
630
+ <ul>
631
+ <li><a>Account</a></li>
632
+ <li><a>Sign Out</a></li>
633
+ </ul>
634
+ </div></xmp></pre>
635
+ </div>
636
+ </div>
637
+
638
+ </div>
639
+
640
+ <a name="tabs"></a>
641
+ <div class="section">
642
+
643
+ <h1>Tabs</h1>
644
+
645
+ TODO
646
+
647
+ </div>
648
+
649
+ <a name="helpers"></a>
650
+ <div class="section">
651
+
652
+ <h1>Helpers</h1>
653
+
654
+ TODO
655
+
656
+ </div>
657
+
658
+ </div>
659
+ <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
660
+ </body>
data/site/logo.png ADDED
Binary file
data/site/preview.css ADDED
@@ -0,0 +1 @@
1
+ *{box-sizing:border-box}html,body{font-family:Helvetica, sans-serif}.section{width:100%;padding:100px 50px;border-bottom:1px solid #cccccc}.section pre:first-of-type{margin-top:0}.side-nav{position:fixed;overflow-y:scroll;width:250px;height:100%;border-right:1px solid #cccccc}.side-nav a{color:black}.main-content{margin-left:250px}.swatch{height:1em;width:4em;margin-right:5px;background:gray;display:inline-block;vertical-align:middle}.table{width:100%}.table td{padding:5px}
data/site/site/logo.png ADDED
Binary file
data/site/site/preview.css ADDED
@@ -0,0 +1 @@
1
+ *{box-sizing:border-box}html,body{font-family:Helvetica, sans-serif}.section{width:100%;padding:100px 50px;border-bottom:1px solid #cccccc}.section pre:first-of-type{margin-top:0}.side-nav{position:fixed;overflow-y:scroll;width:250px;height:100%;border-right:1px solid #cccccc}.side-nav a{color:black}.main-content{margin-left:250px}.swatch{height:1em;width:4em;margin-right:5px;background:gray;display:inline-block;vertical-align:middle}.table{width:100%}.table td{padding:5px}