uniform-ui 0.5 → 0.5.1

Sign up to get free protection for your applications and to get access to all the features.
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}