1<!doctype html> 2<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 3<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> 4<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> 5<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> 6<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]--> 7<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline --> 8<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]--> 9<head> 10 <meta charset="utf-8"> 11 12 <!-- Use the .htaccess and remove these lines to avoid edge case issues. 13 More info: h5bp.com/b/378 --> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 15 16 <title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title> 17 <meta name="description" content="" /> 18 <meta name="keywords" content="" /> 19 <meta name="author" content="humans.txt"> 20 21 <link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> 22 23 <!-- Facebook Metadata /--> 24 <meta property="fb:page_id" content="" /> 25 <meta property="og:image" content="" /> 26 <meta property="og:description" content=""/> 27 <meta property="og:title" content=""/> 28 29 <!-- Google+ Metadata /--> 30 <meta itemprop="name" content=""> 31 <meta itemprop="description" content=""> 32 <meta itemprop="image" content=""> 33 34 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> 35 36 <!-- We highly recommend you use SASS and write your custom styles in sass/_custom.scss. 37 However, there is a blank style.css in the css directory should you prefer --> 38 <link rel="stylesheet" href="css/gumby.css"> 39 <!-- <link rel="stylesheet" href="css/style.css"> --> 40 41 <script src="js/libs/modernizr-2.6.2.min.js"></script> 42</head> 43 44<style> 45 html, body { 46 background: #fefefe; 47 } 48 49 .column, .columns, .tiles > li { 50 background: #ddd; 51 border: 1px solid #d0d0d0; 52 -webkit-transition-duration: .3s; 53 -moz-transition-duration: .3s; 54 -o-transition-duration: .3s; 55 -ms-transition-duration: .3s; 56 transition-duration: .3s; 57 } 58 59 .column:hover, .columns:hover { 60 background: #efefef; 61 cursor: pointer; 62 -webkit-transition-duration: .3s; 63 -moz-transition-duration: .3s; 64 -o-transition-duration: .3s; 65 -ms-transition-duration: .3s; 66 transition-duration: .3s; 67 } 68 69 .row { 70 margin-bottom: 25px; 71 text-align: center; 72 } 73 74 h1, h2 { 75 font: bold italic 220px georgia, times new roman, serif; 76 color: #555; 77 letter-spacing: -.09em; 78 -webkit-transition-duration: 1s; 79 } 80 81 h2 { 82 font-size: 21px; 83 font-weight: normal; 84 line-height: 1.6; 85 } 86 87 p { 88 font-size: 16px; 89 line-height: 60px; 90 margin-bottom: 0; 91 color: #555; 92 93 -webkit-transition-duration: .2s; 94 -moz-transition-duration: .2s; 95 -o-transition-duration: .2s; 96 -ms-transition-duration: .2s; 97 transition-duration: .2s; 98 } 99 100 .column:hover p, .columns:hover p { 101 font-size: 25px; 102 font-weight: bold; 103 104 -webkit-transition-duration: .2s; 105 -moz-transition-duration: .2s; 106 -o-transition-duration: .2s; 107 -ms-transition-duration: .2s; 108 transition-duration: .2s; 109 } 110 111 .head, .head:hover { 112 box-shadow: none; 113 margin-top: 30px; 114 } 115 116 .head span { 117 font-weight: bold; 118 color: #353535; 119 } 120 121 .head span span { 122 font-size: 32px; 123 font-weight: bold !important; 124 } 125 126 a { 127 color: #d04526; 128 } 129 130 a:hover { 131 text-decoration:underline; 132 } 133 134 .special, .special:hover { 135 background: transparent; 136 border: none; 137 } 138 139 .special:hover p { 140 color: #ffe400; 141 } 142 143 @media only screen and (max-width: 767px) { 144 145 h1 { 146 font: bold italic 100px georgia, times new roman, serif; 147 -webkit-transition-duration: .5s; 148 } 149 150 } 151 152 153</style> 154 155<body> 156 157 <div class="row"> 158 <div class="twelve columns special head"> 159 <h1>Gumby</h1> 160 <h2>A <span>responsive <span>960</span> grid</span> 161 from <a href="#">Digital Surgeons</a></h2> 162 </div> 163 </div> 164 165 <div class="row"> 166 <div class="twelve columns"> 167 <p>940px</p> 168 </div> 169 </div> 170 171 <div class="row"> 172 <div class="one columns"> 173 <p>60px</p> 174 </div> 175 <div class="eleven columns"> 176 <p>860px</p> 177 </div> 178 </div> 179 180 <div class="row"> 181 <div class="one columns"> 182 <p>60px</p> 183 </div> 184 <div class="one columns"> 185 <p>60px</p> 186 </div> 187 <div class="one columns"> 188 <p>60px</p> 189 </div> 190 <div class="one columns"> 191 <p>60px</p> 192 </div> 193 <div class="one columns"> 194 <p>60px</p> 195 </div> 196 <div class="one columns"> 197 <p>60px</p> 198 </div> 199 <div class="one columns"> 200 <p>60px</p> 201 </div> 202 <div class="one columns"> 203 <p>60px</p> 204 </div> 205 <div class="one columns"> 206 <p>60px</p> 207 </div> 208 <div class="one columns"> 209 <p>60px</p> 210 </div> 211 <div class="one columns"> 212 <p>60px</p> 213 </div> 214 <div class="one columns"> 215 <p>60px</p> 216 </div> 217 </div> 218 219 <div class="row"> 220 <div class="two columns"> 221 <p>140px</p> 222 </div> 223 <div class="ten columns"> 224 <p>780px</p> 225 </div> 226 </div> 227 228 <div class="row"> 229 <div class="two columns"> 230 <p>140px</p> 231 </div> 232 <div class="two columns"> 233 <p>140px</p> 234 </div> 235 <div class="two columns"> 236 <p>140px</p> 237 </div> 238 <div class="two columns"> 239 <p>140px</p> 240 </div> 241 <div class="two columns"> 242 <p>140px</p> 243 </div> 244 <div class="two columns"> 245 <p>140px</p> 246 </div> 247 </div> 248 249 <div class="row"> 250 <div class="three columns"> 251 <p>220px</p> 252 </div> 253 <div class="nine columns"> 254 <p>700px</p> 255 </div> 256 </div> 257 258 <div class="row"> 259 <div class="three columns"> 260 <p>220px</p> 261 </div> 262 <div class="three columns"> 263 <p>220px</p> 264 </div> 265 <div class="three columns"> 266 <p>220px</p> 267 </div> 268 <div class="three columns"> 269 <p>220px</p> 270 </div> 271 </div> 272 273 <div class="row"> 274 <div class="four columns"> 275 <p>300px</p> 276 </div> 277 <div class="eight columns"> 278 <p>620px</p> 279 </div> 280 </div> 281 282 <div class="row"> 283 <div class="four columns"> 284 <p>300px</p> 285 </div> 286 <div class="four columns"> 287 <p>300px</p> 288 </div> 289 <div class="four columns"> 290 <p>300px</p> 291 </div> 292 </div> 293 294 <div class="row"> 295 <div class="five columns"> 296 <p>380px</p> 297 </div> 298 <div class="seven columns"> 299 <p>540px</p> 300 </div> 301 </div> 302 303 <div class="row"> 304 <div class="six columns"> 305 <p>460px</p> 306 </div> 307 <div class="six columns"> 308 <p>460px</p> 309 </div> 310 </div> 311 312 <!-- Offset Tests --> 313 <div class="row"> 314 <div class="twelve columns special"> 315 <p>Columns pushed right by 'x'</p> 316 </div> 317 </div> 318 <div class="row"> 319 <div class="eleven columns push_one"> 320 <p>11 Columns Push 1</p> 321 </div> 322 </div> 323 <div class="row"> 324 <div class="one columns"> 325 <p>60px</p> 326 </div> 327 <div class="ten columns push_one"> 328 <p>10 Columns Push 1</p> 329 </div> 330 </div> 331 <div class="row"> 332 <div class="ten columns push_two"> 333 <p>10 Columns Push 2</p> 334 </div> 335 </div> 336 <div class="row"> 337 <div class="one columns"> 338 <p>60px</p> 339 </div> 340 <div class="nine columns push_two"> 341 <p>9 Columns Push 2</p> 342 </div> 343 </div> 344 <div class="row"> 345 <div class="nine columns push_three"> 346 <p>9 Columns Push 3</p> 347 </div> 348 </div> 349 <div class="row"> 350 <div class="one columns"> 351 <p>60px</p> 352 </div> 353 <div class="eight columns push_three"> 354 <p>8 Columns Push 3</p> 355 </div> 356 </div> 357 <div class="row"> 358 <div class="eight columns push_four"> 359 <p>8 Columns Push 4</p> 360 </div> 361 </div> 362 <div class="row"> 363 <div class="one columns"> 364 <p>60px</p> 365 </div> 366 <div class="seven columns push_four"> 367 <p>7 Columns Push 4</p> 368 </div> 369 </div> 370 <div class="row"> 371 <div class="seven columns push_five"> 372 <p>7 Columns Push 5</p> 373 </div> 374 </div> 375 <div class="row"> 376 <div class="one columns"> 377 <p>60px</p> 378 </div> 379 <div class="six columns push_five"> 380 <p>6 Columns Push 5</p> 381 </div> 382 </div> 383 <div class="row"> 384 <div class="six columns push_six"> 385 <p>6 Columns Push 6</p> 386 </div> 387 </div> 388 <div class="row"> 389 <div class="one columns"> 390 <p>60px</p> 391 </div> 392 <div class="five columns push_six"> 393 <p>5 Columns Push 6</p> 394 </div> 395 </div> 396 <div class="row"> 397 <div class="five columns push_seven"> 398 <p>5 Columns Push 7</p> 399 </div> 400 </div> 401 <div class="row"> 402 <div class="one columns"> 403 <p>60px</p> 404 </div> 405 <div class="four columns push_seven"> 406 <p>4 Columns Push 7</p> 407 </div> 408 </div> 409 410 <div class="row"> 411 <div class="four columns push_eight"> 412 <p>4 Columns Push 8</p> 413 </div> 414 </div> 415 <div class="row"> 416 <div class="one columns"> 417 <p>60px</p> 418 </div> 419 <div class="three columns push_eight"> 420 <p>3 Col Push 8</p> 421 </div> 422 </div> 423 424 <div class="row"> 425 <div class="three columns push_nine"> 426 <p>3 Col Push 9</p> 427 </div> 428 </div> 429 <div class="row"> 430 <div class="one columns"> 431 <p>60px</p> 432 </div> 433 <div class="two columns push_nine"> 434 <p>2 - Push 9</p> 435 </div> 436 </div> 437 438 439 <div class="row"> 440 <div class="two columns push_ten"> 441 <p>2 - Push 10</p> 442 </div> 443 </div> 444 <div class="row"> 445 <div class="one columns"> 446 <p>60px</p> 447 </div> 448 <div class="one columns push_ten"> 449 <p>60px</p> 450 </div> 451 </div> 452 453 454 <div class="row"> 455 <div class="one columns push_eleven"> 456 <p>60px</p> 457 </div> 458 </div> 459 460 <!-- Offset Tests --> 461 <div class="row"> 462 <div class="twelve columns special"> 463 <p>Columns pushed and pulled by 'x'</p> 464 </div> 465 </div> 466 <div class="row"> 467 <div class="one column push_eleven"> 468 <p>1</p> 469 </div> 470 <div class="eleven columns pull_one"> 471 <p>11 Columns Pull 1</p> 472 </div> 473 </div> 474 <div class="row"> 475 <div class="two columns push_ten"> 476 <p>2 Columns</p> 477 </div> 478 <div class="ten columns pull_two"> 479 <p>10 Columns Pull 2</p> 480 </div> 481 </div> 482 <div class="row"> 483 <div class="three columns push_nine"> 484 <p>3 Columns Push 9</p> 485 </div> 486 <div class="nine columns pull_three"> 487 <p>9 Columns Pull 3</p> 488 </div> 489 </div> 490 <div class="row"> 491 <div class="four columns push_eight"> 492 <p>4 Columns Push 8</p> 493 </div> 494 <div class="eight columns pull_four"> 495 <p>8 Columns Pull 4</p> 496 </div> 497 </div> 498 <div class="row"> 499 <div class="five columns push_seven"> 500 <p>5 Columns Push 7</p> 501 </div> 502 <div class="seven columns pull_five"> 503 <p>7 Columns Pull 5</p> 504 </div> 505 </div> 506 <div class="row"> 507 <div class="six columns push_six"> 508 <p>6 Columns Push 6</p> 509 </div> 510 <div class="six columns pull_six"> 511 <p>6 Columns Pull 6</p> 512 </div> 513 </div> 514 515 516 <!-- Centering tests --> 517 <div class="row"> 518 <div class="twelve columns special"> 519 <p>Centered Columns</p> 520 </div> 521 </div> 522 523 <div class="row"> 524 <div class="eleven columns centered"> 525 <p>11 Columns</p> 526 </div> 527 </div> 528 529 <div class="row"> 530 <div class="ten columns centered"> 531 <p>10 Columns</p> 532 </div> 533 </div> 534 535 <div class="row"> 536 <div class="nine columns centered"> 537 <p>9 Columns</p> 538 </div> 539 </div> 540 541 <div class="row"> 542 <div class="eight columns centered"> 543 <p>8 Columns</p> 544 </div> 545 </div> 546 547 <div class="row"> 548 <div class="seven columns centered"> 549 <p>7 Columns</p> 550 </div> 551 </div> 552 553 <div class="row"> 554 <div class="six columns centered"> 555 <p>6 Columns</p> 556 </div> 557 </div> 558 559 <div class="row"> 560 <div class="five columns centered"> 561 <p>5 Columns</p> 562 </div> 563 </div> 564 565 <div class="row"> 566 <div class="four columns centered"> 567 <p>4 Columns</p> 568 </div> 569 </div> 570 571 <div class="row"> 572 <div class="three columns centered"> 573 <p>3 Columns</p> 574 </div> 575 </div> 576 577 <div class="row"> 578 <div class="two columns centered"> 579 <p>2 Columns</p> 580 </div> 581 </div> 582 583 <div class="row"> 584 <div class="one columns centered"> 585 <p>1 Col</p> 586 </div> 587 </div> 588 589 <!-- Sixteen Column Grid --> 590 <section class="sixteen colgrid"> 591 592 <div class="row"> 593 <div class="sixteen columns special"> 594 <p>Responsive 16 Column Grid</p> 595 </div> 596 </div> 597 598 <div class="row"> 599 <div class="sixteen columns"> 600 <p>940px</p> 601 </div> 602 </div> 603 604 <div class="row"> 605 <div class="one columns"> 606 <p>40</p> 607 </div> 608 <div class="fifteen columns"> 609 <p>880px</p> 610 </div> 611 </div> 612 613 <div class="row"> 614 <div class="one columns"> 615 <p>40</p> 616 </div> 617 <div class="one columns"> 618 <p>40</p> 619 </div> 620 <div class="one columns"> 621 <p>40</p> 622 </div> 623 <div class="one columns"> 624 <p>40</p> 625 </div> 626 <div class="one columns"> 627 <p>40</p> 628 </div> 629 <div class="one columns"> 630 <p>40</p> 631 </div> 632 <div class="one columns"> 633 <p>40</p> 634 </div> 635 <div class="one columns"> 636 <p>40</p> 637 </div> 638 <div class="one columns"> 639 <p>40</p> 640 </div> 641 <div class="one columns"> 642 <p>40</p> 643 </div> 644 <div class="one columns"> 645 <p>40</p> 646 </div> 647 <div class="one columns"> 648 <p>40</p> 649 </div> 650 <div class="one columns"> 651 <p>40</p> 652 </div> 653 <div class="one columns"> 654 <p>40</p> 655 </div> 656 <div class="one columns"> 657 <p>40</p> 658 </div> 659 <div class="one columns"> 660 <p>40</p> 661 </div> 662 </div> 663 664 <div class="row"> 665 <div class="two columns"> 666 <p>100px</p> 667 </div> 668 <div class="fourteen columns"> 669 <p>820px</p> 670 </div> 671 </div> 672 673 <div class="row"> 674 <div class="two columns"> 675 <p>100px</p> 676 </div> 677 <div class="two columns"> 678 <p>100px</p> 679 </div> 680 <div class="two columns"> 681 <p>100px</p> 682 </div> 683 <div class="two columns"> 684 <p>100px</p> 685 </div> 686 <div class="two columns"> 687 <p>100px</p> 688 </div> 689 <div class="two columns"> 690 <p>100px</p> 691 </div> 692 <div class="two columns"> 693 <p>100px</p> 694 </div> 695 <div class="two columns"> 696 <p>100px</p> 697 </div> 698 </div> 699 700 <div class="row"> 701 <div class="three columns"> 702 <p>160px</p> 703 </div> 704 <div class="thirteen columns"> 705 <p>760px</p> 706 </div> 707 </div> 708 709 <div class="row"> 710 <div class="three columns"> 711 <p>160px</p> 712 </div> 713 <div class="three columns"> 714 <p>160px</p> 715 </div> 716 <div class="four columns"> 717 <p>220px</p> 718 </div> 719 <div class="three columns"> 720 <p>160px</p> 721 </div> 722 <div class="three columns"> 723 <p>160px</p> 724 </div> 725 </div> 726 727 <div class="row"> 728 <div class="four columns"> 729 <p>220px</p> 730 </div> 731 <div class="twelve columns"> 732 <p>700px</p> 733 </div> 734 </div> 735 736 <div class="row"> 737 <div class="four columns"> 738 <p>220px</p> 739 </div> 740 <div class="four columns"> 741 <p>220px</p> 742 </div> 743 <div class="four columns"> 744 <p>220px</p> 745 </div> 746 <div class="four columns"> 747 <p>220px</p> 748 </div> 749 </div> 750 751 <div class="row"> 752 <div class="five columns"> 753 <p>280px</p> 754 </div> 755 <div class="eleven columns"> 756 <p>640px</p> 757 </div> 758 </div> 759 760 <div class="row"> 761 <div class="five columns"> 762 <p>280px</p> 763 </div> 764 <div class="six columns"> 765 <p>340px</p> 766 </div> 767 <div class="five columns"> 768 <p>280px</p> 769 </div> 770 </div> 771 772 <div class="row"> 773 <div class="six columns"> 774 <p>340px</p> 775 </div> 776 <div class="ten columns"> 777 <p>580px</p> 778 </div> 779 </div> 780 781 <div class="row"> 782 <div class="six columns"> 783 <p>340px</p> 784 </div> 785 <div class="four columns"> 786 <p>220px</p> 787 </div> 788 <div class="six columns"> 789 <p>340px</p> 790 </div> 791 </div> 792 793 <div class="row"> 794 <div class="seven columns"> 795 <p>400px</p> 796 </div> 797 <div class="nine columns"> 798 <p>520px</p> 799 </div> 800 </div> 801 802 <div class="row"> 803 <div class="seven columns"> 804 <p>400px</p> 805 </div> 806 <div class="two columns"> 807 <p>100px</p> 808 </div> 809 <div class="seven columns"> 810 <p>400px</p> 811 </div> 812 </div> 813 814 <div class="row"> 815 <div class="eight columns"> 816 <p>460px</p> 817 </div> 818 <div class="eight columns"> 819 <p>460px</p> 820 </div> 821 </div> 822 823 <!-- Offset Tests --> 824 <div class="row"> 825 <div class="sixteen columns special"> 826 <p>Columns pushed right by 'x'</p> 827 </div> 828 </div> 829 <div class="row"> 830 <div class="fifteen columns push_one"> 831 <p>15 Columns Push 1</p> 832 </div> 833 </div> 834 <div class="row"> 835 <div class="one columns"> 836 <p>40px</p> 837 </div> 838 <div class="fourteen columns push_one"> 839 <p>14 Columns Push 1</p> 840 </div> 841 </div> 842 <div class="row"> 843 <div class="fourteen columns push_two"> 844 <p>14 Columns Push 2</p> 845 </div> 846 </div> 847 <div class="row"> 848 <div class="one columns"> 849 <p>40px</p> 850 </div> 851 <div class="thirteen columns push_two"> 852 <p>13 Columns Push 2</p> 853 </div> 854 </div> 855 <div class="row"> 856 <div class="thirteen columns push_three"> 857 <p>13 Columns Push 3</p> 858 </div> 859 </div> 860 <div class="row"> 861 <div class="one columns"> 862 <p>40px</p> 863 </div> 864 <div class="twelve columns push_three"> 865 <p>12 Columns Push 3</p> 866 </div> 867 </div> 868 <div class="row"> 869 <div class="twelve columns push_four"> 870 <p>12 Columns Push 4</p> 871 </div> 872 </div> 873 <div class="row"> 874 <div class="one columns"> 875 <p>40px</p> 876 </div> 877 <div class="eleven columns push_four"> 878 <p>11 Columns Push 4</p> 879 </div> 880 </div> 881 <div class="row"> 882 <div class="eleven columns push_five"> 883 <p>11 Columns Push 5</p> 884 </div> 885 </div> 886 <div class="row"> 887 <div class="one columns"> 888 <p>40px</p> 889 </div> 890 <div class="ten columns push_five"> 891 <p>10 Columns Push 5</p> 892 </div> 893 </div> 894 <div class="row"> 895 <div class="ten columns push_six"> 896 <p>10 Columns Push 6</p> 897 </div> 898 </div> 899 <div class="row"> 900 <div class="one columns"> 901 <p>40px</p> 902 </div> 903 <div class="nine columns push_six"> 904 <p>9 Columns Push 6</p> 905 </div> 906 </div> 907 <div class="row"> 908 <div class="nine columns push_seven"> 909 <p>9 Columns Push 7</p> 910 </div> 911 </div> 912 <div class="row"> 913 <div class="one columns"> 914 <p>40px</p> 915 </div> 916 <div class="eight columns push_seven"> 917 <p>8 Columns Push 7</p> 918 </div> 919 </div> 920 <div class="row"> 921 <div class="eight columns push_eight"> 922 <p>8 Columns Push 8</p> 923 </div> 924 </div> 925 <div class="row"> 926 <div class="one columns"> 927 <p>40px</p> 928 </div> 929 <div class="seven columns push_eight"> 930 <p>7 Columns Push 8</p> 931 </div> 932 </div> 933 <div class="row"> 934 <div class="seven columns push_nine"> 935 <p>7 Columns Push 9</p> 936 </div> 937 </div> 938 <div class="row"> 939 <div class="one columns"> 940 <p>40px</p> 941 </div> 942 <div class="six columns push_nine"> 943 <p>6 Columns Push 9</p> 944 </div> 945 </div> 946 <div class="row"> 947 <div class="six columns push_ten"> 948 <p>6 Columns Push 10</p> 949 </div> 950 </div> 951 <div class="row"> 952 <div class="one columns"> 953 <p>40px</p> 954 </div> 955 <div class="five columns push_ten"> 956 <p>5 Columns Push 10</p> 957 </div> 958 </div> 959 <div class="row"> 960 <div class="five columns push_eleven"> 961 <p>5 Columns Push 11</p> 962 </div> 963 </div> 964 <div class="row"> 965 <div class="one columns"> 966 <p>40px</p> 967 </div> 968 <div class="four columns push_eleven"> 969 <p>4 Columns Push 11</p> 970 </div> 971 </div> 972 973 <div class="row"> 974 <div class="four columns push_twelve"> 975 <p>4 Columns Push 12</p> 976 </div> 977 </div> 978 <div class="row"> 979 <div class="one columns"> 980 <p>40px</p> 981 </div> 982 <div class="three columns push_twelve"> 983 <p>3 Col Push 12</p> 984 </div> 985 </div> 986 987 <div class="row"> 988 <div class="three columns push_thirteen"> 989 <p>3 Col Push 13</p> 990 </div> 991 </div> 992 <div class="row"> 993 <div class="one columns"> 994 <p>40px</p> 995 </div> 996 <div class="two columns push_thirteen"> 997 <p>2 - Push 13</p> 998 </div> 999 </div> 1000 <div class="row"> 1001 <div class="two columns push_fourteen"> 1002 <p>2 - Push 14</p> 1003 </div> 1004 </div> 1005 <div class="row"> 1006 <div class="one columns"> 1007 <p>40px</p> 1008 </div> 1009 <div class="one columns push_fourteen"> 1010 <p>40px</p> 1011 </div> 1012 </div> 1013 <div class="row"> 1014 <div class="one columns push_fifteen"> 1015 <p>40px</p> 1016 </div> 1017 </div> 1018 1019 <!-- Offset Tests --> 1020 <div class="row"> 1021 <div class="sixteen columns special"> 1022 <p>Columns pushed and pulled by 'x'</p> 1023 </div> 1024 </div> 1025 <div class="row"> 1026 <div class="one column push_fifteen"> 1027 <p>1</p> 1028 </div> 1029 <div class="fifteen columns pull_one"> 1030 <p>15 Columns Pull 1</p> 1031 </div> 1032 </div> 1033 <div class="row"> 1034 <div class="two columns push_fourteen"> 1035 <p>2 Col</p> 1036 </div> 1037 <div class="fourteen columns pull_two"> 1038 <p>14 Columns Pull 2</p> 1039 </div> 1040 </div> 1041 <div class="row"> 1042 <div class="three columns push_thirteen"> 1043 <p>3 Col Push 13</p> 1044 </div> 1045 <div class="thirteen columns pull_three"> 1046 <p>13 Columns Pull 3</p> 1047 </div> 1048 </div> 1049 <div class="row"> 1050 <div class="four columns push_twelve"> 1051 <p>4 Columns Push 12</p> 1052 </div> 1053 <div class="twelve columns pull_four"> 1054 <p>12 Columns Pull 4</p> 1055 </div> 1056 </div> 1057 <div class="row"> 1058 <div class="five columns push_eleven"> 1059 <p>5 Columns Push 11</p> 1060 </div> 1061 <div class="eleven columns pull_five"> 1062 <p>11 Columns Pull 5</p> 1063 </div> 1064 </div> 1065 <div class="row"> 1066 <div class="six columns push_ten"> 1067 <p>6 Columns Push 10</p> 1068 </div> 1069 <div class="ten columns pull_six"> 1070 <p>10 Columns Pull 6</p> 1071 </div> 1072 </div> 1073 <div class="row"> 1074 <div class="seven columns push_nine"> 1075 <p>7 Columns Push 9</p> 1076 </div> 1077 <div class="nine columns pull_seven"> 1078 <p>9 Columns Pull 7</p> 1079 </div> 1080 </div> 1081 <div class="row"> 1082 <div class="eight columns push_eight"> 1083 <p>8 Columns Push 8</p> 1084 </div> 1085 <div class="eight columns pull_eight"> 1086 <p>8 Columns Pull 8</p> 1087 </div> 1088 </div> 1089 1090 <!-- Centering tests --> 1091 <div class="row"> 1092 <div class="sixteen columns special"> 1093 <p>Centered Columns</p> 1094 </div> 1095 </div> 1096 1097 <div class="row"> 1098 <div class="fifteen columns centered"> 1099 <p>15 Columns</p> 1100 </div> 1101 </div> 1102 1103 <div class="row"> 1104 <div class="fourteen columns centered"> 1105 <p>14 Columns</p> 1106 </div> 1107 </div> 1108 1109 <div class="row"> 1110 <div class="thirteen columns centered"> 1111 <p>13 Columns</p> 1112 </div> 1113 </div> 1114 1115 <div class="row"> 1116 <div class="twelve columns centered"> 1117 <p>12 Columns</p> 1118 </div> 1119 </div> 1120 1121 <div class="row"> 1122 <div class="eleven columns centered"> 1123 <p>11 Columns</p> 1124 </div> 1125 </div> 1126 1127 <div class="row"> 1128 <div class="ten columns centered"> 1129 <p>10 Columns</p> 1130 </div> 1131 </div> 1132 1133 <div class="row"> 1134 <div class="nine columns centered"> 1135 <p>9 Columns</p> 1136 </div> 1137 </div> 1138 1139 <div class="row"> 1140 <div class="eight columns centered"> 1141 <p>8 Columns</p> 1142 </div> 1143 </div> 1144 1145 <div class="row"> 1146 <div class="seven columns centered"> 1147 <p>7 Columns</p> 1148 </div> 1149 </div> 1150 1151 <div class="row"> 1152 <div class="six columns centered"> 1153 <p>6 Columns</p> 1154 </div> 1155 </div> 1156 1157 <div class="row"> 1158 <div class="five columns centered"> 1159 <p>5 Columns</p> 1160 </div> 1161 </div> 1162 1163 <div class="row"> 1164 <div class="four columns centered"> 1165 <p>4 Columns</p> 1166 </div> 1167 </div> 1168 1169 <div class="row"> 1170 <div class="three columns centered"> 1171 <p>3 Columns</p> 1172 </div> 1173 </div> 1174 1175 <div class="row"> 1176 <div class="two columns centered"> 1177 <p>2 Columns</p> 1178 </div> 1179 </div> 1180 1181 <div class="row"> 1182 <div class="one columns centered"> 1183 <p>1 Col</p> 1184 </div> 1185 </div> 1186 1187 </section> 1188 1189 1190 <!-- Grab Google CDN's jQuery, fall back to local if offline --> 1191 <!-- 2.0 for modern browsers, 1.10 for .oldie --> 1192 <script> 1193 var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g)); 1194 if(!oldieCheck) { 1195 document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>'); 1196 } else { 1197 document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>'); 1198 } 1199 </script> 1200 <script> 1201 if(!window.jQuery) { 1202 if(!oldieCheck) { 1203 document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>'); 1204 } else { 1205 document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>'); 1206 } 1207 } 1208 </script> 1209 1210 <!-- 1211 Include gumby.js followed by UI modules followed by gumby.init.js 1212 Or concatenate and minify into a single file --> 1213 <script gumby-touch="js/libs" src="js/libs/gumby.js"></script> 1214 <script src="js/libs/ui/gumby.retina.js"></script> 1215 <script src="js/libs/ui/gumby.fixed.js"></script> 1216 <script src="js/libs/ui/gumby.skiplink.js"></script> 1217 <script src="js/libs/ui/gumby.toggleswitch.js"></script> 1218 <script src="js/libs/ui/gumby.checkbox.js"></script> 1219 <script src="js/libs/ui/gumby.radiobtn.js"></script> 1220 <script src="js/libs/ui/gumby.tabs.js"></script> 1221 <script src="js/libs/ui/gumby.navbar.js"></script> 1222 <script src="js/libs/ui/jquery.validation.js"></script> 1223 <script src="js/libs/gumby.init.js"></script> 1224 1225 <!-- 1226 Google's recommended deferred loading of JS 1227 gumby.min.js contains gumby.js, all UI modules and gumby.init.js 1228 <script type="text/javascript"> 1229 function downloadJSAtOnload() { 1230 var element = document.createElement("script"); 1231 element.src = "js/libs/gumby.min.js"; 1232 document.body.appendChild(element); 1233 } 1234 if (window.addEventListener) 1235 window.addEventListener("load", downloadJSAtOnload, false); 1236 else if (window.attachEvent) 1237 window.attachEvent("onload", downloadJSAtOnload); 1238 else window.onload = downloadJSAtOnload; 1239 </script> --> 1240 1241 <script src="js/plugins.js"></script> 1242 <script src="js/main.js"></script> 1243 1244 <!-- Change UA-XXXXX-X to be your site's ID --> 1245 <!--<script> 1246 window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']]; 1247 Modernizr.load({ 1248 load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js' 1249 }); 1250 </script>--> 1251 1252 <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6. 1253 chromium.org/developers/how-tos/chrome-frame-getting-started --> 1254 <!--[if lt IE 7 ]> 1255 <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script> 1256 <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script> 1257 <![endif]--> 1258 1259 </body> 1260</html> 1261