edge_framework 1.4.1 → 2.0.0.a
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 +8 -8
- data/LICENSE.txt +1 -1
- data/README.md +180 -305
- data/assets/kitchensink.html +422 -513
- data/assets/sass/_edge.scss +1 -1
- data/assets/sass/edge/_base.scss +47 -70
- data/assets/sass/edge/_components.scss +0 -1
- data/assets/sass/edge/components/_button.scss +8 -78
- data/assets/sass/edge/components/_form.scss +22 -91
- data/assets/sass/edge/components/_grid.scss +99 -123
- data/assets/sass/edge/components/_normalize.scss +9 -4
- data/assets/sass/edge/components/_print.scss +1 -1
- data/assets/sass/edge/components/_tile.scss +38 -52
- data/assets/sass/edge/components/_typography.scss +0 -1
- data/assets/test/kitchensink.scss +68 -216
- data/edge.gemspec +5 -4
- data/lib/edge/version.rb +3 -3
- data/template/base/assets/js/vendor/edge.js +20 -0
- data/template/base/assets/js/vendor/webcomponents.min.js +14 -0
- data/template/base/assets/sass/_setting.scss +1 -4
- data/template/base/assets/sass/framework.scss +14 -1
- data/template/base/config.rb +1 -2
- data/template/html/index.html +2 -0
- data/template/wordpress/views/layout.twig +9 -9
- metadata +11 -10
- data/assets/sass/edge/components/_visibility.scss +0 -95
data/assets/kitchensink.html
CHANGED
|
@@ -24,11 +24,12 @@
|
|
|
24
24
|
<!-- <header class="top-bar">
|
|
25
25
|
</header> -->
|
|
26
26
|
|
|
27
|
+
|
|
27
28
|
<!-- <div class="row" data-page="vertical-rhythm">
|
|
28
|
-
<div class="large-12
|
|
29
|
+
<div class="large-12 column">
|
|
29
30
|
<article class="blog-post baseline">
|
|
30
31
|
<div class="row">
|
|
31
|
-
<div class="large-6
|
|
32
|
+
<div class="large-6 column">
|
|
32
33
|
<div class="typo-wrapper">
|
|
33
34
|
<h1>Unordered List</h1>
|
|
34
35
|
<ul class="bullet-list">
|
|
@@ -45,7 +46,7 @@
|
|
|
45
46
|
</ul>
|
|
46
47
|
</div>
|
|
47
48
|
</div>
|
|
48
|
-
<div class="large-6
|
|
49
|
+
<div class="large-6 column">
|
|
49
50
|
<div class="typo-wrapper">
|
|
50
51
|
<h1>Ordered List</h1>
|
|
51
52
|
<ol>
|
|
@@ -64,7 +65,7 @@
|
|
|
64
65
|
</div>
|
|
65
66
|
</div>
|
|
66
67
|
<div class="row">
|
|
67
|
-
<div class="large-6 small-9
|
|
68
|
+
<div class="large-6 small-9 column">
|
|
68
69
|
<h1>Lorem ipsum dolor sit amet.</h1>
|
|
69
70
|
<p>
|
|
70
71
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eaque illum tempora mollitia magni omnis debitis quidem culpa dolores praesentium at veniam nobis! Iusto, excepturi, accusamus autem iure ab magnam!
|
|
@@ -108,7 +109,7 @@
|
|
|
108
109
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, maxime, soluta, perspiciatis ratione suscipit voluptate numquam dicta facere reiciendis saepe laboriosam molestias facilis officiis impedit sunt quo enim quaerat cum.
|
|
109
110
|
</p>
|
|
110
111
|
</div>
|
|
111
|
-
<div class="large-3 small-3
|
|
112
|
+
<div class="large-3 small-3 column">
|
|
112
113
|
<div class="sidebar">
|
|
113
114
|
<h2>SIDEBAR</h2>
|
|
114
115
|
<p>
|
|
@@ -141,10 +142,10 @@
|
|
|
141
142
|
</section> -->
|
|
142
143
|
|
|
143
144
|
<!-- <div class="row" data-page="typography">
|
|
144
|
-
<div class="large-12
|
|
145
|
+
<div class="large-12 column">
|
|
145
146
|
<article>
|
|
146
147
|
<div class="row">
|
|
147
|
-
<div class="large-6
|
|
148
|
+
<div class="large-6 column">
|
|
148
149
|
<h1>Unordered List</h1>
|
|
149
150
|
<ul>
|
|
150
151
|
<li>Lorem ipsum dolor sit</li>
|
|
@@ -159,7 +160,7 @@
|
|
|
159
160
|
<li>Impedit sint nulla nobis suscipit rem aspernatur</li>
|
|
160
161
|
</ul>
|
|
161
162
|
</div>
|
|
162
|
-
<div class="large-6
|
|
163
|
+
<div class="large-6 column">
|
|
163
164
|
<h1>Ordered List</h1>
|
|
164
165
|
<ol>
|
|
165
166
|
<li>Lorem ipsum dolor sit.</li>
|
|
@@ -178,7 +179,7 @@
|
|
|
178
179
|
</div>
|
|
179
180
|
</div>
|
|
180
181
|
<div class="row">
|
|
181
|
-
<div class="large-6 small-9
|
|
182
|
+
<div class="large-6 small-9 column">
|
|
182
183
|
<h1>Lorem ipsum dolor sit amet.</h1>
|
|
183
184
|
<p>
|
|
184
185
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eaque illum tempora mollitia magni omnis debitis quidem culpa dolores praesentium at veniam nobis! Iusto, excepturi, accusamus autem iure ab magnam!
|
|
@@ -197,7 +198,7 @@
|
|
|
197
198
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, maxime, soluta, perspiciatis ratione suscipit voluptate numquam dicta facere reiciendis saepe laboriosam molestias facilis officiis impedit sunt quo enim quaerat cum.
|
|
198
199
|
</p>
|
|
199
200
|
</div>
|
|
200
|
-
<div class="large-3 small-3
|
|
201
|
+
<div class="large-3 small-3 column">
|
|
201
202
|
<div class="sidebar">
|
|
202
203
|
<h2>SIDEBAR</h2>
|
|
203
204
|
<p>
|
|
@@ -296,7 +297,7 @@
|
|
|
296
297
|
|
|
297
298
|
<!--
|
|
298
299
|
<div class="row" data-page="code">
|
|
299
|
-
<div class="large-12
|
|
300
|
+
<div class="large-12 column">
|
|
300
301
|
<h1>EDGE Code</h1>
|
|
301
302
|
<h3>Markup</h3>
|
|
302
303
|
<pre class="line-numbers" data-lang="markup"><code>
|
|
@@ -345,481 +346,414 @@
|
|
|
345
346
|
</div> -->
|
|
346
347
|
|
|
347
348
|
<!-- <div class="row" data-page="tile">
|
|
348
|
-
<div class="large-12
|
|
349
|
+
<div class="large-12 column">
|
|
349
350
|
<div class="demo-tile">
|
|
350
351
|
<h1>Tile</h1>
|
|
351
|
-
<
|
|
352
|
-
<
|
|
353
|
-
<
|
|
354
|
-
<
|
|
355
|
-
<
|
|
356
|
-
<
|
|
357
|
-
<
|
|
358
|
-
<
|
|
359
|
-
<
|
|
360
|
-
<
|
|
361
|
-
|
|
362
|
-
<li><p>1</p></li>
|
|
363
|
-
<li><p>1</p></li>
|
|
364
|
-
</ul>
|
|
352
|
+
<h-tile class="block-7 small-block-4">
|
|
353
|
+
<h-ti><p>1</p></h-ti>
|
|
354
|
+
<h-ti><p>1</p></h-ti>
|
|
355
|
+
<h-ti><p>1</p></h-ti>
|
|
356
|
+
<h-ti><p>1</p></h-ti>
|
|
357
|
+
<h-ti><p>1</p></h-ti>
|
|
358
|
+
<h-ti><p>1</p></h-ti>
|
|
359
|
+
<h-ti><p>1</p></h-ti>
|
|
360
|
+
<h-ti><p>1</p></h-ti>
|
|
361
|
+
<h-ti><p>1</p></h-ti>
|
|
362
|
+
</h-tile>
|
|
365
363
|
<h2>Tile Collapse</h2>
|
|
366
|
-
<
|
|
367
|
-
<
|
|
368
|
-
<
|
|
369
|
-
<
|
|
370
|
-
<
|
|
371
|
-
<
|
|
372
|
-
<
|
|
373
|
-
<
|
|
374
|
-
<
|
|
375
|
-
<
|
|
376
|
-
|
|
377
|
-
<li><p>1</p></li>
|
|
378
|
-
<li><p>1</p></li>
|
|
379
|
-
</ul>
|
|
364
|
+
<h-tile class="block-5 small-block-3 collapse">
|
|
365
|
+
<h-ti><p>1</p></h-ti>
|
|
366
|
+
<h-ti><p>1</p></h-ti>
|
|
367
|
+
<h-ti><p>1</p></h-ti>
|
|
368
|
+
<h-ti><p>1</p></h-ti>
|
|
369
|
+
<h-ti><p>1</p></h-ti>
|
|
370
|
+
<h-ti><p>1</p></h-ti>
|
|
371
|
+
<h-ti><p>1</p></h-ti>
|
|
372
|
+
<h-ti><p>1</p></h-ti>
|
|
373
|
+
<h-ti><p>1</p></h-ti>
|
|
374
|
+
</h-tile>
|
|
380
375
|
</div>
|
|
381
376
|
</div>
|
|
382
377
|
</div> -->
|
|
383
378
|
|
|
384
|
-
<div class="row" data-page="custom-tile">
|
|
385
|
-
<div class="large-12
|
|
379
|
+
<!-- <div class="row" data-page="custom-tile">
|
|
380
|
+
<div class="large-12 column">
|
|
386
381
|
<div class="demo-tile">
|
|
387
382
|
<h1>Custom Tile</h1>
|
|
388
|
-
<
|
|
389
|
-
<
|
|
390
|
-
<
|
|
391
|
-
<
|
|
392
|
-
<
|
|
393
|
-
<
|
|
394
|
-
<
|
|
395
|
-
<
|
|
396
|
-
<
|
|
397
|
-
<
|
|
398
|
-
|
|
399
|
-
<li><p>1</p></li>
|
|
400
|
-
<li><p>1</p></li>
|
|
401
|
-
</ul>
|
|
383
|
+
<h-tile class="ctile-1">
|
|
384
|
+
<h-ti><p>1</p></h-ti>
|
|
385
|
+
<h-ti><p>1</p></h-ti>
|
|
386
|
+
<h-ti><p>1</p></h-ti>
|
|
387
|
+
<h-ti><p>1</p></h-ti>
|
|
388
|
+
<h-ti><p>1</p></h-ti>
|
|
389
|
+
<h-ti><p>1</p></h-ti>
|
|
390
|
+
<h-ti><p>1</p></h-ti>
|
|
391
|
+
<h-ti><p>1</p></h-ti>
|
|
392
|
+
<h-ti><p>1</p></h-ti>
|
|
393
|
+
</h-tile>
|
|
402
394
|
<h2>Custom Tile Collapsed</h2>
|
|
403
|
-
<
|
|
404
|
-
<
|
|
405
|
-
<
|
|
406
|
-
<
|
|
407
|
-
<
|
|
408
|
-
<
|
|
409
|
-
<
|
|
410
|
-
<
|
|
411
|
-
<
|
|
412
|
-
<
|
|
413
|
-
|
|
414
|
-
<li><p>1</p></li>
|
|
415
|
-
<li><p>1</p></li>
|
|
416
|
-
</ul>
|
|
395
|
+
<h-tile class="ctile-2">
|
|
396
|
+
<h-ti><p>1</p></h-ti>
|
|
397
|
+
<h-ti><p>1</p></h-ti>
|
|
398
|
+
<h-ti><p>1</p></h-ti>
|
|
399
|
+
<h-ti><p>1</p></h-ti>
|
|
400
|
+
<h-ti><p>1</p></h-ti>
|
|
401
|
+
<h-ti><p>1</p></h-ti>
|
|
402
|
+
<h-ti><p>1</p></h-ti>
|
|
403
|
+
<h-ti><p>1</p></h-ti>
|
|
404
|
+
<h-ti><p>1</p></h-ti>
|
|
405
|
+
</h-tile>
|
|
417
406
|
<h2>Custom Tile Mini</h2>
|
|
418
|
-
<
|
|
419
|
-
<
|
|
420
|
-
<
|
|
421
|
-
<
|
|
422
|
-
<
|
|
423
|
-
<
|
|
424
|
-
<
|
|
425
|
-
<
|
|
426
|
-
<
|
|
427
|
-
<
|
|
428
|
-
|
|
429
|
-
<li><p>1</p></li>
|
|
430
|
-
<li><p>1</p></li>
|
|
431
|
-
</ul>
|
|
407
|
+
<h-tile class="ctile-3">
|
|
408
|
+
<h-ti><p>1</p></h-ti>
|
|
409
|
+
<h-ti><p>1</p></h-ti>
|
|
410
|
+
<h-ti><p>1</p></h-ti>
|
|
411
|
+
<h-ti><p>1</p></h-ti>
|
|
412
|
+
<h-ti><p>1</p></h-ti>
|
|
413
|
+
<h-ti><p>1</p></h-ti>
|
|
414
|
+
<h-ti><p>1</p></h-ti>
|
|
415
|
+
<h-ti><p>1</p></h-ti>
|
|
416
|
+
<h-ti><p>1</p></h-ti>
|
|
417
|
+
</h-tile>
|
|
432
418
|
</div>
|
|
433
419
|
</div>
|
|
434
|
-
</div>
|
|
420
|
+
</div> -->
|
|
435
421
|
|
|
436
|
-
|
|
437
|
-
<div>
|
|
438
|
-
<
|
|
439
|
-
<
|
|
440
|
-
<
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
<
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
<
|
|
451
|
-
<
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
<
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
422
|
+
<section data-page="grid">
|
|
423
|
+
<div class="demo-grid">
|
|
424
|
+
<h1>Grid</h1>
|
|
425
|
+
<h-row>
|
|
426
|
+
<h-column class="large-4 small-4"><p>l4 s4</p></h-column>
|
|
427
|
+
<h-column class="large-4 small-4"><p>l4 s4</p></h-column>
|
|
428
|
+
<h-column class="large-4 small-4"><p>l4 s4</p></h-column>
|
|
429
|
+
</h-row>
|
|
430
|
+
<h-row>
|
|
431
|
+
<h-column class="large-6 small-9"><p>l6 s9</p></h-column>
|
|
432
|
+
<h-column class="large-6 small-3"><p>l6 s3</p></h-column>
|
|
433
|
+
</h-row>
|
|
434
|
+
|
|
435
|
+
<h1>Collapsed Grid</h1>
|
|
436
|
+
<h-row class="collapse">
|
|
437
|
+
<h-column class="large-6 small-6"><p>l6 s6</p></h-column>
|
|
438
|
+
<h-column class="large-6 small-6"><p>l6 s6</p></h-column>
|
|
439
|
+
</h-row>
|
|
440
|
+
<h-row class="collapse">
|
|
441
|
+
<h-column class="large-8"><p>l8</p></h-column>
|
|
442
|
+
<h-column class="large-4"><p>l4</p></h-column>
|
|
443
|
+
</h-row>
|
|
444
|
+
|
|
445
|
+
<h1>Nested Variation</h1>
|
|
446
|
+
<h-row>
|
|
447
|
+
<h3>normal then normal</h3>
|
|
448
|
+
<h-column class="large-6">
|
|
449
|
+
<p>l6</p>
|
|
450
|
+
<h-row>
|
|
451
|
+
<h-column class="large-4"><p>l4</p></h-column>
|
|
452
|
+
<h-column class="large-8"><p>l8</p></h-column>
|
|
453
|
+
</h-row>
|
|
454
|
+
</h-column>
|
|
455
|
+
<h-column class="large-4"><p>l4</p></h-column>
|
|
456
|
+
<h-column class="large-2"><p>l2</p></h-column>
|
|
457
|
+
</h-row>
|
|
458
|
+
|
|
459
|
+
<h-row class="collapse">
|
|
460
|
+
<h3>collapse then collapse</h3>
|
|
461
|
+
<h-column class="large-6">
|
|
462
|
+
<p>l6</p>
|
|
463
|
+
<h-row class="collapse">
|
|
464
|
+
<h-column class="large-4"><p>l4</p></h-column>
|
|
465
|
+
<h-column class="large-8"><p>l8</p></h-column>
|
|
466
|
+
</h-row>
|
|
467
|
+
</h-column>
|
|
468
|
+
<h-column class="large-4"><p>l4</p></h-column>
|
|
469
|
+
<h-column class="large-2"><p>l2</p></h-column>
|
|
470
|
+
</h-row>
|
|
471
|
+
|
|
472
|
+
<h-row>
|
|
473
|
+
<h3>normal then collapse</h3>
|
|
474
|
+
<h-column class="large-6">
|
|
475
|
+
<p>l6</p>
|
|
476
|
+
<h-row class="collapse">
|
|
477
|
+
<h-column class="large-4"><p>l4</p></h-column>
|
|
478
|
+
<h-column class="large-8"><p>l8</p></h-column>
|
|
479
|
+
</h-row>
|
|
480
|
+
</h-column>
|
|
481
|
+
<h-column class="large-4"><p>l4</p></h-column>
|
|
482
|
+
<h-column class="large-2"><p>l2</p></h-column>
|
|
483
|
+
</h-row>
|
|
484
|
+
|
|
485
|
+
<h-row class="collapse">
|
|
486
|
+
<h3>collapse then normal</h3>
|
|
487
|
+
<h-column class="large-6">
|
|
488
|
+
<p>l6</p>
|
|
489
|
+
<h-row>
|
|
490
|
+
<h-column class="large-4"><p>l4</p></h-column>
|
|
491
|
+
<h-column class="large-8"><p>l8</p></h-column>
|
|
492
|
+
</h-row>
|
|
493
|
+
</h-column>
|
|
494
|
+
<h-column class="large-4"><p>l4</p></h-column>
|
|
495
|
+
<h-column class="large-2"><p>l2</p></h-column>
|
|
496
|
+
</h-row>
|
|
497
|
+
|
|
498
|
+
<h1>Nested Collapsed vs. Nested</h1>
|
|
499
|
+
<h-row>
|
|
500
|
+
<h-column class="large-6 small-6">
|
|
501
|
+
<p>l6 s6</p>
|
|
502
|
+
<h-row class="collapse">
|
|
503
|
+
<h-column class="large-9 small-6">
|
|
504
|
+
<p>l9 s6</p>
|
|
505
|
+
</h-column>
|
|
506
|
+
<h-column class="large-3 small-6">
|
|
507
|
+
<p>l3 s6</p>
|
|
508
|
+
</h-column>
|
|
509
|
+
</h-row>
|
|
510
|
+
</h-column>
|
|
511
|
+
|
|
512
|
+
<h-column class="large-6 small-6">
|
|
513
|
+
<p>l6 s6</p>
|
|
514
|
+
<h-row>
|
|
515
|
+
<h-column class="large-9 small-6">
|
|
516
|
+
<p>l9 s6</p>
|
|
517
|
+
</h-column>
|
|
518
|
+
<h-column class="large-3 small-6">
|
|
519
|
+
<p>l3 s6</p>
|
|
520
|
+
</h-column>
|
|
521
|
+
</h-row>
|
|
522
|
+
</h-column>
|
|
523
|
+
</h-row>
|
|
524
|
+
|
|
459
525
|
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
526
|
+
<h1>Offset and Source Ordering</h1>
|
|
527
|
+
<h-row>
|
|
528
|
+
<h-column class="large-3 small-5">
|
|
529
|
+
<p>
|
|
530
|
+
l3 s5
|
|
531
|
+
</p>
|
|
532
|
+
</h-column>
|
|
533
|
+
<h-column class="large-6 offset-3 small-5">
|
|
534
|
+
<p>
|
|
535
|
+
l6 o3 - s5
|
|
536
|
+
</p>
|
|
537
|
+
</h-column>
|
|
538
|
+
</h-row>
|
|
539
|
+
|
|
540
|
+
<p>collapsed</p>
|
|
541
|
+
<h-row class="collapse">
|
|
542
|
+
<h-column class="large-3 large-offset-3 small-5">
|
|
543
|
+
<p>
|
|
544
|
+
l3 o3 - s5
|
|
545
|
+
</p>
|
|
546
|
+
</h-column>
|
|
547
|
+
<h-column class="large-6 small-5 small-offset-2">
|
|
548
|
+
<p>
|
|
549
|
+
l6 - s5 so2
|
|
550
|
+
</p>
|
|
551
|
+
</h-column>
|
|
552
|
+
</h-row>
|
|
553
|
+
|
|
554
|
+
<h1>Nested Grid</h1>
|
|
555
|
+
<h-row>
|
|
556
|
+
<h-column class="large-12">
|
|
557
|
+
<p>l12</p>
|
|
558
|
+
<h-row>
|
|
559
|
+
<h-column class="large-8">
|
|
560
|
+
<p>l8</p>
|
|
561
|
+
<h-row>
|
|
562
|
+
<h-column class="large-6"><p>l6</p></h-column>
|
|
563
|
+
<h-column class="large-6"><p>l6</p></h-column>
|
|
564
|
+
</h-row>
|
|
565
|
+
|
|
566
|
+
</h-column>
|
|
567
|
+
<h-column class="large-4">
|
|
568
|
+
<p>l4</p>
|
|
569
|
+
<h-row>
|
|
570
|
+
<h-column class="large-7"><p>l7</p></h-column>
|
|
571
|
+
<h-column class="large-5"><p>l5</p></h-column>
|
|
572
|
+
</h-row>
|
|
573
|
+
</h-column>
|
|
574
|
+
</h-row>
|
|
575
|
+
</h-column>
|
|
576
|
+
</h-row>
|
|
577
|
+
|
|
578
|
+
<h1>Responsive Nested Grid</h1>
|
|
579
|
+
<h-row>
|
|
580
|
+
<h-column class="large-12 small-12">
|
|
581
|
+
<p>l12 s12</p>
|
|
582
|
+
<h-row>
|
|
583
|
+
<h-column class="large-8 small-8">
|
|
584
|
+
<p>l8 s8</p>
|
|
585
|
+
<h-row>
|
|
586
|
+
<h-column class="large-6 small-9"><p>l6 s9</p></h-column>
|
|
587
|
+
<h-column class="large-6 small-3"><p>l6 s3</p></h-column>
|
|
588
|
+
</h-row>
|
|
589
|
+
</h-column>
|
|
590
|
+
<h-column class="large-4 small-4">
|
|
591
|
+
<p>l4 s4</p>
|
|
592
|
+
<h-row>
|
|
593
|
+
<h-column class="large-7 small-7"><p>l7 s7</p></h-column>
|
|
594
|
+
<h-column class="large-5 small-5"><p>l5 s5</p></h-column>
|
|
595
|
+
</h-row>
|
|
596
|
+
</h-column>
|
|
597
|
+
</h-row>
|
|
598
|
+
</h-column>
|
|
599
|
+
</h-row>
|
|
600
|
+
|
|
601
|
+
<h1>Responsive offset and Centering</h1>
|
|
602
|
+
<h-row>
|
|
603
|
+
<h-column class="large-8 offset-2 small-5 small-offset-3">
|
|
604
|
+
<p>l8 o2 - s5 so3</p>
|
|
605
|
+
</h-column>
|
|
606
|
+
</h-row>
|
|
607
|
+
<h-row>
|
|
608
|
+
<h-column class="large-6 centered small-8">
|
|
609
|
+
<p>l6 c - s8 sc</p>
|
|
610
|
+
</h-column>
|
|
611
|
+
</h-row>
|
|
485
612
|
|
|
613
|
+
</div>
|
|
614
|
+
</section>
|
|
486
615
|
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
<
|
|
502
|
-
|
|
616
|
+
<section class="demo-grid" data-page="custom-grid">
|
|
617
|
+
|
|
618
|
+
<h1>Custom Grid</h1>
|
|
619
|
+
<ul>
|
|
620
|
+
<li>L = Large</li>
|
|
621
|
+
<li>S = Small</li>
|
|
622
|
+
<li>M = Mini</li>
|
|
623
|
+
<li>O = Offset</li>
|
|
624
|
+
<li>C = Collapsed</li>
|
|
625
|
+
</ul>
|
|
626
|
+
|
|
627
|
+
<h3>L only</h3>
|
|
628
|
+
<h-row>
|
|
629
|
+
<h-column class="cgrid-l1">
|
|
630
|
+
<p>l5</p>
|
|
631
|
+
</h-column>
|
|
632
|
+
<h-column class="cgrid-l2">
|
|
633
|
+
<p>l7</p>
|
|
634
|
+
</h-column>
|
|
635
|
+
</h-row>
|
|
636
|
+
|
|
637
|
+
<h3>L - S</h3>
|
|
638
|
+
<h-row>
|
|
639
|
+
<h-column class="cgrid-ls1">
|
|
640
|
+
<p>l5 s10</p>
|
|
641
|
+
</h-column>
|
|
642
|
+
<h-column class="cgrid-ls2">
|
|
643
|
+
<p>l7 s2</p>
|
|
644
|
+
</h-column>
|
|
645
|
+
</h-row>
|
|
646
|
+
|
|
647
|
+
<h3>Center - S uncentering</h3>
|
|
648
|
+
<h-row>
|
|
649
|
+
<h-column class="cgrid-c">
|
|
650
|
+
<p>l-center s-uncenter</p>
|
|
651
|
+
</h-column>
|
|
652
|
+
</h-row>
|
|
653
|
+
|
|
654
|
+
<h3>L - S - M</h3>
|
|
655
|
+
<h-row>
|
|
656
|
+
<h-column class="cgrid-lsm1">
|
|
657
|
+
<p>l4 s6 m8</p>
|
|
658
|
+
</h-column>
|
|
659
|
+
<h-column class="cgrid-lsm2">
|
|
660
|
+
<p>l8 s6 m4</p>
|
|
661
|
+
</h-column>
|
|
662
|
+
</h-row>
|
|
663
|
+
|
|
664
|
+
<h3>LO - S</h3>
|
|
665
|
+
<h-row>
|
|
666
|
+
<h-column class="cgrid-los1">
|
|
667
|
+
<p>l6 o4 - s6</p>
|
|
668
|
+
</h-column>
|
|
669
|
+
<h-column class="cgrid-los2">
|
|
670
|
+
<p>l2 s6</p>
|
|
671
|
+
</h-column>
|
|
672
|
+
</h-row>
|
|
673
|
+
|
|
674
|
+
<h3>LO - SO - M</h3>
|
|
675
|
+
<h-row>
|
|
676
|
+
<h-column class="cgrid-losom1">
|
|
677
|
+
<p>l10 o2 - s6 so6 - m4</p>
|
|
678
|
+
</h-column>
|
|
679
|
+
</h-row>
|
|
680
|
+
|
|
681
|
+
<h1>Nesting</h1>
|
|
682
|
+
<h-row>
|
|
683
|
+
<h3>normal then normal</h3>
|
|
684
|
+
<h-column class="cgrid-nest1">
|
|
685
|
+
<p>l6</p>
|
|
686
|
+
<h-row>
|
|
687
|
+
<h-column class="cgrid-nest1-1"><p>l4</p></h-column>
|
|
688
|
+
<h-column class="cgrid-nest1-2"><p>l8</p></h-column>
|
|
689
|
+
</h-row>
|
|
690
|
+
</h-column>
|
|
691
|
+
<h-column class="cgrid-nest2"><p>l4</p></h-column>
|
|
692
|
+
<h-column class="cgrid-nest3"><p>l2</p></h-column>
|
|
693
|
+
</h-row>
|
|
694
|
+
|
|
695
|
+
<h-row class="cgrid-c">
|
|
696
|
+
<h3>collapse then collapse</h3>
|
|
697
|
+
<h-column class="cgrid-nest1">
|
|
698
|
+
<p>l6</p>
|
|
699
|
+
<h-row class="cgrid-c">
|
|
700
|
+
<h-column class="cgrid-nest1-1"><p>l4</p></h-column>
|
|
701
|
+
<h-column class="cgrid-nest1-2"><p>l8</p></h-column>
|
|
702
|
+
</h-row>
|
|
703
|
+
</h-column>
|
|
704
|
+
<h-column class="cgrid-nest2"><p>l4</p></h-column>
|
|
705
|
+
<h-column class="cgrid-nest3"><p>l2</p></h-column>
|
|
706
|
+
</h-row>
|
|
707
|
+
|
|
708
|
+
<h-row>
|
|
709
|
+
<h3>normal then collapse</h3>
|
|
710
|
+
<h-column class="cgrid-nest1">
|
|
711
|
+
<p>l6</p>
|
|
712
|
+
<h-row class="cgrid-c">
|
|
713
|
+
<h-column class="cgrid-nest1-1"><p>l4</p></h-column>
|
|
714
|
+
<h-column class="cgrid-nest1-2"><p>l8</p></h-column>
|
|
715
|
+
</h-row>
|
|
716
|
+
</h-column>
|
|
717
|
+
<h-column class="cgrid-nest2"><p>l4</p></h-column>
|
|
718
|
+
<h-column class="cgrid-nest3"><p>l2</p></h-column>
|
|
719
|
+
</h-row>
|
|
720
|
+
|
|
721
|
+
<h-row class="cgrid-c">
|
|
722
|
+
<h3>collapse then normal</h3>
|
|
723
|
+
<h-column class="cgrid-nest1">
|
|
724
|
+
<p>l6</p>
|
|
725
|
+
<h-row>
|
|
726
|
+
<h-column class="cgrid-nest1-1"><p>l4</p></h-column>
|
|
727
|
+
<h-column class="cgrid-nest1-2"><p>l8</p></h-column>
|
|
728
|
+
</h-row>
|
|
729
|
+
</h-column>
|
|
730
|
+
<h-column class="cgrid-nest2"><p>l4</p></h-column>
|
|
731
|
+
<h-column class="cgrid-nest3"><p>l2</p></h-column>
|
|
732
|
+
</h-row>
|
|
733
|
+
|
|
734
|
+
<h3>Custom Gutter</h3>
|
|
735
|
+
<h-row class="cgrid-gutter-r1">
|
|
736
|
+
<h-column class="cgrid-gutter1">
|
|
737
|
+
<p>l8 50px - s6 20px</p>
|
|
738
|
+
<h-row class="cgrid-gutter-r2">
|
|
739
|
+
<h-column class="large-2 small-6">
|
|
503
740
|
<p>
|
|
504
|
-
|
|
741
|
+
l2 10px - s6 10px
|
|
505
742
|
</p>
|
|
506
|
-
</
|
|
507
|
-
<
|
|
743
|
+
</h-column>
|
|
744
|
+
<h-column class="large-10 small-6">
|
|
508
745
|
<p>
|
|
509
|
-
|
|
746
|
+
l10 10px - s6 10px
|
|
510
747
|
</p>
|
|
511
|
-
</
|
|
512
|
-
</
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
<p>collapsed</p>
|
|
519
|
-
<div class="large-3 push-9 columns"><p>push-9</p></div>
|
|
520
|
-
<div class="large-9 pull-3 columns"><p>pull-3, last-child</p></div>
|
|
521
|
-
</div>
|
|
522
|
-
|
|
523
|
-
<h1>Nested Grid</h1>
|
|
524
|
-
<div class="row">
|
|
525
|
-
<div class="large-12 columns">
|
|
526
|
-
<p>12</p>
|
|
527
|
-
<div class="row">
|
|
528
|
-
<div class="large-8 columns">
|
|
529
|
-
<p>8</p>
|
|
530
|
-
<div class="row">
|
|
531
|
-
<div class="large-6 columns"><p>6</p></div>
|
|
532
|
-
<div class="large-6 columns"><p>6</p></div>
|
|
533
|
-
</div>
|
|
534
|
-
|
|
535
|
-
</div>
|
|
536
|
-
<div class="large-4 columns">
|
|
537
|
-
<p>4</p>
|
|
538
|
-
<div class="row">
|
|
539
|
-
<div class="large-7 columns"><p>7</p></div>
|
|
540
|
-
<div class="large-5 columns"><p>5</p></div>
|
|
541
|
-
</div>
|
|
542
|
-
</div>
|
|
543
|
-
</div>
|
|
544
|
-
</div>
|
|
545
|
-
</div>
|
|
546
|
-
|
|
547
|
-
<h1>Responsive Nested Grid</h1>
|
|
548
|
-
<div class="row">
|
|
549
|
-
<div class="large-12 small-12 columns">
|
|
550
|
-
<p>12-12</p>
|
|
551
|
-
<div class="row">
|
|
552
|
-
<div class="large-8 small-8 columns">
|
|
553
|
-
<p>8-8</p>
|
|
554
|
-
<div class="row">
|
|
555
|
-
<div class="large-6 small-9 columns"><p>6-9</p></div>
|
|
556
|
-
<div class="large-6 small-3 columns"><p>6-3</p></div>
|
|
557
|
-
</div>
|
|
558
|
-
</div>
|
|
559
|
-
<div class="large-4 small-4 columns">
|
|
560
|
-
<p>4-4</p>
|
|
561
|
-
<div class="row">
|
|
562
|
-
<div class="large-7 small-7 columns"><p>7-7</p></div>
|
|
563
|
-
<div class="large-5 small-5 columns"><p>5-5</p></div>
|
|
564
|
-
</div>
|
|
565
|
-
</div>
|
|
566
|
-
</div>
|
|
567
|
-
</div>
|
|
568
|
-
</div>
|
|
569
|
-
|
|
570
|
-
<h1>Responsive offset and Centering</h1>
|
|
571
|
-
<div class="row">
|
|
572
|
-
<div class="large-8 large-offset-2 small-5 small-offset-3 columns">
|
|
573
|
-
<p>large-8 large-offset-2 small-5 off-3</p>
|
|
574
|
-
</div>
|
|
575
|
-
</div>
|
|
576
|
-
<div class="row">
|
|
577
|
-
<div class="large-6 large-centered small-8 columns">
|
|
578
|
-
<p>large-6 large-centered small-8 small-centered</p>
|
|
579
|
-
</div>
|
|
580
|
-
</div>
|
|
581
|
-
|
|
582
|
-
</div>
|
|
583
|
-
</div>
|
|
584
|
-
</div> -->
|
|
585
|
-
|
|
586
|
-
<!-- <section class="row" data-page="visibility">
|
|
587
|
-
<div class="large-12 column">
|
|
588
|
-
<h2>Using the Class</h2>
|
|
589
|
-
<div class="visibility-class">
|
|
590
|
-
<p class="hide-for-large">This is hidden on large</p>
|
|
591
|
-
<p class="hide-for-small">This is hidden on small and mini</p>
|
|
592
|
-
<p class="hide-for-mini">This is hidden on mini</p>
|
|
593
|
-
<p class="show-for-large">This is shown for large</p>
|
|
594
|
-
<p class="show-for-small">This is shown for small and mini</p>
|
|
595
|
-
<p class="show-for-mini">This is shown for mini</p>
|
|
596
|
-
</div>
|
|
748
|
+
</h-column>
|
|
749
|
+
</h-row>
|
|
750
|
+
</h-column>
|
|
751
|
+
<h-column class="cgrid-gutter2">
|
|
752
|
+
<p>l4 50px - s6 20px</p>
|
|
753
|
+
</h-column>
|
|
754
|
+
</h-row>
|
|
597
755
|
|
|
598
|
-
<h2>Span Visibility</h2>
|
|
599
|
-
<div class="visibility-span">
|
|
600
|
-
<p>This is <span class="hide-for-large">hidden on large</span></p>
|
|
601
|
-
<p>This is <span class="hide-for-small">hidden on small and mini</span></p>
|
|
602
|
-
<p>This is <span class="hide-for-mini">hidden on mini</span></p>
|
|
603
|
-
<p>This is <span class="show-for-large">shown for large</span></p>
|
|
604
|
-
<p>This is <span class="show-for-small">shown for small and mini</span></p>
|
|
605
|
-
<p>This is <span class="show-for-mini">shown for mini</span></p>
|
|
606
|
-
</div>
|
|
607
|
-
|
|
608
|
-
<h2>Using the Mixin</h2>
|
|
609
|
-
<div class="visibility-mixin">
|
|
610
|
-
<p class="hfl">This is hidden on large</p>
|
|
611
|
-
<p class="hfs">This is hidden on small and mini</p>
|
|
612
|
-
<p class="hfm">This is hidden on mini</p>
|
|
613
|
-
<p class="sfl">This is shown for large</p>
|
|
614
|
-
<p class="sfs">This is shown for small and mini</p>
|
|
615
|
-
<p class="sfm">This is shown for mini</p>
|
|
616
|
-
</div>
|
|
617
|
-
|
|
618
|
-
<h2>Table Visibility</h2>
|
|
619
|
-
<div class="visibility-table">
|
|
620
|
-
<table border="1" class="hide-for-large">
|
|
621
|
-
<tr>
|
|
622
|
-
<td>hide-for-large</td>
|
|
623
|
-
</tr>
|
|
624
|
-
</table>
|
|
625
|
-
<table border="1" class="hide-for-small">
|
|
626
|
-
<tr>
|
|
627
|
-
<td>hide-for-small</td>
|
|
628
|
-
</tr>
|
|
629
|
-
</table>
|
|
630
|
-
<table border="1" class="hide-for-mini">
|
|
631
|
-
<tr>
|
|
632
|
-
<td>hide-for-mini</td>
|
|
633
|
-
</tr>
|
|
634
|
-
</table>
|
|
635
|
-
<table border="1" class="show-for-large">
|
|
636
|
-
<tr>
|
|
637
|
-
<td>show-for-large</td>
|
|
638
|
-
</tr>
|
|
639
|
-
</table>
|
|
640
|
-
<table border="1" class="show-for-small">
|
|
641
|
-
<tr>
|
|
642
|
-
<td>show-for-small</td>
|
|
643
|
-
</tr>
|
|
644
|
-
</table>
|
|
645
|
-
<table border="1" class="show-for-mini">
|
|
646
|
-
<tr>
|
|
647
|
-
<td>show-for-mini</td>
|
|
648
|
-
</tr>
|
|
649
|
-
</table>
|
|
650
|
-
</div>
|
|
651
|
-
|
|
652
|
-
<h2>Td Visibility</h2>
|
|
653
|
-
<div class="visibility-td">
|
|
654
|
-
<table border="1">
|
|
655
|
-
<tr>
|
|
656
|
-
<td>This is</td>
|
|
657
|
-
<td class="hide-for-large">hide-for-large</td>
|
|
658
|
-
</tr>
|
|
659
|
-
</table>
|
|
660
|
-
<table border="1">
|
|
661
|
-
<tr>
|
|
662
|
-
<td>This is</td>
|
|
663
|
-
<td class="hide-for-small">hide-for-small</td>
|
|
664
|
-
</tr>
|
|
665
|
-
</table>
|
|
666
|
-
<table border="1">
|
|
667
|
-
<tr>
|
|
668
|
-
<td>This is</td>
|
|
669
|
-
<td class="hide-for-mini">hide-for-mini</td>
|
|
670
|
-
</tr>
|
|
671
|
-
</table>
|
|
672
|
-
<table border="1">
|
|
673
|
-
<tr>
|
|
674
|
-
<td>This is</td>
|
|
675
|
-
<td class="show-for-large">show-for-large</td>
|
|
676
|
-
</tr>
|
|
677
|
-
</table>
|
|
678
|
-
<table border="1" >
|
|
679
|
-
<tr>
|
|
680
|
-
<td>This is</td>
|
|
681
|
-
<td class="show-for-small">show-for-small</td>
|
|
682
|
-
</tr>
|
|
683
|
-
</table>
|
|
684
|
-
<table border="1" >
|
|
685
|
-
<tr>
|
|
686
|
-
<td>This is</td>
|
|
687
|
-
<td class="show-for-mini">show-for-mini</td>
|
|
688
|
-
</tr>
|
|
689
|
-
</table>
|
|
690
|
-
</div>
|
|
691
|
-
|
|
692
|
-
</div>
|
|
693
756
|
</section>
|
|
694
|
-
-->
|
|
695
|
-
|
|
696
|
-
<!-- <section class="row" data-page="custom-grid">
|
|
697
|
-
<div class="large-12 column">
|
|
698
|
-
<div class="demo-grid">
|
|
699
|
-
|
|
700
|
-
<h1>Demo Custom Grid</h1>
|
|
701
|
-
<h3>Large (L) only</h3>
|
|
702
|
-
<div class="row">
|
|
703
|
-
<div class="cgrid-1 column">
|
|
704
|
-
<p>l5</p>
|
|
705
|
-
</div>
|
|
706
|
-
<div class="cgrid-2 column">
|
|
707
|
-
<p>l7</p>
|
|
708
|
-
</div>
|
|
709
|
-
</div>
|
|
710
|
-
<h3>L - Small (S)</h3>
|
|
711
|
-
<div class="row">
|
|
712
|
-
<div class="cgrid-a1 column">
|
|
713
|
-
<p>l5 s10</p>
|
|
714
|
-
</div>
|
|
715
|
-
<div class="cgrid-a2 column">
|
|
716
|
-
<p>l7 s2</p>
|
|
717
|
-
</div>
|
|
718
|
-
</div>
|
|
719
|
-
|
|
720
|
-
<h3>Centering and Small uncentering</h3>
|
|
721
|
-
<div class="row">
|
|
722
|
-
<div class="cgrid-center column">
|
|
723
|
-
<p>l-center s-uncenter</p>
|
|
724
|
-
</div>
|
|
725
|
-
</div>
|
|
726
|
-
|
|
727
|
-
<h3>L-S-Mini (M) Collapse</h3>
|
|
728
|
-
<div class="row collapse">
|
|
729
|
-
<div class="cgrid-b1 column">
|
|
730
|
-
<p>l10 s8 m6</p>
|
|
731
|
-
</div>
|
|
732
|
-
<div class="cgrid-b2 column">
|
|
733
|
-
<p>l2 s4 m6</p>
|
|
734
|
-
</div>
|
|
735
|
-
</div>
|
|
736
|
-
|
|
737
|
-
<h3>L Offset (O) - S</h3>
|
|
738
|
-
<div class="row">
|
|
739
|
-
<div class="cgrid-c1 column">
|
|
740
|
-
<p>l6 lo4 s6</p>
|
|
741
|
-
</div>
|
|
742
|
-
<div class="cgrid-c2 column">
|
|
743
|
-
<p>l2 s6</p>
|
|
744
|
-
</div>
|
|
745
|
-
</div>
|
|
746
|
-
|
|
747
|
-
<h3>LO-SO</h3>
|
|
748
|
-
<div class="row">
|
|
749
|
-
<div class="cgrid-d1 column">
|
|
750
|
-
<p>l3 lo3 s4 so4</p>
|
|
751
|
-
</div>
|
|
752
|
-
<div class="cgrid-d2 column">
|
|
753
|
-
<p>l3 s4</p>
|
|
754
|
-
</div>
|
|
755
|
-
</div>
|
|
756
|
-
|
|
757
|
-
<h3>LO-SO-M</h3>
|
|
758
|
-
<div class="row">
|
|
759
|
-
<div class="cgrid-e1 column">
|
|
760
|
-
<p>l3 lo3 s4 so4 m6</p>
|
|
761
|
-
</div>
|
|
762
|
-
<div class="cgrid-e2 column">
|
|
763
|
-
<p>l3 s4 m6</p>
|
|
764
|
-
</div>
|
|
765
|
-
</div>
|
|
766
|
-
|
|
767
|
-
<h3>LO-SO-MO</h3>
|
|
768
|
-
<div class="row">
|
|
769
|
-
<div class="cgrid-f1 column">
|
|
770
|
-
<p>l3 lo3 s4 so4 m5 mo1</p>
|
|
771
|
-
</div>
|
|
772
|
-
<div class="cgrid-f2 column">
|
|
773
|
-
<p>l3 s4 m6</p>
|
|
774
|
-
</div>
|
|
775
|
-
</div>
|
|
776
|
-
|
|
777
|
-
<h3>L Source Ordering</h3>
|
|
778
|
-
<div class="row">
|
|
779
|
-
<div class="cgrid-g1 column">
|
|
780
|
-
<p>First col, pushed 8</p>
|
|
781
|
-
</div>
|
|
782
|
-
<div class="cgrid-g2 column">
|
|
783
|
-
<p>Second col, pulled 4</p>
|
|
784
|
-
</div>
|
|
785
|
-
</div>
|
|
786
|
-
|
|
787
|
-
<h3>Nesting</h3>
|
|
788
|
-
<div class="row">
|
|
789
|
-
<div class="cgrid-h1 column">
|
|
790
|
-
<p>l8 s8</p>
|
|
791
|
-
<div class="row">
|
|
792
|
-
<div class="cgrid-h1-1 column">
|
|
793
|
-
<p>l5 s5</p>
|
|
794
|
-
</div>
|
|
795
|
-
<div class="cgrid-h1-2 column">
|
|
796
|
-
<p>l7 s7</p>
|
|
797
|
-
</div>
|
|
798
|
-
</div>
|
|
799
|
-
</div>
|
|
800
|
-
<div class="cgrid-h2 column">
|
|
801
|
-
<p>l8 s4</p>
|
|
802
|
-
<div class="row">
|
|
803
|
-
<div class="cgrid-h2-1 column">
|
|
804
|
-
<p>l6 s6 center</p>
|
|
805
|
-
</div>
|
|
806
|
-
</div>
|
|
807
|
-
</div>
|
|
808
|
-
</div>
|
|
809
|
-
|
|
810
|
-
<h3>Custom Gutter</h3>
|
|
811
|
-
<div class="cgrid-i0 row">
|
|
812
|
-
<div class="cgrid-i1 column">
|
|
813
|
-
<p>l6 50px</p>
|
|
814
|
-
</div>
|
|
815
|
-
<div class="cgrid-i2 column">
|
|
816
|
-
<p>l6 50px</p>
|
|
817
|
-
</div>
|
|
818
|
-
</div>
|
|
819
|
-
|
|
820
|
-
</div>
|
|
821
|
-
</div>
|
|
822
|
-
</section> -->
|
|
823
757
|
|
|
824
758
|
<!-- <section class="row" data-page="design-grid">
|
|
825
759
|
<div class="large-12 column demo-grid">
|
|
@@ -835,92 +769,67 @@
|
|
|
835
769
|
</div>
|
|
836
770
|
</div>
|
|
837
771
|
</section> -->
|
|
838
|
-
|
|
839
|
-
<!-- <section class="row" data-page="button">
|
|
840
|
-
<div class="large-4 column">
|
|
841
|
-
<h1>Button</h1>
|
|
842
|
-
<a href="" class="button">Hello World</a>
|
|
843
|
-
<br>
|
|
844
|
-
<a href="" class="button red-button">Hello World</a>
|
|
845
|
-
<br>
|
|
846
|
-
<a href="" class="button yellow-button">Hello World</a>
|
|
847
|
-
<br>
|
|
848
|
-
<a href="" class="button blue-button">Hello World</a>
|
|
849
|
-
<br>
|
|
850
|
-
<a href="" class="button green-button">Hello World</a>
|
|
851
|
-
<br>
|
|
852
|
-
</div>
|
|
853
|
-
<div class="large-4 column">
|
|
854
|
-
<a href="" class="button white-button">Hello World</a>
|
|
855
|
-
<br>
|
|
856
|
-
<a href="" class="button grey-button">Hello World</a>
|
|
857
|
-
<br>
|
|
858
|
-
<a href="" class="button darkgrey-button">Hello World</a>
|
|
859
|
-
<br>
|
|
860
|
-
<a href="" class="button black-button">Hello World</a>
|
|
861
|
-
</div>
|
|
862
|
-
</section> -->
|
|
863
772
|
|
|
864
773
|
<!-- <div class="row" data-page="form">
|
|
865
|
-
<div class="large-6
|
|
774
|
+
<div class="large-6 column">
|
|
866
775
|
<h1>Form Grid</h1>
|
|
867
776
|
<div class="form-row">
|
|
868
|
-
<label for="" class="large-4 small-12 form-
|
|
869
|
-
<input type="text" class="large-8 small-12 form-
|
|
777
|
+
<label for="" class="large-4 small-12 form-column">Label</label>
|
|
778
|
+
<input type="text" class="large-8 small-12 form-column" placeholder="Normal input text">
|
|
870
779
|
</div>
|
|
871
780
|
|
|
872
781
|
<pre class="brush:xhtml;">
|
|
873
782
|
<div class="form-row">
|
|
874
|
-
<label class="large-4 small-12 form-
|
|
875
|
-
<input type="text" class="large-8 small-12 form-
|
|
783
|
+
<label class="large-4 small-12 form-column"></label>
|
|
784
|
+
<input type="text" class="large-8 small-12 form-column">
|
|
876
785
|
</div>
|
|
877
786
|
</pre>
|
|
878
787
|
|
|
879
788
|
<h1>Form Grid with Offset and Centered</h1>
|
|
880
789
|
<div class="form-row">
|
|
881
|
-
<input type="text" class="large-8 large-offset-4 form-
|
|
790
|
+
<input type="text" class="large-8 large-offset-4 form-column" placeholder="Input with offset">
|
|
882
791
|
</div>
|
|
883
792
|
<div class="form-row">
|
|
884
|
-
<input type="text" class="large-8 large-centered form-
|
|
793
|
+
<input type="text" class="large-8 large-centered form-column" placeholder="Centered Input">
|
|
885
794
|
</div>
|
|
886
795
|
|
|
887
796
|
<pre class="brush:xhtml;">
|
|
888
797
|
<div class="form-row">
|
|
889
|
-
<input type="text" class="large-8 large-offset-4 form-
|
|
798
|
+
<input type="text" class="large-8 large-offset-4 form-column" placeholder="Input with offset">
|
|
890
799
|
</div>
|
|
891
800
|
<div class="form-row">
|
|
892
|
-
<input type="text" class="large-8 large-centered form-
|
|
801
|
+
<input type="text" class="large-8 large-centered form-column" placeholder="Centered Input">
|
|
893
802
|
</div>
|
|
894
803
|
</pre>
|
|
895
804
|
|
|
896
805
|
<h1>Prefix and Postfix</h1>
|
|
897
806
|
|
|
898
807
|
<div class="form-row">
|
|
899
|
-
<label for="" class="prefix large-4 small-6 form-
|
|
900
|
-
<input type="text" class="large-8 small-6 form-
|
|
808
|
+
<label for="" class="prefix large-4 small-6 form-column">Prefix Label</label>
|
|
809
|
+
<input type="text" class="large-8 small-6 form-column" placeholder="Normal Input text">
|
|
901
810
|
<div class="form-row">
|
|
902
|
-
<input type="text" class="large-8 form-
|
|
903
|
-
<label for="" class="postfix large-4 form-
|
|
811
|
+
<input type="text" class="large-8 form-column" placeholder="Your Blog name">
|
|
812
|
+
<label for="" class="postfix large-4 form-column">.blogspot.com</label>
|
|
904
813
|
</div>
|
|
905
814
|
|
|
906
815
|
<pre class="brush:xhtml;">
|
|
907
816
|
<div class="form-row">
|
|
908
|
-
<label class="prefix large-4 small-6 form-
|
|
909
|
-
<input type="text" class="large-8 small-6 form-
|
|
817
|
+
<label class="prefix large-4 small-6 form-column"></label>
|
|
818
|
+
<input type="text" class="large-8 small-6 form-column">
|
|
910
819
|
<div class="form-row">
|
|
911
|
-
<input type="text" class="large-8 form-
|
|
912
|
-
<label class="postfix large-4 form-
|
|
820
|
+
<input type="text" class="large-8 form-column">
|
|
821
|
+
<label class="postfix large-4 form-column"></label>
|
|
913
822
|
</div>
|
|
914
823
|
</pre>
|
|
915
824
|
|
|
916
825
|
<h1>Textarea and Select</h1>
|
|
917
826
|
<div class="form-row">
|
|
918
|
-
<label for="" class="large-4 form-
|
|
919
|
-
<textarea placeholder="Normal Input text" class="large-8 form-
|
|
827
|
+
<label for="" class="large-4 form-column">Label</label>
|
|
828
|
+
<textarea placeholder="Normal Input text" class="large-8 form-column" rows="5"></textarea>
|
|
920
829
|
</div>
|
|
921
830
|
<div class="form-row">
|
|
922
|
-
<label for="" class="large-4 form-
|
|
923
|
-
<select name="" id="" class="large-8 form-
|
|
831
|
+
<label for="" class="large-4 form-column">Select Dropdown</label>
|
|
832
|
+
<select name="" id="" class="large-8 form-column">
|
|
924
833
|
<option value="">Asia</option>
|
|
925
834
|
<option value="">America</option>
|
|
926
835
|
<option value="">Europe</option>
|
|
@@ -932,12 +841,12 @@
|
|
|
932
841
|
|
|
933
842
|
<pre>
|
|
934
843
|
<div class="form-row">
|
|
935
|
-
<label class="large-4 form-
|
|
936
|
-
<textarea class="large-8 form-
|
|
844
|
+
<label class="large-4 form-column">Label</label>
|
|
845
|
+
<textarea class="large-8 form-column"></textarea>
|
|
937
846
|
</div>
|
|
938
847
|
<div class="form-row">
|
|
939
|
-
<label class="large-4 form-
|
|
940
|
-
<select class="large-8 form-
|
|
848
|
+
<label class="large-4 form-column">Select Dropdown</label>
|
|
849
|
+
<select class="large-8 form-column">
|
|
941
850
|
<option>...</option>
|
|
942
851
|
</select>
|
|
943
852
|
</div>
|