git.roojs.org Git - ratchet/blob - docs/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Ratchet</title>
   6     <meta name="description" content="Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.">
   7     <meta name="author" content="Dave Gamache, Connor Sears, and Jacob Thornton">
   8     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
   9     <link rel="shortcut icon" href="favicon.ico"/>
  10     <meta name="apple-mobile-web-app-capable" content="yes">
  11     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12     <link rel="stylesheet" href="../dist/ratchet.css">
  13     <link rel="stylesheet" href="css/docs.css">
  14     <link rel="stylesheet" href="css/prettify.css">
  15     <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  16     <script type="text/javascript" src="//use.typekit.net/gwz1sef.js"></script>
  17     <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  18
  19     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114x114.png">
  20     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72x72.png">
  21     <link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/apple-touch-icon-57x57.png">
  22
  23     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  24     <script src="js/prettify.js"></script>
  25     <script src="../dist/ratchet.js"></script>
  26     <script src="js/docs.js"></script>
  27     <script src="js/fingerblast.js"></script>
  28     <script type="text/javascript">
  29
  30       var _gaq = _gaq || [];
  31       _gaq.push(['_setAccount', 'UA-36050008-1']);
  32       _gaq.push(['_trackPageview']);
  33
  34       (function() {
  35         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  36         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  37         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  38       })();
  39
  40     </script>
  41
  42   </head>
  43   <body ontouchstart="">
  44
  45     <!-- Masthead & navigation -->
  46     <nav class="docs-outer-wrapper docs-masthead">
  47       <div class="docs-inner-wrapper">
  48         <ul class="docs-navigation">
  49           <li class="nav-item"><a href="#gettingStarted">Getting started</a></li>
  50           <li class="nav-item nav-components">
  51             <a data-ignore="push" class="nav-components-link" href="">Components</a>
  52             <ul class="components-list">
  53               <li><a href="#bars">Bars</a></li>
  54               <li><a href="#lists">Lists</a></li>
  55               <li><a href="#buttons">Buttons</a></li>
  56               <li><a href="#segmentedControllers">Segmented controllers</a></li>
  57               <li><a href="#counts">Counts</a></li>
  58               <li><a href="#forms">Forms</a></li>
  59               <li><a href="#toggles">Toggles</a></li>
  60               <li><a href="#popovers">Popovers</a></li>
  61               <li><a href="#modals">Modals</a></li>
  62               <li><a href="#sliders">Sliders</a></li>
  63               <li><a href="#push">Push</a></li>
  64             </ul>
  65           </li>
  66           <li class="nav-item"><a href="#pageSetup">Page setup</a></li>
  67           <li data-ignore="push" class="nav-item"><a href="http://github.com/maker/ratchet">View on Github</a></li>
  68         </ul>
  69         <h1 class="docs-masthead-title">Ratchet</h1>
  70       </div>
  71     </nav>
  72
  73     <!-- Jumbo header -->
  74     <header class="docs-outer-wrapper docs-header">
  75       <div class="docs-inner-wrapper">
  76         <hgroup class="docs-header-text">
  77           <h2 class="docs-header-subtitle">Prototype iPhone apps with simple HTML, CSS, and JS components.</h2>
  78           <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="docs-btn" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V1.0']);">Download Ratchet</a>
  79         </hgroup>
  80       </div>
  81       <section class="social">
  82         <ul>
  83           <li>
  84             <iframe src="http://ghbtns.com/github-btn.html?user=maker&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
  85           </li>
  86           <li>
  87             <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://maker.github.com/ratchet/" data-text="Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components." data-via="GoRatchet">Tweet</a>
  88             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  89           </li>
  90           <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
  91             Follow @GoRatchet</a>
  92             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  93           </li>
  94         </ul>
  95       </section>
  96     </header>
  97
  98     <div class="docs-outer-wrapper docs-content">
  99       <section class="content-section section-informational" id="gettingStarted">
 100         <div class="docs-inner-wrapper">
 101           <div class="section-header">
 102             <h2 class="section-title">Getting started</h2>
 103             <p class="section-description">Once you've downloaded Ratchet, here's what to do next.</p>
 104           </div>
 105
 106           <ol class="steps">
 107               <li class="step">
 108               <h3 class="step-title">1. Create your pages</h3>
 109               <p class="step-description">Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own.</p>
 110             </li>
 111             <li class="step">
 112               <h3 class="step-title">2. Connect pages with push.js</h3>
 113               <p class="step-description">Read about <a href="#push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
 114             </li>
 115             <li class="step">
 116               <h3 class="step-title">3. Save the prototype to your phone</h3>
 117               <p class="step-description">There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <img class="share-icon" src="img/icon-share.png"> button and "Add to Home Screen".</p>
 118             </li>
 119           </ol>
 120         </div>
 121       </section>
 122
 123       <!-- Banner for Mozilla/IE -->
 124       <div class="notice-banner">
 125         <p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
 126       </div>
 127
 128       <!--[if IE]>
 129       <div class="notice-banner">
 130         <p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
 131       </div>
 132       <![endif]-->
 133
 134
 135       <!-- Components -->
 136       <section class="docs-outer-wrapper content-section section-components">
 137         <div class="docs-inner-wrapper">
 138           <div class="section-header">
 139             <h2 class="section-title">Components</h2>
 140             <p class="section-description">Design patterns that serve as basic building blocks.</p>
 141           </div>
 142           <div class="iphone">
 143             <div class="iphone-content">
 144               <div id="iwindow">
 145                 <header class="bar-title">
 146                   <h1 class="title">Title</h1>
 147                 </header>
 148               </div>
 149             </div>
 150           </div>
 151
 152           <!-- Bars -->
 153           <article class="component active" id="bars">
 154             <h3 class="component-title">Title bar</h3>
 155             <p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
 156
 157             <div class="component-example component-example-fullbleed">
 158               <header class="bar-title">
 159                 <h1 class="title">Title</h1>
 160               </header>
 161             </div>
 162
 163 <pre class="prettyprint">
 164 &lt;header class=&quot;bar-title&quot;&gt;
 165   &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 166 &lt;/header&gt;
 167 </pre>
 168
 169           </article>
 170
 171           <article class="component">
 172             <h3 class="component-title">Title bar with buttons</h3>
 173             <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
 174
 175             <div class="component-example component-example-fullbleed">
 176               <header class="bar-title">
 177                 <a class="button">
 178                   Left
 179                 </a>
 180                 <h1 class="title">Title</h1>
 181                 <a class="button">
 182                   Right
 183                 </a>
 184               </header>
 185             </div>
 186
 187 <pre class="prettyprint">
 188 &lt;header class=&quot;bar-title&quot;&gt;
 189   &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 190     Left
 191   &lt;/a&gt;
 192   &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 193   &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 194     Right
 195   &lt;/a&gt;
 196 &lt;/header&gt;
 197 </pre>
 198
 199           </article>
 200           <article class="component">
 201             <h3 class="component-title">Title bar with directional buttons</h3>
 202             <p class="component-description">Directional buttons in a title bar should be used for navigational purposes.</p>
 203
 204             <div class="component-example component-example-fullbleed">
 205               <header class="bar-title">
 206                 <a class="button-prev">
 207                   Previous
 208                 </a>
 209                 <h1 class="title">Title</h1>
 210                 <a class="button-next">
 211                   Next
 212                 </a>
 213               </header>
 214             </div>
 215
 216 <pre class="prettyprint">
 217 &lt;header class=&quot;bar-title&quot;&gt;
 218   &lt;a class=&quot;button-prev&quot; href=&quot;#&quot;&gt;
 219     Previous
 220   &lt;/a&gt;
 221   &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 222   &lt;a class=&quot;button-next&quot; href=&quot;#&quot;&gt;
 223     Next
 224   &lt;/a&gt;
 225 &lt;/header&gt;
 226 </pre>
 227
 228           </article>
 229
 230           <article class="component">
 231             <h3 class="component-title">Title bar with segmented controller</h3>
 232             <p class="component-description">Title bars can also house segmented controllers (with or without accompanying buttons). It all uses flex-box to create perfectly even spacing no matter their labels.</p>
 233
 234             <div class="component-example component-example-fullbleed">
 235               <header class="bar-title">
 236                 <a class="button">
 237                   Left
 238                 </a>
 239                 <ul class="segmented-controller">
 240                   <li class="active">
 241                     <a>One</a>
 242                   </li>
 243                   <li>
 244                     <a>Two</a>
 245                   </li>
 246                   <li>
 247                     <a>Three</a>
 248                   </li>
 249                 </ul>
 250                 <a class="button">
 251                   Right
 252                 </a>
 253               </header>
 254             </div>
 255
 256 <pre class="prettyprint">
 257 &lt;header class=&quot;bar-title&quot;&gt;
 258   &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 259     Left
 260   &lt;/a&gt;
 261   &lt;ul class=&quot;segmented-controller&quot;&gt;
 262     &lt;li class=&quot;active&quot;&gt;
 263       &lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
 264     &lt;/li&gt;
 265     &lt;li&gt;
 266       &lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
 267     &lt;/li&gt;
 268     &lt;li&gt;
 269       &lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
 270     &lt;/li&gt;
 271   &lt;/ul&gt;
 272   &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 273     Right
 274   &lt;/a&gt;
 275 &lt;/header&gt;
 276 </pre>
 277
 278           </article>
 279
 280           <article class="component">
 281             <h3 class="component-title">Tab bar</h3>
 282             <p class="component-description">Icons should be around 24px by 18px. The gradient on an icon starts with pure white and goes to #e5e5e5 at the bottom.</p>
 283
 284             <div class="component-example component-example-fullbleed">
 285               <nav class="bar-tab">
 286                 <ul class="tab-inner">
 287                   <li class="tab-item active">
 288                     <a href="#">
 289                       <img class="tab-icon" src="img/icon-home.png">
 290                       <div class="tab-label">Label</div>
 291                     </a>
 292                   </li>
 293                   <li class="tab-item">
 294                     <a href="#">
 295                       <img class="tab-icon" src="img/icon-profile.png">
 296                       <div class="tab-label">Label</div>
 297                     </a>
 298                   </li>
 299                   <li class="tab-item">
 300                     <a href="#">
 301                       <img class="tab-icon" src="img/icon-messages.png">
 302                       <div class="tab-label">Label</div>
 303                     </a>
 304                   </li>
 305                   <li class="tab-item">
 306                     <a href="#">
 307                       <img class="tab-icon" src="img/icon-hamburger.png">
 308                       <div class="tab-label">Label</div>
 309                     </a>
 310                   </li>
 311                   <li class="tab-item">
 312                     <a href="#">
 313                       <img class="tab-icon" src="img/icon-settings.png">
 314                       <div class="tab-label">Label</div>
 315                     </a>
 316                   </li>
 317                 </ul>
 318               </nav>
 319             </div>
 320
 321 <pre class="prettyprint">
 322 &lt;nav class=&quot;bar-tab&quot;&gt;
 323   &lt;ul class=&quot;tab-inner&quot;&gt;
 324     &lt;li class=&quot;tab-item active&quot;&gt;
 325       &lt;a href=&quot;#&quot;&gt;
 326         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-home.png&quot;&gt;
 327         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
 328       &lt;/a&gt;
 329     &lt;/li&gt;
 330     &lt;li class=&quot;tab-item&quot;&gt;
 331       &lt;a href=&quot;#&quot;&gt;
 332         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-profile.png&quot;&gt;
 333         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
 334       &lt;/a&gt;
 335     &lt;/li&gt;
 336     &lt;li class=&quot;tab-item&quot;&gt;
 337       &lt;a href=&quot;#&quot;&gt;
 338         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-messages.png&quot;&gt;
 339         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
 340       &lt;/a&gt;
 341     &lt;/li&gt;
 342     &lt;li class=&quot;tab-item&quot;&gt;
 343       &lt;a href=&quot;#&quot;&gt;
 344         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-hamburger.png&quot;&gt;
 345         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
 346       &lt;/a&gt;
 347     &lt;/li&gt;
 348     &lt;li class=&quot;tab-item&quot;&gt;
 349       &lt;a href=&quot;#&quot;&gt;
 350         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-settings.png&quot;&gt;
 351         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
 352       &lt;/a&gt;
 353     &lt;/li&gt;
 354   &lt;/ul&gt;
 355 &lt;/nav&gt;
 356 </pre>
 357
 358           <p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
 359           <p class="component-note"><strong>Credit:</strong> Icons by Marc Haumann and Spencer Cohen from The Noun Project</p>
 360         </article>
 361
 362         <article class="component">
 363             <h3 class="component-title">Standard bars</h3>
 364             <p class="component-description">Standard bars are basic fixed elements that can be positioned in 3 places. These can be used to house buttons or segmented controllers (see following examples).</p>
 365
 366             <div class="component-example component-example-fullbleed">
 367               <!-- Segmented controller in standard bar fixed to top -->
 368               <nav class="bar-standard">
 369                 <ul class="segmented-controller">
 370                   <li class="active">
 371                     <a>Thing one</a>
 372                   </li>
 373                   <li>
 374                     <a>Thing two</a>
 375                   </li>
 376                   <li>
 377                     <a>Thing three</a>
 378                   </li>
 379                 </ul>
 380               </nav>
 381
 382               <!-- Block button in standard bar fixed below top bar -->
 383               <div class="bar-standard bar-header-secondary">
 384                 <a class="button-block">Block level button</a>
 385               </div>
 386             </div>
 387
 388 <pre class="prettyprint">
 389 &lt;!-- Segmented controller in standard bar fixed to top --&gt;
 390 &lt;nav class=&quot;bar-standard&quot;&gt;
 391   &lt;ul class=&quot;segmented-controller&quot;&gt;
 392     &lt;li class=&quot;active&quot;&gt;
 393       &lt;a href=&quot;#&quot;&gt;Thing one&lt;/a&gt;
 394     &lt;/li&gt;
 395     &lt;li&gt;
 396       &lt;a href=&quot;#&quot;&gt;Thing two&lt;/a&gt;
 397     &lt;/li&gt;
 398     &lt;li&gt;
 399       &lt;a href=&quot;#&quot;&gt;Thing three&lt;/a&gt;
 400     &lt;/li&gt;
 401   &lt;/ul&gt;
 402 &lt;/nav&gt;
 403 &lt;div class=&quot;bar-standard bar-header-secondary&quot;&gt;
 404   &lt;a class=&quot;button-block&quot;&gt;Block level button&lt;/a&gt;
 405 &lt;/div&gt;
 406 </pre>
 407
 408         </article>
 409
 410         <!-- Lists -->
 411         <article class="component" id="lists">
 412           <h3 class="component-title">Lists</h3>
 413           <p class="component-description">Lists can be used for organizing data, showing collections of links or a series of controls.</p>
 414
 415           <div class="component-example component-example-fullbleed">
 416             <ul class="list">
 417               <li>List item 1</li>
 418               <li>List item 2</li>
 419               <li class="list-divider">List Divider</li>
 420               <li>List item 3</li>
 421             </ul>
 422           </div>
 423
 424 <pre class="prettyprint">
 425 &lt;ul class=&quot;list&quot;&gt;
 426   &lt;li&gt;List item 1&lt;/li&gt;
 427   &lt;li&gt;List item 2&lt;/li&gt;
 428   &lt;li class=&quot;list-divider&quot;&gt;List Divider&lt;/li&gt;
 429   &lt;li&gt;List item 3&lt;/li&gt;
 430 &lt;/ul&gt;
 431 </pre>
 432
 433         </article>
 434
 435         <article class="component">
 436           <h3 class="component-title">List with chevrons</h3>
 437           <p class="component-description">Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the list item is linked.</p>
 438
 439           <div class="component-example component-example-fullbleed">
 440             <ul class="list">
 441               <li>
 442                 <a>
 443                   List item 1
 444                   <span class="chevron"></span>
 445                 </a>
 446               </li>
 447               <li>
 448                 <a>
 449                   List item 2
 450                   <span class="chevron"></span>
 451                 </a>
 452               </li>
 453               <li>
 454                 <a>
 455                   List item 3
 456                   <span class="chevron"></span>
 457                 </a>
 458               </li>
 459             </ul>
 460           </div>
 461
 462 <pre class="prettyprint">
 463 &lt;ul class=&quot;list&quot;&gt;
 464   &lt;li&gt;
 465     &lt;a href=&quot;#&quot;&gt;
 466       List item 1
 467       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 468     &lt;/a&gt;
 469   &lt;/li&gt;
 470   &lt;li&gt;
 471     &lt;a href=&quot;#&quot;&gt;
 472       List item 2
 473       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 474     &lt;/a&gt;
 475   &lt;/li&gt;
 476   &lt;li&gt;
 477     &lt;a href=&quot;#&quot;&gt;
 478       List item 3
 479       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 480     &lt;/a&gt;
 481   &lt;/li&gt;
 482 &lt;/ul&gt;
 483 </pre>
 484
 485         </article>
 486
 487         <article class="component">
 488           <h3 class="component-title">List with counts</h3>
 489
 490           <div class="component-example component-example-fullbleed">
 491             <ul class="list">
 492               <li>List item 1 <span class="count">4</span></li>
 493               <li>List item 2 <span class="count">1</span></li>
 494               <li>List item 3 <span class="count">5</span></li>
 495             </ul>
 496           </div>
 497
 498 <pre class="prettyprint">
 499 &lt;ul class=&quot;list&quot;&gt;
 500   &lt;li&gt;List item 1 &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
 501   &lt;li&gt;List item 2 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/li&gt;
 502   &lt;li&gt;List item 3 &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;&lt;/li&gt;
 503 &lt;/ul&gt;
 504 </pre>
 505
 506         </article>
 507
 508         <article class="component">
 509           <h3 class="component-title">List with counts and chevrons</h3>
 510
 511           <div class="component-example component-example-fullbleed">
 512             <ul class="list">
 513               <li>
 514                 <a>
 515                   List item 1
 516                   <span class="chevron"></span>
 517                   <span class="count">4</span>
 518                 </a>
 519               </li>
 520               <li>
 521                 <a>
 522                   List item 2
 523                   <span class="chevron"></span>
 524                   <span class="count">1</span>
 525                 </a>
 526               </li>
 527               <li>
 528                 <a>
 529                   List item 3
 530                   <span class="chevron"></span>
 531                   <span class="count">5</span>
 532                 </a>
 533               </li>
 534             </ul>
 535           </div>
 536
 537 <pre class="prettyprint">
 538 &lt;ul class=&quot;list&quot;&gt;
 539   &lt;li&gt;
 540     &lt;a href=&quot;#&quot;&gt;
 541       List item 1
 542       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 543       &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;
 544     &lt;/a&gt;
 545   &lt;/li&gt;
 546   &lt;li&gt;
 547     &lt;a href=&quot;#&quot;&gt;
 548       List item 2
 549       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 550       &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
 551     &lt;/a&gt;
 552   &lt;/li&gt;
 553   &lt;li&gt;
 554     &lt;a href=&quot;#&quot;&gt;
 555       List item 3
 556       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 557       &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;
 558     &lt;/a&gt;
 559   &lt;/li&gt;
 560 &lt;/ul&gt;
 561 </pre>
 562
 563         </article>
 564
 565         <article class="component">
 566           <h3 class="component-title">List with buttons</h3>
 567
 568           <div class="component-example component-example-fullbleed">
 569             <ul class="list">
 570               <li>List item 1 <a class="button">Button</a></li>
 571               <li>List item 2 <a class="button-main">Button</a></li>
 572               <li>List item 3 <a class="button-positive">Button</a></li>
 573               <li>List item 4 <a class="button-negative">Button</a></li>
 574             </ul>
 575           </div>
 576
 577 <pre class="prettyprint">
 578 &lt;ul class=&quot;list&quot;&gt;
 579   &lt;li&gt;List item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
 580   &lt;li&gt;List item 2 &lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
 581   &lt;li&gt;List item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
 582   &lt;li&gt;List item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
 583 &lt;/ul&gt;
 584 </pre>
 585
 586         </article>
 587
 588         <article class="component">
 589           <h3 class="component-title">List with toggles</h3>
 590
 591           <div class="component-example component-example-fullbleed">
 592             <ul class="list">
 593               <li>
 594                 List item 1
 595                 <div class="toggle">
 596                   <div class="toggle-handle"></div>
 597                 </div>
 598               </li>
 599               <li>
 600                 List item 2
 601                 <div class="toggle active">
 602                   <div class="toggle-handle"></div>
 603                 </div>
 604               </li>
 605               <li>
 606                 List item 3
 607                 <div class="toggle">
 608                   <div class="toggle-handle"></div>
 609                 </div>
 610               </li>
 611             </ul>
 612           </div>
 613
 614 <pre class="prettyprint">
 615 &lt;ul class=&quot;list&quot;&gt;
 616   &lt;li&gt;
 617     List item 1
 618     &lt;div class=&quot;toggle&quot;&gt;
 619       &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 620     &lt;/div&gt;
 621   &lt;/li&gt;
 622   &lt;li&gt;
 623     List item 2
 624     &lt;div class=&quot;toggle active&quot;&gt;
 625       &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 626     &lt;/div&gt;
 627   &lt;/li&gt;
 628   &lt;li&gt;
 629     List item 3
 630     &lt;div class=&quot;toggle&quot;&gt;
 631       &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 632     &lt;/div&gt;
 633   &lt;/li&gt;
 634 &lt;/ul&gt;
 635 </pre>
 636
 637         </article>
 638
 639         <article class="component">
 640           <h3 class="component-title">Inset list</h3>
 641
 642           <div class="component-example">
 643             <ul class="list inset">
 644               <li>List item 1</li>
 645               <li>List item 2</li>
 646               <li class="list-divider">List Divider</li>
 647               <li>List item 3</li>
 648               <li>List item 4</li>
 649             </ul>
 650           </div>
 651
 652 <pre class="prettyprint">
 653 &lt;ul class=&quot;list inset&quot;&gt;
 654   &lt;li&gt;List item 1&lt;/li&gt;
 655   &lt;li&gt;List item 2&lt;/li&gt;
 656   &lt;li class=&quot;list-divider&quot;&gt;List Divider&lt;/li&gt;
 657   &lt;li&gt;List item 3&lt;/li&gt;
 658   &lt;li&gt;List item 4&lt;/li&gt;
 659 &lt;/ul&gt;
 660 </pre>
 661
 662         </article>
 663
 664         <!-- Buttons -->
 665         <article class="component" id="buttons">
 666           <h3 class="component-title">Buttons</h3>
 667           <p class="component-description">Buttons come in four flavors and should be used for user actions.</p>
 668
 669           <div class="component-example">
 670             <a class="button">Button</a>
 671             <a class="button-main">Button</a>
 672             <a class="button-positive">Button</a>
 673             <a class="button-negative">Button</a>
 674           </div>
 675
 676 <pre class="prettyprint">
 677 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;
 678 &lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;
 679 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;
 680 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;
 681 </pre>
 682
 683         </article>
 684
 685         <article class="component" id="buttonsCounts">
 686           <h3 class="component-title">Buttons with counts</h3>
 687
 688           <div class="component-example">
 689             <a class="button">Count button<span class="count">1</span></a>
 690             <a class="button-main">Count button<span class="count">1</span></a>
 691             <a class="button-positive">Count button<span class="count">1</span></a>
 692             <a class="button-negative">Count button<span class="count">1</span></a>
 693           </div>
 694
 695 <pre class="prettyprint">
 696 &lt;a class=&quot;button&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 697 &lt;a class=&quot;button-main&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 698 &lt;a class=&quot;button-positive&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 699 &lt;a class=&quot;button-negative&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 700 </pre>
 701
 702         </article>
 703
 704         <article class="component" id="blockButtons">
 705           <h3 class="component-title">Block buttons</h3>
 706
 707           <div class="component-example">
 708             <a class="button-block">Block button</a>
 709             <a class="button-main button-block">Block button</a>
 710             <a class="button-positive button-block">Block button</a>
 711             <a class="button-negative button-block">Block button</a>
 712           </div>
 713
 714 <pre class="prettyprint">
 715 &lt;a class=&quot;button-block&quot;&gt;Block button&lt;/a&gt;
 716 &lt;a class=&quot;button-main button-block&quot;&gt;Block button&lt;/a&gt;
 717 &lt;a class=&quot;button-positive button-block&quot;&gt;Block button&lt;/a&gt;
 718 &lt;a class=&quot;button-negative button-block&quot;&gt;Block button&lt;/a&gt;
 719 </pre>
 720
 721         </article>
 722
 723         <!-- Segmented Controller -->
 724         <article class="component" id="segmentedControllers">
 725           <h3 class="component-title">Segmented controller</h3>
 726           <p class="component-description">Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "segmented-controller-item". Then, just give each content section an id and point the link in the segmented controller to that id.</p>
 727
 728           <div class="component-example">
 729             <ul class="segmented-controller">
 730               <li class="active">
 731                 <a href="#item1mobile">Thing one</a>
 732               </li>
 733               <li>
 734                 <a href="#item2mobile">Thing two</a>
 735               </li>
 736               <li>
 737                 <a href="#item3mobile">Thing three</a>
 738               </li>
 739             </ul>
 740             <ul class="inset list">
 741               <li id="item1mobile" class="segmented-controller-item active">
 742                 Item 1
 743               </li>
 744               <li id="item2mobile" class="segmented-controller-item">
 745                 Item 2
 746               </li>
 747               <li id="item3mobile" class="segmented-controller-item">
 748                 Item 3
 749               </li>
 750             </ul>
 751           </div>
 752
 753 <pre class="prettyprint">
 754 &lt;ul class=&quot;segmented-controller&quot;&gt;
 755   &lt;li class=&quot;active&quot;&gt;
 756     &lt;a href=&quot;#item1&quot;&gt;Thing one&lt;/a&gt;
 757   &lt;/li&gt;
 758   &lt;li&gt;
 759     &lt;a href=&quot;#item2&quot;&gt;Thing two&lt;/a&gt;
 760   &lt;/li&gt;
 761   &lt;li&gt;
 762     &lt;a href=&quot;#item3&quot;&gt;Thing three&lt;/a&gt;
 763   &lt;/li&gt;
 764 &lt;/ul&gt;
 765 &lt;ul class=&quot;inset list&quot;&gt;
 766   &lt;li id=&quot;item1&quot; class=&quot;segmented-controller-item active&quot;&gt;
 767     Item 1
 768   &lt;/li&gt;
 769   &lt;li id=&quot;item2&quot; class=&quot;segmented-controller-item&quot;&gt;
 770     Item 2
 771   &lt;/li&gt;
 772   &lt;li id=&quot;item3&quot; class=&quot;segmented-controller-item&quot;&gt;
 773     Item 3
 774   &lt;/li&gt;
 775 &lt;/ul&gt;
 776 </pre>
 777
 778         </article>
 779
 780         <!-- Counts -->
 781         <article class="component" id="counts">
 782           <h3 class="component-title">Counts</h3>
 783           <p class="component-description">Counts come in four flavors and should be used to indicate "how many" of something there are.</p>
 784
 785           <div class="component-example">
 786             <span class="count">1</span>
 787             <span class="count-main">2</span>
 788             <span class="count-positive">3</span>
 789             <span class="count-negative">4</span>
 790           </div>
 791
 792 <pre class="prettyprint">
 793 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
 794 &lt;span class=&quot;count-main&quot;&gt;2&lt;/span&gt;
 795 &lt;span class=&quot;count-positive&quot;&gt;3&lt;/span&gt;
 796 &lt;span class=&quot;count-negative&quot;&gt;4&lt;/span&gt;
 797 </pre>
 798
 799         </article>
 800
 801         <!-- Forms -->
 802         <article class="component" id="forms">
 803           <h3 class="component-title">Forms</h3>
 804
 805           <div class="component-example">
 806             <form>
 807               <input type="text" placeholder="Full name">
 808               <input type="search" placeholder="Search">
 809               <textarea rows="5"></textarea>
 810               <a class="button button-block">Choose existing</a>
 811             </form>
 812           </div>
 813
 814 <pre class="prettyprint">
 815 &lt;form&gt;
 816   &lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
 817   &lt;input type=&quot;search&quot; placeholder=&quot;Search&quot;&gt;
 818   &lt;textarea rows=&quot;5&quot;&gt;&lt;/textarea&gt;
 819   &lt;a class=&quot;button button-block&quot;&gt;Choose existing&lt;/a&gt;
 820 &lt;/form&gt;
 821 </pre>
 822
 823         </article>
 824
 825         <!-- Form with input group -->
 826         <article class="component" id="formsWithInputGroup">
 827           <h3 class="component-title">Form with input group</h3>
 828
 829           <div class="component-example">
 830             <form class="input-group">
 831               <input type="text" placeholder="Full name">
 832               <input type="email" placeholder="Email">
 833               <input type="text" placeholder="Username">
 834             </form>
 835           </div>
 836
 837 <pre class="prettyprint">
 838 &lt;form&gt;
 839   &lt;div class=&quot;input-group&quot;&gt;
 840     &lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
 841     &lt;input type=&quot;email&quot; placeholder=&quot;Email&quot;&gt;
 842     &lt;input type=&quot;text&quot; placeholder=&quot;Username&quot;&gt;
 843   &lt;/div&gt;
 844 &lt;/form&gt;
 845 </pre>
 846
 847         </article>
 848
 849         <!-- Form with input group and labels -->
 850         <article class="component" id="formsWithInputGroupAndLabels">
 851           <h3 class="component-title">Form with input group and labels</h3>
 852
 853           <div class="component-example">
 854             <form class="input-group">
 855               <div class="input-row">
 856                 <label>Full name</label>
 857                 <input type="text" placeholder="Mister Ratchet">
 858               </div>
 859               <div class="input-row">
 860                 <label>Email</label>
 861                 <input type="email" placeholder="ratchetframework@gmail.com">
 862               </div>
 863               <div class="input-row">
 864                 <label>Username</label>
 865                 <input type="text" placeholder="goRatchet">
 866               </div>
 867             </form>
 868           </div>
 869
 870 <pre class="prettyprint">
 871 &lt;form&gt;
 872   &lt;div class=&quot;input-group&quot;&gt;
 873     &lt;div class=&quot;input-row&quot;&gt;
 874       &lt;label&gt;Full name&lt;/label&gt;
 875       &lt;input type=&quot;text&quot; placeholder=&quot;Mister Ratchet&quot;&gt;
 876     &lt;/div&gt;
 877     &lt;div class=&quot;input-row&quot;&gt;
 878       &lt;label&gt;Email&lt;/label&gt;
 879       &lt;input type=&quot;email&quot; placeholder=&quot;ratchetframework@gmail.com&quot;&gt;
 880     &lt;/div&gt;
 881     &lt;div class=&quot;input-row&quot;&gt;
 882       &lt;label&gt;Username&lt;/label&gt;
 883       &lt;input type=&quot;text&quot; placeholder=&quot;goRatchet&quot;&gt;
 884     &lt;/div&gt;
 885   &lt;/div&gt;
 886 &lt;/form&gt;
 887 </pre>
 888
 889         </article>
 890
 891         <!-- Toggle -->
 892         <article class="component" id="toggles">
 893           <h3 class="component-title">Toggles</h3>
 894           <p class="component-description">Toggles can be used by sliding or tapping the control.</p>
 895
 896           <div class="component-example">
 897             <div class="toggle active">
 898               <div class="toggle-handle"></div>
 899             </div>
 900             <div class="toggle">
 901               <div class="toggle-handle"></div>
 902             </div>
 903           </div>
 904
 905 <pre class="prettyprint">
 906 &lt;div class=&quot;toggle active&quot;&gt;
 907   &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 908 &lt;/div&gt;
 909 &lt;div class=&quot;toggle&quot;&gt;
 910   &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 911 &lt;/div&gt;
 912 </pre>
 913
 914           <p class="component-description">Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
 915
 916 <pre class="prettyprint js">
 917 // Only needed if you want to fire a callback
 918 document
 919   .querySelector('#myToggle')
 920   .addEventListener('toggle', myFunction)
 921 </pre>
 922
 923         </article>
 924
 925         <!-- Popovers -->
 926         <article class="component" id="popovers">
 927           <h3 class="component-title">Popovers</h3>
 928
 929           <div class="component-example">
 930             <div id="popover" class="popover">
 931               <header class="popover-header">
 932                 <a class="button">
 933                   Left
 934                 </a>
 935                 <h3 class="title">Popover title</h3>
 936                 <a class="button">
 937                   Right
 938                 </a>
 939               </header>
 940               <ul class="list">
 941                 <li>Item1</li>
 942                 <li>Item2</li>
 943                 <li>Item3</li>
 944                 <li>Item4</li>
 945               </ul>
 946             </div>
 947           </div>
 948
 949 <pre class="prettyprint">
 950 &lt;div id=&quot;myPopover&quot; class=&quot;popover&quot;&gt;
 951   &lt;header class=&quot;popover-header&quot;&gt;
 952     &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 953       Left
 954     &lt;/a&gt;
 955     &lt;h3 class=&quot;title&quot;&gt;Popover title&lt;/h3&gt;
 956     &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 957       Right
 958     &lt;/a&gt;
 959   &lt;/header&gt;
 960   &lt;ul class=&quot;list&quot;&gt;
 961     &lt;li&gt;Item1&lt;/li&gt;
 962     &lt;li&gt;Item2&lt;/li&gt;
 963     &lt;li&gt;Item3&lt;/li&gt;
 964     &lt;li&gt;Item4&lt;/li&gt;
 965   &lt;/ul&gt;
 966 &lt;/div&gt;
 967 </pre>
 968
 969           <p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a popover, like so:</p>
 970
 971 <pre class="prettyprint">
 972 &lt;header class=&quot;bar-title&quot;&gt;
 973   &lt;a href=&quot;#myPopover&quot;&gt;
 974     &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 975   &lt;/a&gt;
 976 &lt;/header&gt;
 977 </pre>
 978
 979         </article>
 980
 981         <!-- Modals -->
 982         <article class="component" id="modals">
 983           <style>
 984             /* Only for the demo page */
 985             .iphone .iphone-content .modal { position: absolute;  }
 986             .iphone .iphone-content .active { background: #cecece; }
 987           </style>
 988           <h3 class="component-title">Modals</h3>
 989
 990           <div class="component-example">
 991
 992           </div>
 993
 994 <pre class="prettyprint">
 995 &lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt;
 996
 997 &lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
 998   &lt;header class=&quot;bar-title&quot;&gt;
 999     &lt;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
1000     &lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
1001       Close
1002     &lt;/a&gt;
1003   &lt;/header&gt;
1004
1005   &lt;div class=&quot;content content-padded&quot;&gt;
1006     &lt;p&gt;The contents of my modal&lt;/p&gt;
1007   &lt;/div&gt;
1008 &lt;/div&gt;
1009 </pre>
1010
1011           <p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p>
1012
1013         </article>
1014
1015         <!-- Slider -->
1016         <article class="component" id="sliders">
1017           <h3 class="component-title">Sliders</h3>
1018           <p class="component-description">Can be used with any number of slides with any type of content.</p>
1019
1020           <div class="component-example component-example-fullbleed">
1021             <div class="slider" id="mySlider">
1022               <ul>
1023                 <li>
1024                   <img src="img/slide-1.jpg">
1025                   <span class="slide-text">&larr; Slide me</span>
1026                 </li>
1027                 <li>
1028                   <img src="img/slide-2.jpg">
1029                 </li>
1030                 <li>
1031                   <img src="img/slide-3.jpg">
1032                 </li>
1033               </ul>
1034             </div>
1035           </div>
1036
1037 <pre class="prettyprint">
1038 &lt;div class=&quot;slider&quot;&gt;
1039   &lt;ul&gt;
1040     &lt;li&gt;
1041       &lt;img src=&quot;img/slide-1.jpg&quot;&gt;
1042       &lt;span class=&quot;slide-text&quot;&gt;&larr; Slide me&lt;/span&gt;
1043     &lt;/li&gt;
1044     &lt;li&gt;
1045       &lt;img src=&quot;img/slide-2.jpg&quot;&gt;
1046     &lt;/li&gt;
1047     &lt;li&gt;
1048       &lt;img src=&quot;img/slide-3.jpg&quot;&gt;
1049     &lt;/li&gt;
1050   &lt;/ul&gt;
1051 &lt;/div&gt;
1052 </pre>
1053
1054           <p class="component-description">Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
1055
1056 <pre class="prettyprint js">
1057 // Only needed if you want to fire a callback
1058 document
1059   .querySelector('#mySlider')
1060   .addEventListener('slide', myFunction)
1061 </pre>
1062
1063         </article>
1064
1065         <!-- Push docs -->
1066         <article class="component" id="push">
1067           <h3 class="component-title">Push</h3>
1068           <p class="component-description">Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.</p>
1069
1070 <pre class="prettyprint js">
1071 &lt;!-- A one.html link --&gt;
1072 &lt;a href=&quot;two.html&quot;&gt;Two&lt;a&gt;
1073 </pre>
1074
1075           <p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. It will also update .bar-title and .bar-tab if you have them on both pages.</p>
1076
1077           <p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p>
1078
1079 <pre class="prettyprint js">
1080 &lt;!-- An one.html link that animates to two.html --&gt;
1081 &lt;a href=&quot;two.html&quot; data-transition=&quot;fade&quot;&gt;Two&lt;a&gt;
1082 </pre>
1083
1084           <p class="component-description">A working version of push:</p>
1085
1086           <div class="component-example component-example-fullbleed">
1087             <header class="bar-title">
1088               <h1 class="title">Push</h1>
1089             </header>
1090             <div class="content">
1091               <ul class="list">
1092                 <li>
1093                   <a href="two.html" data-transition="slide-in">
1094                     Load new page with push
1095                   </a>
1096                   <span class="chevron"></span>
1097                 </li>
1098               </ul>
1099             </div>
1100           </div>
1101
1102 <pre class="prettyprint push-example">
1103 &lt;header class=&quot;bar-title&quot;&gt;
1104   &lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
1105 &lt;/header&gt;
1106 &lt;div class=&quot;content&quot;&gt;
1107   &lt;ul class=&quot;list&quot;&gt;
1108       &lt;li&gt;
1109           &lt;a href=&quot;two.html&quot; data-transition=&quot;slide-in&quot;&gt;
1110               Go to page 2
1111           &lt;/a&gt;
1112           &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
1113       &lt;/li&gt;
1114   &lt;/ul&gt;
1115 &lt;/div&gt;
1116 </pre>
1117
1118           <p class="component-description">Have a link you don't want to intercepted by push? Try this:</p>
1119
1120 <pre class="prettyprint js">
1121 &lt;!-- Use data-ignore=&quot;push&quot; to prevent the push.js interception --&gt;
1122 &lt;a href=&quot;http://www.google.com&quot; data-ignore=&quot;push&quot;&gt;Google&lt;a&gt;
1123 </pre>
1124
1125           <p class="component-description">Push.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
1126
1127 <pre class="prettyprint js">
1128 // Only needed if you want to fire a callback
1129 window.addEventListener('push', myFunction);
1130 </pre>
1131
1132         </article>
1133
1134         </div>
1135       </section>
1136
1137       <section class="content-section section-informational" id="pageSetup">
1138         <div class="docs-inner-wrapper">
1139           <div class="section-header">
1140             <h2 class="section-title">Page setup</h2>
1141             <p class="section-description">3 simple rules for structuring your Ratchet pages</p>
1142           </div>
1143
1144           <ol class="steps">
1145               <li class="step">
1146               <h3 class="step-title">1. Fixed bars come first</h3>
1147               <p class="step-description">All fixed bars (<code>.bar-title, .bar-tab, .bar-header-secondary, .bar-footer</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
1148             </li>
1149             <li class="step">
1150               <h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
1151               <p class="step-description">Anything that's not a <code>.bar-</code> should be put in a div with the class "<code>content</code>". Put this div after the bars in the <code>&lt;body&gt;</code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
1152             </li>
1153             <li class="step">
1154               <h3 class="step-title">3. Don't forget your meta tags</h3>
1155               <p class="step-description">They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.</p>
1156             </li>
1157           </ol>
1158         </div>
1159       </section>
1160     </div>
1161
1162     <div class="docs-outer-wrapper docs-footer">
1163       <section class="content-section">
1164         <div class="docs-inner-wrapper">
1165           <h3>License &amp; credit</h3>
1166           <p>Ratchet is under the the MIT license, meaning you're basically free to use the framework as you please. Ratchet was lovingly crafted by <a data-ignore="push" href="http://www.twitter.com/dhg">Dave Gamache</a>, <a data-ignore="push" href="http://www.twitter.com/connors">Connor Sears</a>, and <a data-ignore="push" href="http://www.twitter.com/fat">Jacob Thornton</a>. </p>
1167           <ul class="avatars">
1168             <li>
1169               <a data-ignore="push" class="avatar" href="http://www.twitter.com/dhg">
1170                 <img src="https://secure.gravatar.com/avatar/14267e25aa6c7ef4f396afc483d6f238?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
1171               </a>
1172               <a data-ignore="push" href="https://twitter.com/dhg" class="twitter-follow-button" data-show-count="false">Follow @dhg</a>
1173             </li>
1174             <li>
1175               <a data-ignore="push" class="avatar" href="http://www.twitter.com/connors">
1176                 <img src="https://secure.gravatar.com/avatar/53d633ae4622de17906338910085275a?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
1177               </a>
1178               <a data-ignore="push" href="https://twitter.com/connors" class="twitter-follow-button" data-show-count="false">Follow @connors</a>
1179             </li>
1180             <li>
1181               <a data-ignore="push" class="avatar" href="http://www.twitter.com/fat">
1182                 <img src="https://secure.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
1183               </a>
1184               <a data-ignore="push" href="https://twitter.com/fat" class="twitter-follow-button" data-show-count="false">Follow @fat</a>
1185             </li>
1186           </ul>
1187         </div>
1188       </section>
1189     </div>
1190   </body>
1191 </html>