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>
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">
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">
30 var _gaq = _gaq || [];
31 _gaq.push(['_setAccount', 'UA-36050008-1']);
32 _gaq.push(['_trackPageview']);
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);
43 <body ontouchstart="">
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>
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>
69 <h1 class="docs-masthead-title">Ratchet</h1>
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>
81 <section class="social">
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>
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>
90 <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
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>
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>
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>
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>
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>
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>
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>
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>
143 <div class="iphone-content">
145 <header class="bar-title">
146 <h1 class="title">Title</h1>
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>
157 <div class="component-example component-example-fullbleed">
158 <header class="bar-title">
159 <h1 class="title">Title</h1>
163 <pre class="prettyprint">
164 <header class="bar-title">
165 <h1 class="title">Title</h1>
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>
175 <div class="component-example component-example-fullbleed">
176 <header class="bar-title">
180 <h1 class="title">Title</h1>
187 <pre class="prettyprint">
188 <header class="bar-title">
189 <a class="button" href="#">
192 <h1 class="title">Title</h1>
193 <a class="button" href="#">
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>
204 <div class="component-example component-example-fullbleed">
205 <header class="bar-title">
206 <a class="button-prev">
209 <h1 class="title">Title</h1>
210 <a class="button-next">
216 <pre class="prettyprint">
217 <header class="bar-title">
218 <a class="button-prev" href="#">
221 <h1 class="title">Title</h1>
222 <a class="button-next" href="#">
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>
234 <div class="component-example component-example-fullbleed">
235 <header class="bar-title">
239 <ul class="segmented-controller">
256 <pre class="prettyprint">
257 <header class="bar-title">
258 <a class="button" href="#">
261 <ul class="segmented-controller">
262 <li class="active">
263 <a href="#">One</a>
266 <a href="#">Two</a>
269 <a href="#">Three</a>
272 <a class="button" href="#">
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>
284 <div class="component-example component-example-fullbleed">
285 <nav class="bar-tab">
286 <ul class="tab-inner">
287 <li class="tab-item active">
289 <img class="tab-icon" src="img/icon-home.png">
290 <div class="tab-label">Label</div>
293 <li class="tab-item">
295 <img class="tab-icon" src="img/icon-profile.png">
296 <div class="tab-label">Label</div>
299 <li class="tab-item">
301 <img class="tab-icon" src="img/icon-messages.png">
302 <div class="tab-label">Label</div>
305 <li class="tab-item">
307 <img class="tab-icon" src="img/icon-hamburger.png">
308 <div class="tab-label">Label</div>
311 <li class="tab-item">
313 <img class="tab-icon" src="img/icon-settings.png">
314 <div class="tab-label">Label</div>
321 <pre class="prettyprint">
322 <nav class="bar-tab">
323 <ul class="tab-inner">
324 <li class="tab-item active">
325 <a href="#">
326 <img class="tab-icon" src="img/icon-home.png">
327 <div class="tab-label">Label</div>
330 <li class="tab-item">
331 <a href="#">
332 <img class="tab-icon" src="img/icon-profile.png">
333 <div class="tab-label">Label</div>
336 <li class="tab-item">
337 <a href="#">
338 <img class="tab-icon" src="img/icon-messages.png">
339 <div class="tab-label">Label</div>
342 <li class="tab-item">
343 <a href="#">
344 <img class="tab-icon" src="img/icon-hamburger.png">
345 <div class="tab-label">Label</div>
348 <li class="tab-item">
349 <a href="#">
350 <img class="tab-icon" src="img/icon-settings.png">
351 <div class="tab-label">Label</div>
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>
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>
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">
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>
388 <pre class="prettyprint">
389 <!-- Segmented controller in standard bar fixed to top -->
390 <nav class="bar-standard">
391 <ul class="segmented-controller">
392 <li class="active">
393 <a href="#">Thing one</a>
396 <a href="#">Thing two</a>
399 <a href="#">Thing three</a>
403 <div class="bar-standard bar-header-secondary">
404 <a class="button-block">Block level button</a>
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>
415 <div class="component-example component-example-fullbleed">
419 <li class="list-divider">List Divider</li>
424 <pre class="prettyprint">
425 <ul class="list">
426 <li>List item 1</li>
427 <li>List item 2</li>
428 <li class="list-divider">List Divider</li>
429 <li>List item 3</li>
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>
439 <div class="component-example component-example-fullbleed">
444 <span class="chevron"></span>
450 <span class="chevron"></span>
456 <span class="chevron"></span>
462 <pre class="prettyprint">
463 <ul class="list">
465 <a href="#">
467 <span class="chevron"></span>
471 <a href="#">
473 <span class="chevron"></span>
477 <a href="#">
479 <span class="chevron"></span>
487 <article class="component">
488 <h3 class="component-title">List with counts</h3>
490 <div class="component-example component-example-fullbleed">
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>
498 <pre class="prettyprint">
499 <ul class="list">
500 <li>List item 1 <span class="count">4</span></li>
501 <li>List item 2 <span class="count">1</span></li>
502 <li>List item 3 <span class="count">5</span></li>
508 <article class="component">
509 <h3 class="component-title">List with counts and chevrons</h3>
511 <div class="component-example component-example-fullbleed">
516 <span class="chevron"></span>
517 <span class="count">4</span>
523 <span class="chevron"></span>
524 <span class="count">1</span>
530 <span class="chevron"></span>
531 <span class="count">5</span>
537 <pre class="prettyprint">
538 <ul class="list">
540 <a href="#">
542 <span class="chevron"></span>
543 <span class="count">4</span>
547 <a href="#">
549 <span class="chevron"></span>
550 <span class="count">1</span>
554 <a href="#">
556 <span class="chevron"></span>
557 <span class="count">5</span>
565 <article class="component">
566 <h3 class="component-title">List with buttons</h3>
568 <div class="component-example component-example-fullbleed">
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>
577 <pre class="prettyprint">
578 <ul class="list">
579 <li>List item 1 <a class="button">Button</a></li>
580 <li>List item 2 <a class="button-main">Button</a></li>
581 <li>List item 3 <a class="button-positive">Button</a></li>
582 <li>List item 4 <a class="button-negative">Button</a></li>
588 <article class="component">
589 <h3 class="component-title">List with toggles</h3>
591 <div class="component-example component-example-fullbleed">
596 <div class="toggle-handle"></div>
601 <div class="toggle active">
602 <div class="toggle-handle"></div>
608 <div class="toggle-handle"></div>
614 <pre class="prettyprint">
615 <ul class="list">
618 <div class="toggle">
619 <div class="toggle-handle"></div>
624 <div class="toggle active">
625 <div class="toggle-handle"></div>
630 <div class="toggle">
631 <div class="toggle-handle"></div>
639 <article class="component">
640 <h3 class="component-title">Inset list</h3>
642 <div class="component-example">
643 <ul class="list inset">
646 <li class="list-divider">List Divider</li>
652 <pre class="prettyprint">
653 <ul class="list inset">
654 <li>List item 1</li>
655 <li>List item 2</li>
656 <li class="list-divider">List Divider</li>
657 <li>List item 3</li>
658 <li>List item 4</li>
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>
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>
676 <pre class="prettyprint">
677 <a class="button">Button</a>
678 <a class="button-main">Button</a>
679 <a class="button-positive">Button</a>
680 <a class="button-negative">Button</a>
685 <article class="component" id="buttonsCounts">
686 <h3 class="component-title">Buttons with counts</h3>
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>
695 <pre class="prettyprint">
696 <a class="button">Count button<span class="count">1</span></a>
697 <a class="button-main">Count button<span class="count">1</span></a>
698 <a class="button-positive">Count button<span class="count">1</span></a>
699 <a class="button-negative">Count button<span class="count">1</span></a>
704 <article class="component" id="blockButtons">
705 <h3 class="component-title">Block buttons</h3>
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>
714 <pre class="prettyprint">
715 <a class="button-block">Block button</a>
716 <a class="button-main button-block">Block button</a>
717 <a class="button-positive button-block">Block button</a>
718 <a class="button-negative button-block">Block button</a>
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>
728 <div class="component-example">
729 <ul class="segmented-controller">
731 <a href="#item1mobile">Thing one</a>
734 <a href="#item2mobile">Thing two</a>
737 <a href="#item3mobile">Thing three</a>
740 <ul class="inset list">
741 <li id="item1mobile" class="segmented-controller-item active">
744 <li id="item2mobile" class="segmented-controller-item">
747 <li id="item3mobile" class="segmented-controller-item">
753 <pre class="prettyprint">
754 <ul class="segmented-controller">
755 <li class="active">
756 <a href="#item1">Thing one</a>
759 <a href="#item2">Thing two</a>
762 <a href="#item3">Thing three</a>
765 <ul class="inset list">
766 <li id="item1" class="segmented-controller-item active">
769 <li id="item2" class="segmented-controller-item">
772 <li id="item3" class="segmented-controller-item">
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>
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>
792 <pre class="prettyprint">
793 <span class="count">1</span>
794 <span class="count-main">2</span>
795 <span class="count-positive">3</span>
796 <span class="count-negative">4</span>
802 <article class="component" id="forms">
803 <h3 class="component-title">Forms</h3>
805 <div class="component-example">
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>
814 <pre class="prettyprint">
816 <input type="text" placeholder="Full name">
817 <input type="search" placeholder="Search">
818 <textarea rows="5"></textarea>
819 <a class="button button-block">Choose existing</a>
825 <!-- Form with input group -->
826 <article class="component" id="formsWithInputGroup">
827 <h3 class="component-title">Form with input group</h3>
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">
837 <pre class="prettyprint">
839 <div class="input-group">
840 <input type="text" placeholder="Full name">
841 <input type="email" placeholder="Email">
842 <input type="text" placeholder="Username">
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>
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">
859 <div class="input-row">
861 <input type="email" placeholder="ratchetframework@gmail.com">
863 <div class="input-row">
864 <label>Username</label>
865 <input type="text" placeholder="goRatchet">
870 <pre class="prettyprint">
872 <div class="input-group">
873 <div class="input-row">
874 <label>Full name</label>
875 <input type="text" placeholder="Mister Ratchet">
877 <div class="input-row">
878 <label>Email</label>
879 <input type="email" placeholder="ratchetframework@gmail.com">
881 <div class="input-row">
882 <label>Username</label>
883 <input type="text" placeholder="goRatchet">
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>
896 <div class="component-example">
897 <div class="toggle active">
898 <div class="toggle-handle"></div>
901 <div class="toggle-handle"></div>
905 <pre class="prettyprint">
906 <div class="toggle active">
907 <div class="toggle-handle"></div>
909 <div class="toggle">
910 <div class="toggle-handle"></div>
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>
916 <pre class="prettyprint js">
917 // Only needed if you want to fire a callback
919 .querySelector('#myToggle')
920 .addEventListener('toggle', myFunction)
926 <article class="component" id="popovers">
927 <h3 class="component-title">Popovers</h3>
929 <div class="component-example">
930 <div id="popover" class="popover">
931 <header class="popover-header">
935 <h3 class="title">Popover title</h3>
949 <pre class="prettyprint">
950 <div id="myPopover" class="popover">
951 <header class="popover-header">
952 <a class="button" href="#">
955 <h3 class="title">Popover title</h3>
956 <a class="button" href="#">
960 <ul class="list">
961 <li>Item1</li>
962 <li>Item2</li>
963 <li>Item3</li>
964 <li>Item4</li>
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>
971 <pre class="prettyprint">
972 <header class="bar-title">
973 <a href="#myPopover">
974 <h1 class="title">Title</h1>
982 <article class="component" id="modals">
983 <h3 class="component-title">Modals</h3>
985 <div class="component-example">
986 <a href="#myModalexample" class="button">Open modal</a>
987 <div id="myModalexample" class="modal">
988 <header class="bar-title">
989 <h1 class="title">Modal</h1>
990 <a class="button" href="#myModalexample">
995 <div class="content content-padded">
996 <p>The contents of my modal</p>
1002 <pre class="prettyprint">
1003 <a href="#myModal" class="button">Open modal</a>
1005 <div id="myModal" class="modal">
1006 <header class="bar-title">
1007 <h1 class="title">Modal</h1>
1008 <a class="button" href="#myModal">
1013 <div class="content content-padded">
1014 <p>The contents of my modal.</p>
1019 <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>
1024 <article class="component" id="sliders">
1025 <h3 class="component-title">Sliders</h3>
1026 <p class="component-description">Can be used with any number of slides with any type of content.</p>
1028 <div class="component-example component-example-fullbleed">
1029 <div class="slider" id="mySlider">
1032 <img src="img/slide-1.jpg">
1033 <span class="slide-text">← Slide me</span>
1036 <img src="img/slide-2.jpg">
1039 <img src="img/slide-3.jpg">
1045 <pre class="prettyprint">
1046 <div class="slider">
1049 <img src="img/slide-1.jpg">
1050 <span class="slide-text">← Slide me</span>
1053 <img src="img/slide-2.jpg">
1056 <img src="img/slide-3.jpg">
1062 <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>
1064 <pre class="prettyprint js">
1065 // Only needed if you want to fire a callback
1067 .querySelector('#mySlider')
1068 .addEventListener('slide', myFunction)
1074 <article class="component" id="push">
1075 <h3 class="component-title">Push</h3>
1076 <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>
1078 <pre class="prettyprint js">
1079 <!-- A one.html link -->
1080 <a href="two.html">Two<a>
1083 <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>
1085 <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>
1087 <pre class="prettyprint js">
1088 <!-- An one.html link that animates to two.html -->
1089 <a href="two.html" data-transition="fade">Two<a>
1092 <p class="component-description">A working version of push:</p>
1094 <div class="component-example component-example-fullbleed">
1095 <header class="bar-title">
1096 <h1 class="title">Push</h1>
1098 <div class="content">
1101 <a href="two.html" data-transition="slide-in">
1102 Load new page with push
1104 <span class="chevron"></span>
1110 <pre class="prettyprint push-example">
1111 <header class="bar-title">
1112 <h1 class="title">Push</h1>
1114 <div class="content">
1115 <ul class="list">
1117 <a href="two.html" data-transition="slide-in">
1120 <span class="chevron"></span>
1126 <p class="component-description">Have a link you don't want to intercepted by push? Try this:</p>
1128 <pre class="prettyprint js">
1129 <!-- Use data-ignore="push" to prevent the push.js interception -->
1130 <a href="http://www.google.com" data-ignore="push">Google<a>
1133 <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>
1135 <pre class="prettyprint js">
1136 // Only needed if you want to fire a callback
1137 window.addEventListener('push', myFunction);
1145 <section class="content-section section-informational" id="pageSetup">
1146 <div class="docs-inner-wrapper">
1147 <div class="section-header">
1148 <h2 class="section-title">Page setup</h2>
1149 <p class="section-description">3 simple rules for structuring your Ratchet pages</p>
1154 <h3 class="step-title">1. Fixed bars come first</h3>
1155 <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><body></code> of the page. This is really important!</p>
1158 <h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
1159 <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><body></code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
1162 <h3 class="step-title">3. Don't forget your meta tags</h3>
1163 <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>
1170 <div class="docs-outer-wrapper docs-footer">
1171 <section class="content-section">
1172 <div class="docs-inner-wrapper">
1173 <h3>License & credit</h3>
1174 <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>
1175 <ul class="avatars">
1177 <a data-ignore="push" class="avatar" href="http://www.twitter.com/dhg">
1178 <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="">
1180 <a data-ignore="push" href="https://twitter.com/dhg" class="twitter-follow-button" data-show-count="false">Follow @dhg</a>
1183 <a data-ignore="push" class="avatar" href="http://www.twitter.com/connors">
1184 <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="">
1186 <a data-ignore="push" href="https://twitter.com/connors" class="twitter-follow-button" data-show-count="false">Follow @connors</a>
1189 <a data-ignore="push" class="avatar" href="http://www.twitter.com/fat">
1190 <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="">
1192 <a data-ignore="push" href="https://twitter.com/fat" class="twitter-follow-button" data-show-count="false">Follow @fat</a>