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="#sliders">Sliders</a></li>
  62               <li><a href="#push">Push</a></li>
  63             </ul>
  64           </li>
  65           <li class="nav-item"><a href="#pageSetup">Page setup</a></li>
  66           <li data-ignore="push" class="nav-item"><a href="http://github.com/maker/ratchet">View on Github</a></li>
  67         </ul>
  68         <h1 class="docs-masthead-title">Ratchet</h1>
  69       </div>
  70     </nav>
  71
  72     <!-- Jumbo header -->
  73     <header class="docs-outer-wrapper docs-header">
  74       <div class="docs-inner-wrapper">
  75         <hgroup class="docs-header-text">
  76           <h2 class="docs-header-subtitle">Prototype iPhone apps with simple HTML, CSS and JS components.</h2>
  77           <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>
  78         </hgroup>
  79       </div>
  80       <section class="social">
  81         <ul>
  82           <li>
  83             <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>
  84           </li>
  85           <li>
  86             <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>
  87             <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>
  88           </li>
  89           <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
  90             Follow @GoRatchet</a>
  91             <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>
  92           </li>
  93         </ul>
  94       </section>
  95     </header>
  96
  97     <div class="docs-outer-wrapper docs-content">
  98       <section class="content-section section-informational" id="gettingStarted">
  99         <div class="docs-inner-wrapper">
 100           <div class="section-header">
 101             <h2 class="section-title">Getting started</h2>
 102             <p class="section-description">Once you've downloaded Ratchet, here's what to do next.</p>
 103           </div>
 104
 105           <ol class="steps">
 106               <li class="step">
 107               <h3 class="step-title">1. Create your pages</h3>
 108               <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>
 109             </li>
 110             <li class="step">
 111               <h3 class="step-title">2. Connect pages with push.js</h3>
 112               <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>
 113             </li>
 114             <li class="step">
 115               <h3 class="step-title">3. Save the prototype to your phone</h3>
 116               <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>
 117             </li>
 118           </ol>
 119         </div>
 120       </section>
 121
 122       <!-- Banner for Mozilla/IE -->
 123       <div class="notice-banner">
 124         <p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
 125       </div>
 126
 127       <!--[if IE]>
 128       <div class="notice-banner">
 129         <p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
 130       </div>
 131       <![endif]-->
 132
 133
 134       <!-- Components -->
 135       <section class="docs-outer-wrapper content-section section-components">
 136         <div class="docs-inner-wrapper">
 137           <div class="section-header">
 138             <h2 class="section-title">Components</h2>
 139             <p class="section-description">Design patterns that serve as basic building blocks.</p>
 140           </div>
 141           <div class="iphone">
 142             <div class="iphone-content">
 143               <div id="iwindow">
 144                 <header class="bar-title">
 145                   <h1 class="title">Title</h1>
 146                 </header>
 147               </div>
 148             </div>
 149           </div>
 150
 151           <!-- Bars -->
 152           <article class="component active" id="bars">
 153             <h3 class="component-title">Title bar</h3>
 154             <p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
 155
 156             <div class="component-example component-example-fullbleed">
 157               <header class="bar-title">
 158                 <h1 class="title">Title</h1>
 159               </header>
 160             </div>
 161
 162 <pre class="prettyprint">
 163 &lt;header class=&quot;bar-title&quot;&gt;
 164   &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 165 &lt;/header&gt;
 166 </pre>
 167
 168           </article>
 169
 170           <article class="component">
 171             <h3 class="component-title">Title bar with buttons</h3>
 172             <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
 173
 174             <div class="component-example component-example-fullbleed">
 175               <header class="bar-title">
 176                 <a class="button">
 177                   Left
 178                 </a>
 179                 <h1 class="title">Title</h1>
 180                 <a class="button">
 181                   Right
 182                 </a>
 183               </header>
 184             </div>
 185
 186 <pre class="prettyprint">
 187 &lt;header class=&quot;bar-title&quot;&gt;
 188   &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 189     Left
 190   &lt;/a&gt;
 191   &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 192   &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 193     Right
 194   &lt;/a&gt;
 195 &lt;/header&gt;
 196 </pre>
 197
 198           </article>
 199           <article class="component">
 200             <h3 class="component-title">Title bar with directional buttons</h3>
 201             <p class="component-description">Directional buttons in a title bar should be used for navigational purposes.</p>
 202
 203             <div class="component-example component-example-fullbleed">
 204               <header class="bar-title">
 205                 <a class="button-prev">
 206                   Previous
 207                 </a>
 208                 <h1 class="title">Title</h1>
 209                 <a class="button-next">
 210                   Next
 211                 </a>
 212               </header>
 213             </div>
 214
 215 <pre class="prettyprint">
 216 &lt;header class=&quot;bar-title&quot;&gt;
 217   &lt;a class=&quot;button-prev&quot; href=&quot;#&quot;&gt;
 218     Previous
 219   &lt;/a&gt;
 220   &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 221   &lt;a class=&quot;button-next&quot; href=&quot;#&quot;&gt;
 222     Next
 223   &lt;/a&gt;
 224 &lt;/header&gt;
 225 </pre>
 226
 227           </article>
 228
 229           <article class="component">
 230             <h3 class="component-title">Title bar with segmented controller</h3>
 231             <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>
 232
 233             <div class="component-example component-example-fullbleed">
 234               <header class="bar-title">
 235                 <a class="button">
 236                   Left
 237                 </a>
 238                 <ul class="segmented-controller">
 239                   <li class="active">
 240                     <a>One</a>
 241                   </li>
 242                   <li>
 243                     <a>Two</a>
 244                   </li>
 245                   <li>
 246                     <a>Three</a>
 247                   </li>
 248                 </ul>
 249                 <a class="button">
 250                   Right
 251                 </a>
 252               </header>
 253             </div>
 254
 255 <pre class="prettyprint">
 256 &lt;header class=&quot;bar-title&quot;&gt;
 257   &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 258     Left
 259   &lt;/a&gt;
 260   &lt;ul class=&quot;segmented-controller&quot;&gt;
 261     &lt;li class=&quot;active&quot;&gt;
 262       &lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
 263     &lt;/li&gt;
 264     &lt;li&gt;
 265       &lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
 266     &lt;/li&gt;
 267     &lt;li&gt;
 268       &lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
 269     &lt;/li&gt;
 270   &lt;/ul&gt;
 271   &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 272     Right
 273   &lt;/a&gt;
 274 &lt;/header&gt;
 275 </pre>
 276
 277           </article>
 278
 279           <article class="component">
 280             <h3 class="component-title">Tab bar</h3>
 281             <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>
 282
 283             <div class="component-example component-example-fullbleed">
 284               <nav class="bar-tab">
 285                 <ul class="tab-inner">
 286                   <li class="tab-item active">
 287                     <a>
 288                       <img class="tab-icon" src="img/icon-home.png">
 289                       <div class="tab-label">Label</div>
 290                     </a>
 291                   </li>
 292                   <li class="tab-item">
 293                     <a>
 294                       <img class="tab-icon" src="img/icon-profile.png">
 295                       <div class="tab-label">Label</div>
 296                     </a>
 297                   </li>
 298                   <li class="tab-item">
 299                     <a>
 300                       <img class="tab-icon" src="img/icon-messages.png">
 301                       <div class="tab-label">Label</div>
 302                     </a>
 303                   </li>
 304                   <li class="tab-item">
 305                     <a>
 306                       <img class="tab-icon" src="img/icon-hamburger.png">
 307                       <div class="tab-label">Label</div>
 308                     </a>
 309                   </li>
 310                   <li class="tab-item">
 311                     <a href="http://starwars.com">
 312                       <img class="tab-icon" src="img/icon-settings.png">
 313                       <div class="tab-label">Label</div>
 314                     </a>
 315                   </li>
 316                 </ul>
 317               </nav>
 318             </div>
 319
 320 <pre class="prettyprint">
 321 &lt;nav class=&quot;bar-tab&quot;&gt;
 322   &lt;ul class=&quot;tab-inner&quot;&gt;
 323     &lt;li class=&quot;tab-item active&quot;&gt;
 324       &lt;a href=&quot;&quot;&gt;
 325         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-home.png&quot;&gt;
 326         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
 327       &lt;/a&gt;
 328     &lt;/li&gt;
 329     &lt;li class=&quot;tab-item&quot;&gt;
 330       &lt;a href=&quot;&quot;&gt;
 331         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-profile.png&quot;&gt;
 332         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
 333       &lt;/a&gt;
 334     &lt;/li&gt;
 335     &lt;li class=&quot;tab-item&quot;&gt;
 336       &lt;a href=&quot;&quot;&gt;
 337         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-messages.png&quot;&gt;
 338         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
 339       &lt;/a&gt;
 340     &lt;/li&gt;
 341     &lt;li class=&quot;tab-item&quot;&gt;
 342       &lt;a href=&quot;&quot;&gt;
 343         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-hamburger.png&quot;&gt;
 344         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
 345       &lt;/a&gt;
 346     &lt;/li&gt;
 347     &lt;li class=&quot;tab-item&quot;&gt;
 348       &lt;a href=&quot;&quot;&gt;
 349         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-settings.png&quot;&gt;
 350         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
 351       &lt;/a&gt;
 352     &lt;/li&gt;
 353   &lt;/ul&gt;
 354 &lt;/nav&gt;
 355 </pre>
 356
 357           <p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
 358           <p class="component-note"><strong>Credit:</strong> Icons by Marc Haumann and Spencer Cohen from The Noun Project</p>
 359         </article>
 360
 361         <article class="component">
 362             <h3 class="component-title">Standard bars</h3>
 363             <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>
 364
 365             <div class="component-example component-example-fullbleed">
 366               <!-- Segmented controller in standard bar fixed to top -->
 367               <nav class="bar-standard">
 368                 <ul class="segmented-controller">
 369                   <li class="active">
 370                     <a>Thing one</a>
 371                   </li>
 372                   <li>
 373                     <a>Thing two</a>
 374                   </li>
 375                   <li>
 376                     <a>Thing three</a>
 377                   </li>
 378                 </ul>
 379               </nav>
 380
 381               <!-- Block button in standard bar fixed below top bar -->
 382               <div class="bar-standard bar-header-secondary">
 383                 <a class="button-block">Block level button</a>
 384               </div>
 385             </div>
 386
 387 <pre class="prettyprint">
 388 &lt;!-- Segmented controller in standard bar fixed to top --&gt;
 389 &lt;nav class=&quot;bar-standard&quot;&gt;
 390   &lt;ul class=&quot;segmented-controller&quot;&gt;
 391     &lt;li class=&quot;active&quot;&gt;
 392       &lt;a href=&quot;#&quot;&gt;Thing one&lt;/a&gt;
 393     &lt;/li&gt;
 394     &lt;li&gt;
 395       &lt;a href=&quot;#&quot;&gt;Thing two&lt;/a&gt;
 396     &lt;/li&gt;
 397     &lt;li&gt;
 398       &lt;a href=&quot;#&quot;&gt;Thing three&lt;/a&gt;
 399     &lt;/li&gt;
 400   &lt;/ul&gt;
 401 &lt;/nav&gt;
 402 &lt;div class=&quot;bar-standard bar-header-secondary&quot;&gt;
 403   &lt;a class=&quot;button-block&quot;&gt;Block level button&lt;/a&gt;
 404 &lt;/div&gt;
 405 </pre>
 406
 407         </article>
 408
 409         <!-- Lists -->
 410         <article class="component" id="lists">
 411           <h3 class="component-title">Lists</h3>
 412           <p class="component-description">Lists can be used for organizing data, showing collections of links or a series of controls.</p>
 413
 414           <div class="component-example component-example-fullbleed">
 415             <ul class="list">
 416               <li>List item 1</li>
 417               <li>List item 2</li>
 418               <li class="list-divider">List Divider</li>
 419               <li>List item 3</li>
 420             </ul>
 421           </div>
 422
 423 <pre class="prettyprint">
 424 &lt;ul class=&quot;list&quot;&gt;
 425   &lt;li&gt;List item 1&lt;/li&gt;
 426   &lt;li&gt;List item 2&lt;/li&gt;
 427   &lt;li class=&quot;list-divider&quot;&gt;List Divider&lt;/li&gt;
 428   &lt;li&gt;List item 3&lt;/li&gt;
 429 &lt;/ul&gt;
 430 </pre>
 431
 432         </article>
 433
 434         <article class="component">
 435           <h3 class="component-title">List with chevrons</h3>
 436           <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>
 437
 438           <div class="component-example component-example-fullbleed">
 439             <ul class="list">
 440               <li>
 441                 <a>
 442                   List item 1
 443                   <span class="chevron"></span>
 444                 </a>
 445               </li>
 446               <li>
 447                 <a>
 448                   List item 2
 449                   <span class="chevron"></span>
 450                 </a>
 451               </li>
 452               <li>
 453                 <a>
 454                   List item 3
 455                   <span class="chevron"></span>
 456                 </a>
 457               </li>
 458             </ul>
 459           </div>
 460
 461 <pre class="prettyprint">
 462 &lt;ul class=&quot;list&quot;&gt;
 463   &lt;li&gt;
 464     &lt;a href=&quot;#&quot;&gt;
 465       List item 1
 466       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 467     &lt;/a&gt;
 468   &lt;/li&gt;
 469   &lt;li&gt;
 470     &lt;a href=&quot;#&quot;&gt;
 471       List item 2
 472       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 473     &lt;/a&gt;
 474   &lt;/li&gt;
 475   &lt;li&gt;
 476     &lt;a href=&quot;#&quot;&gt;
 477       List item 3
 478       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 479     &lt;/a&gt;
 480   &lt;/li&gt;
 481 &lt;/ul&gt;
 482 </pre>
 483
 484         </article>
 485
 486         <article class="component">
 487           <h3 class="component-title">List with counts</h3>
 488
 489           <div class="component-example component-example-fullbleed">
 490             <ul class="list">
 491               <li>List item 1 <span class="count">4</span></li>
 492               <li>List item 2 <span class="count">1</span></li>
 493               <li>List item 3 <span class="count">5</span></li>
 494             </ul>
 495           </div>
 496
 497 <pre class="prettyprint">
 498 &lt;ul class=&quot;list&quot;&gt;
 499   &lt;li&gt;List item 1 &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
 500   &lt;li&gt;List item 2 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/li&gt;
 501   &lt;li&gt;List item 3 &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;&lt;/li&gt;
 502 &lt;/ul&gt;
 503 </pre>
 504
 505         </article>
 506
 507         <article class="component">
 508           <h3 class="component-title">List with counts and chevrons</h3>
 509
 510           <div class="component-example component-example-fullbleed">
 511             <ul class="list">
 512               <li>
 513                 <a>
 514                   List item 1
 515                   <span class="chevron"></span>
 516                   <span class="count">4</span>
 517                 </a>
 518               </li>
 519               <li>
 520                 <a>
 521                   List item 2
 522                   <span class="chevron"></span>
 523                   <span class="count">1</span>
 524                 </a>
 525               </li>
 526               <li>
 527                 <a>
 528                   List item 3
 529                   <span class="chevron"></span>
 530                   <span class="count">5</span>
 531                 </a>
 532               </li>
 533             </ul>
 534           </div>
 535
 536 <pre class="prettyprint">
 537 &lt;ul class=&quot;list&quot;&gt;
 538   &lt;li&gt;
 539     &lt;a href=&quot;#&quot;&gt;
 540       List item 1
 541       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 542       &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;
 543     &lt;/a&gt;
 544   &lt;/li&gt;
 545   &lt;li&gt;
 546     &lt;a href=&quot;#&quot;&gt;
 547       List item 2
 548       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 549       &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
 550     &lt;/a&gt;
 551   &lt;/li&gt;
 552   &lt;li&gt;
 553     &lt;a href=&quot;#&quot;&gt;
 554       List item 3
 555       &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
 556       &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;
 557     &lt;/a&gt;
 558   &lt;/li&gt;
 559 &lt;/ul&gt;
 560 </pre>
 561
 562         </article>
 563
 564         <article class="component">
 565           <h3 class="component-title">List with buttons</h3>
 566
 567           <div class="component-example component-example-fullbleed">
 568             <ul class="list">
 569               <li>List item 1 <a class="button">Button</a></li>
 570               <li>List item 2 <a class="button-main">Button</a></li>
 571               <li>List item 3 <a class="button-positive">Button</a></li>
 572               <li>List item 4 <a class="button-negative">Button</a></li>
 573             </ul>
 574           </div>
 575
 576 <pre class="prettyprint">
 577 &lt;ul class=&quot;list&quot;&gt;
 578   &lt;li&gt;List item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
 579   &lt;li&gt;List item 2 &lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
 580   &lt;li&gt;List item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
 581   &lt;li&gt;List item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
 582 &lt;/ul&gt;
 583 </pre>
 584
 585         </article>
 586
 587         <article class="component">
 588           <h3 class="component-title">List with toggles</h3>
 589
 590           <div class="component-example component-example-fullbleed">
 591             <ul class="list">
 592               <li>
 593                 List item 1
 594                 <div class="toggle">
 595                   <div class="toggle-handle"></div>
 596                 </div>
 597               </li>
 598               <li>
 599                 List item 2
 600                 <div class="toggle active">
 601                   <div class="toggle-handle"></div>
 602                 </div>
 603               </li>
 604               <li>
 605                 List item 3
 606                 <div class="toggle">
 607                   <div class="toggle-handle"></div>
 608                 </div>
 609               </li>
 610             </ul>
 611           </div>
 612
 613 <pre class="prettyprint">
 614 &lt;ul class=&quot;list&quot;&gt;
 615   &lt;li&gt;
 616     List item 1
 617     &lt;div class=&quot;toggle&quot;&gt;
 618       &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 619     &lt;/div&gt;
 620   &lt;/li&gt;
 621   &lt;li&gt;
 622     List item 2
 623     &lt;div class=&quot;toggle active&quot;&gt;
 624       &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 625     &lt;/div&gt;
 626   &lt;/li&gt;
 627   &lt;li&gt;
 628     List item 3
 629     &lt;div class=&quot;toggle&quot;&gt;
 630       &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 631     &lt;/div&gt;
 632   &lt;/li&gt;
 633 &lt;/ul&gt;
 634 </pre>
 635
 636         </article>
 637
 638         <article class="component">
 639           <h3 class="component-title">Inset list</h3>
 640
 641           <div class="component-example">
 642             <ul class="list inset">
 643               <li>List item 1</li>
 644               <li>List item 2</li>
 645               <li class="list-divider">List Divider</li>
 646               <li>List item 3</li>
 647               <li>List item 4</li>
 648             </ul>
 649           </div>
 650
 651 <pre class="prettyprint">
 652 &lt;ul class=&quot;list inset&quot;&gt;
 653   &lt;li&gt;List item 1&lt;/li&gt;
 654   &lt;li&gt;List item 2&lt;/li&gt;
 655   &lt;li class=&quot;list-divider&quot;&gt;List Divider&lt;/li&gt;
 656   &lt;li&gt;List item 3&lt;/li&gt;
 657   &lt;li&gt;List item 4&lt;/li&gt;
 658 &lt;/ul&gt;
 659 </pre>
 660
 661         </article>
 662
 663         <!-- Buttons -->
 664         <article class="component" id="buttons">
 665           <h3 class="component-title">Buttons</h3>
 666           <p class="component-description">Buttons come in four flavors and should be used for user actions.</p>
 667
 668           <div class="component-example">
 669             <a class="button">Button</a>
 670             <a class="button-main">Button</a>
 671             <a class="button-positive">Button</a>
 672             <a class="button-negative">Button</a>
 673           </div>
 674
 675 <pre class="prettyprint">
 676 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;
 677 &lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;
 678 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;
 679 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;
 680 </pre>
 681
 682         </article>
 683
 684         <article class="component" id="buttonsCounts">
 685           <h3 class="component-title">Buttons with counts</h3>
 686
 687           <div class="component-example">
 688             <a class="button">Count button<span class="count">1</span></a>
 689             <a class="button-main">Count button<span class="count">1</span></a>
 690             <a class="button-positive">Count button<span class="count">1</span></a>
 691             <a class="button-negative">Count button<span class="count">1</span></a>
 692           </div>
 693
 694 <pre class="prettyprint">
 695 &lt;a class=&quot;button&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 696 &lt;a class=&quot;button-main&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 697 &lt;a class=&quot;button-positive&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 698 &lt;a class=&quot;button-negative&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 699 </pre>
 700
 701         </article>
 702
 703         <article class="component" id="blockButtons">
 704           <h3 class="component-title">Block buttons</h3>
 705
 706           <div class="component-example">
 707             <a class="button-block">Block button</a>
 708             <a class="button-main button-block">Block button</a>
 709             <a class="button-positive button-block">Block button</a>
 710             <a class="button-negative button-block">Block button</a>
 711           </div>
 712
 713 <pre class="prettyprint">
 714 &lt;a class=&quot;button-block&quot;&gt;Block button&lt;/a&gt;
 715 &lt;a class=&quot;button-main button-block&quot;&gt;Block button&lt;/a&gt;
 716 &lt;a class=&quot;button-positive button-block&quot;&gt;Block button&lt;/a&gt;
 717 &lt;a class=&quot;button-negative button-block&quot;&gt;Block button&lt;/a&gt;
 718 </pre>
 719
 720         </article>
 721
 722         <!-- Segmented Controller -->
 723         <article class="component" id="segmentedControllers">
 724           <h3 class="component-title">Segmented controller</h3>
 725           <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>
 726
 727           <div class="component-example">
 728             <ul class="segmented-controller">
 729               <li class="active">
 730                 <a href="#item1mobile">Thing one</a>
 731               </li>
 732               <li>
 733                 <a href="#item2mobile">Thing two</a>
 734               </li>
 735               <li>
 736                 <a href="#item3mobile">Thing three</a>
 737               </li>
 738             </ul>
 739             <ul class="inset list">
 740               <li id="item1mobile" class="segmented-controller-item active">
 741                 Item 1
 742               </li>
 743               <li id="item2mobile" class="segmented-controller-item">
 744                 Item 2
 745               </li>
 746               <li id="item3mobile" class="segmented-controller-item">
 747                 Item 3
 748               </li>
 749             </ul>
 750           </div>
 751
 752 <pre class="prettyprint">
 753 &lt;ul class=&quot;segmented-controller&quot;&gt;
 754   &lt;li class=&quot;active&quot;&gt;
 755     &lt;a href=&quot;#item1&quot;&gt;Thing one&lt;/a&gt;
 756   &lt;/li&gt;
 757   &lt;li&gt;
 758     &lt;a href=&quot;#item2&quot;&gt;Thing two&lt;/a&gt;
 759   &lt;/li&gt;
 760   &lt;li&gt;
 761     &lt;a href=&quot;#item3&quot;&gt;Thing three&lt;/a&gt;
 762   &lt;/li&gt;
 763 &lt;/ul&gt;
 764 &lt;ul class=&quot;inset list&quot;&gt;
 765   &lt;li id=&quot;item1&quot; class=&quot;segmented-controller-item active&quot;&gt;
 766     Item 1
 767   &lt;/li&gt;
 768   &lt;li id=&quot;item2&quot; class=&quot;segmented-controller-item&quot;&gt;
 769     Item 2
 770   &lt;/li&gt;
 771   &lt;li id=&quot;item3&quot; class=&quot;segmented-controller-item&quot;&gt;
 772     Item 3
 773   &lt;/li&gt;
 774 &lt;/ul&gt;
 775 </pre>
 776
 777         </article>
 778
 779         <!-- Counts -->
 780         <article class="component" id="counts">
 781           <h3 class="component-title">Counts</h3>
 782           <p class="component-description">Counts come in four flavors and should be used to indicate "how many" of something there are.</p>
 783
 784           <div class="component-example">
 785             <span class="count">1</span>
 786             <span class="count-main">2</span>
 787             <span class="count-positive">3</span>
 788             <span class="count-negative">4</span>
 789           </div>
 790
 791 <pre class="prettyprint">
 792 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
 793 &lt;span class=&quot;count-main&quot;&gt;2&lt;/span&gt;
 794 &lt;span class=&quot;count-positive&quot;&gt;3&lt;/span&gt;
 795 &lt;span class=&quot;count-negative&quot;&gt;4&lt;/span&gt;
 796 </pre>
 797
 798         </article>
 799
 800         <!-- Forms -->
 801         <article class="component" id="forms">
 802           <h3 class="component-title">Forms</h3>
 803
 804           <div class="component-example">
 805             <form>
 806               <input type="text" placeholder="Full name">
 807               <input type="search" placeholder="Search">
 808               <textarea rows="5"></textarea>
 809               <a class="button button-block">Choose existing</a>
 810             </form>
 811           </div>
 812
 813 <pre class="prettyprint">
 814 &lt;form&gt;
 815   &lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
 816   &lt;input type=&quot;search&quot; placeholder=&quot;Search&quot;&gt;
 817   &lt;textarea rows=&quot;5&quot;&gt;&lt;/textarea&gt;
 818   &lt;a class=&quot;button button-block&quot;&gt;Choose existing&lt;/a&gt;
 819 &lt;/form&gt;
 820 </pre>
 821
 822         </article>
 823
 824         <!-- Form with input group -->
 825         <article class="component" id="formsWithInputGroup">
 826           <h3 class="component-title">Form with input group</h3>
 827
 828           <div class="component-example">
 829             <form class="input-group">
 830               <input type="text" placeholder="Full name">
 831               <input type="email" placeholder="Email">
 832               <input type="text" placeholder="Username">
 833             </form>
 834           </div>
 835
 836 <pre class="prettyprint">
 837 &lt;form&gt;
 838   &lt;div class=&quot;input-group&quot;&gt;
 839     &lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
 840     &lt;input type=&quot;email&quot; placeholder=&quot;Email&quot;&gt;
 841     &lt;input type=&quot;text&quot; placeholder=&quot;Username&quot;&gt;
 842   &lt;/div&gt;
 843 &lt;/form&gt;
 844 </pre>
 845
 846         </article>
 847
 848         <!-- Form with input group and labels -->
 849         <article class="component" id="formsWithInputGroupAndLabels">
 850           <h3 class="component-title">Form with input group and labels</h3>
 851
 852           <div class="component-example">
 853             <form class="input-group">
 854               <div class="input-row">
 855                 <label>Full name</label>
 856                 <input type="text" placeholder="Mister Ratchet">
 857               </div>
 858               <div class="input-row">
 859                 <label>Email</label>
 860                 <input type="email" placeholder="ratchetframework@gmail.com">
 861               </div>
 862               <div class="input-row">
 863                 <label>Username</label>
 864                 <input type="text" placeholder="goRatchet">
 865               </div>
 866             </form>
 867           </div>
 868
 869 <pre class="prettyprint">
 870 &lt;form&gt;
 871   &lt;div class=&quot;input-group&quot;&gt;
 872     &lt;div class=&quot;input-row&quot;&gt;
 873       &lt;label&gt;Full name&lt;/label&gt;
 874       &lt;input type=&quot;text&quot; placeholder=&quot;Mister Ratchet&quot;&gt;
 875     &lt;/div&gt;
 876     &lt;div class=&quot;input-row&quot;&gt;
 877       &lt;label&gt;Email&lt;/label&gt;
 878       &lt;input type=&quot;email&quot; placeholder=&quot;ratchetframework@gmail.com&quot;&gt;
 879     &lt;/div&gt;
 880     &lt;div class=&quot;input-row&quot;&gt;
 881       &lt;label&gt;Username&lt;/label&gt;
 882       &lt;input type=&quot;text&quot; placeholder=&quot;goRatchet&quot;&gt;
 883     &lt;/div&gt;
 884   &lt;/div&gt;
 885 &lt;/form&gt;
 886 </pre>
 887
 888         </article>
 889
 890         <!-- Toggle -->
 891         <article class="component" id="toggles">
 892           <h3 class="component-title">Toggles</h3>
 893           <p class="component-description">Toggles can be used by sliding or tapping the control.</p>
 894
 895           <div class="component-example">
 896             <div class="toggle active">
 897               <div class="toggle-handle"></div>
 898             </div>
 899             <div class="toggle">
 900               <div class="toggle-handle"></div>
 901             </div>
 902           </div>
 903
 904 <pre class="prettyprint">
 905 &lt;div class=&quot;toggle active&quot;&gt;
 906   &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 907 &lt;/div&gt;
 908 &lt;div class=&quot;toggle&quot;&gt;
 909   &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 910 &lt;/div&gt;
 911 </pre>
 912
 913           <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>
 914
 915 <pre class="prettyprint js">
 916 // Only needed if you want to fire a callback
 917 document
 918   .querySelector('#myToggle')
 919   .addEventListener('toggle', myFunction)
 920 </pre>
 921
 922         </article>
 923
 924         <!-- Popovers -->
 925         <article class="component" id="popovers">
 926           <h3 class="component-title">Popovers</h3>
 927
 928           <div class="component-example">
 929             <div id="popover" class="popover">
 930               <header class="popover-header">
 931                 <a class="button">
 932                   Left
 933                 </a>
 934                 <h3 class="title">Popover title</h3>
 935                 <a class="button">
 936                   Right
 937                 </a>
 938               </header>
 939               <ul class="list">
 940                 <li>Item1</li>
 941                 <li>Item2</li>
 942                 <li>Item3</li>
 943                 <li>Item4</li>
 944               </ul>
 945             </div>
 946           </div>
 947
 948 <pre class="prettyprint">
 949 &lt;div id=&quot;myPopover&quot; class=&quot;popover&quot;&gt;
 950   &lt;header class=&quot;popover-header&quot;&gt;
 951     &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 952       Left
 953     &lt;/a&gt;
 954     &lt;h3 class=&quot;title&quot;&gt;Popover title&lt;/h3&gt;
 955     &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
 956       Right
 957     &lt;/a&gt;
 958   &lt;/header&gt;
 959   &lt;ul class=&quot;list&quot;&gt;
 960     &lt;li&gt;Item1&lt;/li&gt;
 961     &lt;li&gt;Item2&lt;/li&gt;
 962     &lt;li&gt;Item3&lt;/li&gt;
 963     &lt;li&gt;Item4&lt;/li&gt;
 964   &lt;/ul&gt;
 965 &lt;/div&gt;
 966 </pre>
 967
 968           <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>
 969
 970 <pre class="prettyprint">
 971 &lt;header class=&quot;bar-title&quot;&gt;
 972   &lt;a href=&quot;#myPopover&quot;&gt;
 973     &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 974   &lt;/a&gt;
 975 &lt;/header&gt;
 976 </pre>
 977
 978         </article>
 979
 980         <!-- Slider -->
 981         <article class="component" id="sliders">
 982           <h3 class="component-title">Sliders</h3>
 983           <p class="component-description">Can be used with any number of slides with any type of content.</p>
 984
 985           <div class="component-example component-example-fullbleed">
 986             <div class="slider" id="mySlider">
 987               <ul>
 988                 <li>
 989                   <img src="img/slide-1.jpg">
 990                   <span class="slide-text">&larr; Slide me</span>
 991                 </li>
 992                 <li>
 993                   <img src="img/slide-2.jpg">
 994                 </li>
 995                 <li>
 996                   <img src="img/slide-3.jpg">
 997                 </li>
 998               </ul>
 999             </div>
1000           </div>
1001
1002 <pre class="prettyprint">
1003 &lt;div class=&quot;slider&quot;&gt;
1004   &lt;ul&gt;
1005     &lt;li&gt;
1006       &lt;img src=&quot;img/slide-1.jpg&quot;&gt;
1007       &lt;span class=&quot;slide-text&quot;&gt;&larr; Slide me&lt;/span&gt;
1008     &lt;/li&gt;
1009     &lt;li&gt;
1010       &lt;img src=&quot;img/slide-2.jpg&quot;&gt;
1011     &lt;/li&gt;
1012     &lt;li&gt;
1013       &lt;img src=&quot;img/slide-3.jpg&quot;&gt;
1014     &lt;/li&gt;
1015   &lt;/ul&gt;
1016 &lt;/div&gt;
1017 </pre>
1018
1019           <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>
1020
1021 <pre class="prettyprint js">
1022 // Only needed if you want to fire a callback
1023 document
1024   .querySelector('#mySlider')
1025   .addEventListener('slide', myFunction)
1026 </pre>
1027
1028         </article>
1029
1030         <!-- Push docs -->
1031         <article class="component" id="push">
1032           <h3 class="component-title">Push</h3>
1033           <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>
1034
1035 <pre class="prettyprint js">
1036 &lt;!-- A one.html link --&gt;
1037 &lt;a href=&quot;two.html&quot;&gt;Two&lt;a&gt;
1038 </pre>
1039
1040           <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>
1041
1042           <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>
1043
1044 <pre class="prettyprint js">
1045 &lt;!-- An one.html link that animates to two.html --&gt;
1046 &lt;a href=&quot;two.html&quot; data-transition=&quot;fade&quot;&gt;Two&lt;a&gt;
1047 </pre>
1048
1049           <p class="component-description">A working version of push:</p>
1050
1051           <div class="component-example component-example-fullbleed">
1052             <header class="bar-title">
1053               <h1 class="title">Push</h1>
1054             </header>
1055             <div class="content">
1056               <ul class="list">
1057                 <li>
1058                   <a href="two.html" data-transition="slide-in">
1059                     Load new page with push
1060                   </a>
1061                   <span class="chevron"></span>
1062                 </li>
1063               </ul>
1064             </div>
1065           </div>
1066
1067 <pre class="prettyprint push-example">
1068 &lt;header class=&quot;bar-title&quot;&gt;
1069   &lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
1070 &lt;/header&gt;
1071 &lt;div class=&quot;content&quot;&gt;
1072   &lt;ul class=&quot;list&quot;&gt;
1073       &lt;li&gt;
1074           &lt;a href=&quot;two.html&quot; data-transition=&quot;slide-in&quot;&gt;
1075               Go to page 2
1076           &lt;/a&gt;
1077           &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
1078       &lt;/li&gt;
1079   &lt;/ul&gt;
1080 &lt;/div&gt;
1081 </pre>
1082
1083           <p class="component-description">Have a link you don't want to intercepted by push? Try this:</p>
1084
1085 <pre class="prettyprint js">
1086 &lt;!-- Use data-ignore=&quot;push&quot; to prevent the push.js interception --&gt;
1087 &lt;a href=&quot;http://www.google.com&quot; data-ignore=&quot;push&quot;&gt;Google&lt;a&gt;
1088 </pre>
1089
1090           <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>
1091
1092 <pre class="prettyprint js">
1093 // Only needed if you want to fire a callback
1094 window.addEventListener('push', myFunction);
1095 </pre>
1096
1097         </article>
1098
1099         </div>
1100       </section>
1101
1102       <section class="content-section section-informational" id="pageSetup">
1103         <div class="docs-inner-wrapper">
1104           <div class="section-header">
1105             <h2 class="section-title">Page setup</h2>
1106             <p class="section-description">3 simple rules for structuring your Ratchet pages</p>
1107           </div>
1108
1109           <ol class="steps">
1110               <li class="step">
1111               <h3 class="step-title">1. Fixed bars come first</h3>
1112               <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>
1113             </li>
1114             <li class="step">
1115               <h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
1116               <p class="step-description">Anything that's not a <code>.bar-title</code> or <code>.bar-tab</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>
1117             </li>
1118             <li class="step">
1119               <h3 class="step-title">3. Don't forget your meta tags</h3>
1120               <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>
1121             </li>
1122           </ol>
1123         </div>
1124       </section>
1125     </div>
1126
1127     <div class="docs-outer-wrapper docs-footer">
1128       <section class="content-section">
1129         <div class="docs-inner-wrapper">
1130           <h3>License &amp; credit</h3>
1131           <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>
1132           <ul class="avatars">
1133             <li>
1134               <a data-ignore="push" class="avatar" href="http://www.twitter.com/dhg">
1135                 <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="">
1136               </a>
1137               <a data-ignore="push" href="https://twitter.com/dhg" class="twitter-follow-button" data-show-count="false">Follow @dhg</a>
1138             </li>
1139             <li>
1140               <a data-ignore="push" class="avatar" href="http://www.twitter.com/connors">
1141                 <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="">
1142               </a>
1143               <a data-ignore="push" href="https://twitter.com/connors" class="twitter-follow-button" data-show-count="false">Follow @connors</a>
1144             </li>
1145             <li>
1146               <a data-ignore="push" class="avatar" href="http://www.twitter.com/fat">
1147                 <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="">
1148               </a>
1149               <a data-ignore="push" href="https://twitter.com/fat" class="twitter-follow-button" data-show-count="false">Follow @fat</a>
1150             </li>
1151           </ul>
1152         </div>
1153       </section>
1154     </div>
1155   </body>
1156 </html>