playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Build mobile apps with simple HTML, CSS, and JS components. http://goratchet.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 Commits
4 Branches
6 Tags
15 MiB
Tree: 5ae2033f5b
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5ae2033f5b'
${ noResults }
ratchet/docs/index.html

1199 lines
45 KiB
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet</title>
<meta name="description" content="Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.">
<meta name="author" content="Dave Gamache, Connor Sears, and Jacob Thornton">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../dist/ratchet.css">
<link rel="stylesheet" href="css/docs.css">
<link rel="stylesheet" href="css/prettify.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="//use.typekit.net/gwz1sef.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/apple-touch-icon-57x57.png">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/prettify.js"></script>
<script src="../dist/ratchet.js"></script>
<script src="js/docs.js"></script>
<script src="js/fingerblast.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body ontouchstart="">
<!-- Masthead & navigation -->
<nav class="docs-outer-wrapper docs-masthead">
<div class="docs-inner-wrapper">
<ul class="docs-navigation">
<li class="nav-item"><a href="#gettingStarted">Getting started</a></li>
<li class="nav-item nav-components">
<a data-ignore="push" class="nav-components-link" href="">Components</a>
<ul class="components-list">
<li><a href="#bars">Bars</a></li>
<li><a href="#lists">Lists</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#segmentedControllers">Segmented controllers</a></li>
<li><a href="#counts">Counts</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#toggles">Toggles</a></li>
<li><a href="#popovers">Popovers</a></li>
<li><a href="#modals">Modals</a></li>
<li><a href="#sliders">Sliders</a></li>
<li><a href="#push">Push</a></li>
</ul>
</li>
<li class="nav-item"><a href="#pageSetup">Page setup</a></li>
<li data-ignore="push" class="nav-item"><a href="http://github.com/maker/ratchet">View on Github</a></li>
</ul>
<h1 class="docs-masthead-title">Ratchet</h1>
</div>
</nav>
<!-- Jumbo header -->
<header class="docs-outer-wrapper docs-header">
<div class="docs-inner-wrapper">
<hgroup class="docs-header-text">
<h2 class="docs-header-subtitle">Prototype iPhone apps with simple HTML, CSS, and JS components.</h2>
<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>
</hgroup>
</div>
<section class="social">
<ul>
<li>
<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>
</li>
<li>
<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>
<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>
</li>
<li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
Follow @GoRatchet</a>
<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>
</li>
</ul>
</section>
</header>
<div class="docs-outer-wrapper docs-content">
<section class="content-section section-informational" id="gettingStarted">
<div class="docs-inner-wrapper">
<div class="section-header">
<h2 class="section-title">Getting started</h2>
<p class="section-description">Once you've downloaded Ratchet, here's what to do next.</p>
</div>
<ol class="steps">
<li class="step">
<h3 class="step-title">1. Create your pages</h3>
<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>
</li>
<li class="step">
<h3 class="step-title">2. Connect pages with push.js</h3>
<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>
</li>
<li class="step">
<h3 class="step-title">3. Save the prototype to your phone</h3>
<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>
</li>
</ol>
</div>
</section>
<!-- Banner for Mozilla/IE -->
<div class="notice-banner">
<p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
</div>
<!--[if IE]>
<div class="notice-banner">
<p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
</div>
<![endif]-->
<!-- Components -->
<section class="docs-outer-wrapper content-section section-components">
<div class="docs-inner-wrapper">
<div class="section-header">
<h2 class="section-title">Components</h2>
<p class="section-description">Design patterns that serve as basic building blocks.</p>
</div>
<div class="iphone">
<div class="iphone-content">
<div id="iwindow">
<header class="bar-title">
<h1 class="title">Title</h1>
</header>
</div>
</div>
</div>
<!-- Bars -->
<article class="component active" id="bars">
<h3 class="component-title">Title bar</h3>
<p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
<div class="component-example component-example-fullbleed">
<header class="bar-title">
<h1 class="title">Title</h1>
</header>
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;/header&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">Title bar with buttons</h3>
<p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
<div class="component-example component-example-fullbleed">
<header class="bar-title">
<a class="button">
Left
</a>
<h1 class="title">Title</h1>
<a class="button">
Right
</a>
</header>
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left
&lt;/a&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Right
&lt;/a&gt;
&lt;/header&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">Title bar with directional buttons</h3>
<p class="component-description">Directional buttons in a title bar should be used for navigational purposes.</p>
<div class="component-example component-example-fullbleed">
<header class="bar-title">
<a class="button-prev">
Previous
</a>
<h1 class="title">Title</h1>
<a class="button-next">
Next
</a>
</header>
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;a class=&quot;button-prev&quot; href=&quot;#&quot;&gt;
Previous
&lt;/a&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;a class=&quot;button-next&quot; href=&quot;#&quot;&gt;
Next
&lt;/a&gt;
&lt;/header&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">Title bar with segmented controller</h3>
<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>
<div class="component-example component-example-fullbleed">
<header class="bar-title">
<a class="button">
Left
</a>
<ul class="segmented-controller">
<li class="active">
<a>One</a>
</li>
<li>
<a>Two</a>
</li>
<li>
<a>Three</a>
</li>
</ul>
<a class="button">
Right
</a>
</header>
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left
&lt;/a&gt;
&lt;ul class=&quot;segmented-controller&quot;&gt;
&lt;li class=&quot;active&quot;&gt;
&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Right
&lt;/a&gt;
&lt;/header&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">Tab bar</h3>
<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>
<div class="component-example component-example-fullbleed">
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="#">
<img class="tab-icon" src="img/icon-home.png">
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-profile.png">
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-messages.png">
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-hamburger.png">
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-settings.png">
<div class="tab-label">Label</div>
</a>
</li>
</ul>
</nav>
</div>
<pre class="prettyprint">
&lt;nav class=&quot;bar-tab&quot;&gt;
&lt;ul class=&quot;tab-inner&quot;&gt;
&lt;li class=&quot;tab-item active&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-home.png&quot;&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-profile.png&quot;&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-messages.png&quot;&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-hamburger.png&quot;&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;tab-item&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-settings.png&quot;&gt;
&lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
</pre>
<p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
<p class="component-note"><strong>Credit:</strong> Icons by Marc Haumann and Spencer Cohen from The Noun Project</p>
</article>
<article class="component">
<h3 class="component-title">Standard bars</h3>
<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>
<div class="component-example component-example-fullbleed">
<!-- Segmented controller in standard bar fixed to top -->
<nav class="bar-standard">
<ul class="segmented-controller">
<li class="active">
<a>Thing one</a>
</li>
<li>
<a>Thing two</a>
</li>
<li>
<a>Thing three</a>
</li>
</ul>
</nav>
<!-- Block button in standard bar fixed below top bar -->
<div class="bar-standard bar-header-secondary">
<a class="button-block">Block level button</a>
</div>
</div>
<pre class="prettyprint">
&lt;!-- Segmented controller in standard bar fixed to top --&gt;
&lt;nav class=&quot;bar-standard&quot;&gt;
&lt;ul class=&quot;segmented-controller&quot;&gt;
&lt;li class=&quot;active&quot;&gt;
&lt;a href=&quot;#&quot;&gt;Thing one&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;Thing two&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;Thing three&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;div class=&quot;bar-standard bar-header-secondary&quot;&gt;
&lt;a class=&quot;button-block&quot;&gt;Block level button&lt;/a&gt;
&lt;/div&gt;
</pre>
</article>
<!-- Lists -->
<article class="component" id="lists">
<h3 class="component-title">Lists</h3>
<p class="component-description">Lists can be used for organizing data, showing collections of links or a series of controls.</p>
<div class="component-example component-example-fullbleed">
<ul class="list">
<li>List item 1</li>
<li>List item 2</li>
<li class="list-divider">List Divider</li>
<li>List item 3</li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;List item 1&lt;/li&gt;
&lt;li&gt;List item 2&lt;/li&gt;
&lt;li class=&quot;list-divider&quot;&gt;List Divider&lt;/li&gt;
&lt;li&gt;List item 3&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">List with chevrons</h3>
<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>
<div class="component-example component-example-fullbleed">
<ul class="list">
<li>
<a>
List item 1
<span class="chevron"></span>
</a>
</li>
<li>
<a>
List item 2
<span class="chevron"></span>
</a>
</li>
<li>
<a>
List item 3
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 1
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 2
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 3
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">List with counts</h3>
<div class="component-example component-example-fullbleed">
<ul class="list">
<li>List item 1 <span class="count">4</span></li>
<li>List item 2 <span class="count">1</span></li>
<li>List item 3 <span class="count">5</span></li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;List item 1 &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;List item 2 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;List item 3 &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">List with counts and chevrons</h3>
<div class="component-example component-example-fullbleed">
<ul class="list">
<li>
<a>
List item 1
<span class="chevron"></span>
<span class="count">4</span>
</a>
</li>
<li>
<a>
List item 2
<span class="chevron"></span>
<span class="count">1</span>
</a>
</li>
<li>
<a>
List item 3
<span class="chevron"></span>
<span class="count">5</span>
</a>
</li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 1
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 2
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 3
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">List with buttons</h3>
<div class="component-example component-example-fullbleed">
<ul class="list">
<li>List item 1 <a class="button">Button</a></li>
<li>List item 2 <a class="button-main">Button</a></li>
<li>List item 3 <a class="button-positive">Button</a></li>
<li>List item 4 <a class="button-negative">Button</a></li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;List item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;List item 2 &lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;List item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;List item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">List with toggles</h3>
<div class="component-example component-example-fullbleed">
<ul class="list">
<li>
List item 1
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
List item 2
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
</li>
<li>
List item 3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;
List item 1
&lt;div class=&quot;toggle&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
List item 2
&lt;div class=&quot;toggle active&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
List item 3
&lt;div class=&quot;toggle&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">Inset list</h3>
<div class="component-example">
<ul class="list inset">
<li>List item 1</li>
<li>List item 2</li>
<li class="list-divider">List Divider</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list inset&quot;&gt;
&lt;li&gt;List item 1&lt;/li&gt;
&lt;li&gt;List item 2&lt;/li&gt;
&lt;li class=&quot;list-divider&quot;&gt;List Divider&lt;/li&gt;
&lt;li&gt;List item 3&lt;/li&gt;
&lt;li&gt;List item 4&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<!-- Buttons -->
<article class="component" id="buttons">
<h3 class="component-title">Buttons</h3>
<p class="component-description">Buttons come in four flavors and should be used for user actions.</p>
<div class="component-example">
<a class="button">Button</a>
<a class="button-main">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>
</div>
<pre class="prettyprint">
&lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;
&lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;
&lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;
&lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;
</pre>
</article>
<article class="component" id="buttonsCounts">
<h3 class="component-title">Buttons with counts</h3>
<div class="component-example">
<a class="button">Count button<span class="count">1</span></a>
<a class="button-main">Count button<span class="count">1</span></a>
<a class="button-positive">Count button<span class="count">1</span></a>
<a class="button-negative">Count button<span class="count">1</span></a>
</div>
<pre class="prettyprint">
&lt;a class=&quot;button&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-main&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-positive&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-negative&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
</pre>
</article>
<article class="component" id="blockButtons">
<h3 class="component-title">Block buttons</h3>
<div class="component-example">
<a class="button-block">Block button</a>
<a class="button-main button-block">Block button</a>
<a class="button-positive button-block">Block button</a>
<a class="button-negative button-block">Block button</a>
</div>
<pre class="prettyprint">
&lt;a class=&quot;button-block&quot;&gt;Block button&lt;/a&gt;
&lt;a class=&quot;button-main button-block&quot;&gt;Block button&lt;/a&gt;
&lt;a class=&quot;button-positive button-block&quot;&gt;Block button&lt;/a&gt;
&lt;a class=&quot;button-negative button-block&quot;&gt;Block button&lt;/a&gt;
</pre>
</article>
<!-- Segmented Controller -->
<article class="component" id="segmentedControllers">
<h3 class="component-title">Segmented controller</h3>
<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>
<div class="component-example">
<ul class="segmented-controller">
<li class="active">
<a href="#item1mobile">Thing one</a>
</li>
<li>
<a href="#item2mobile">Thing two</a>
</li>
<li>
<a href="#item3mobile">Thing three</a>
</li>
</ul>
<ul class="inset list">
<li id="item1mobile" class="segmented-controller-item active">
Item 1
</li>
<li id="item2mobile" class="segmented-controller-item">
Item 2
</li>
<li id="item3mobile" class="segmented-controller-item">
Item 3
</li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;segmented-controller&quot;&gt;
&lt;li class=&quot;active&quot;&gt;
&lt;a href=&quot;#item1&quot;&gt;Thing one&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#item2&quot;&gt;Thing two&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#item3&quot;&gt;Thing three&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class=&quot;inset list&quot;&gt;
&lt;li id=&quot;item1&quot; class=&quot;segmented-controller-item active&quot;&gt;
Item 1
&lt;/li&gt;
&lt;li id=&quot;item2&quot; class=&quot;segmented-controller-item&quot;&gt;
Item 2
&lt;/li&gt;
&lt;li id=&quot;item3&quot; class=&quot;segmented-controller-item&quot;&gt;
Item 3
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<!-- Counts -->
<article class="component" id="counts">
<h3 class="component-title">Counts</h3>
<p class="component-description">Counts come in four flavors and should be used to indicate "how many" of something there are.</p>
<div class="component-example">
<span class="count">1</span>
<span class="count-main">2</span>
<span class="count-positive">3</span>
<span class="count-negative">4</span>
</div>
<pre class="prettyprint">
&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
&lt;span class=&quot;count-main&quot;&gt;2&lt;/span&gt;
&lt;span class=&quot;count-positive&quot;&gt;3&lt;/span&gt;
&lt;span class=&quot;count-negative&quot;&gt;4&lt;/span&gt;
</pre>
</article>
<!-- Forms -->
<article class="component" id="forms">
<h3 class="component-title">Forms</h3>
<div class="component-example">
<form>
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<a class="button button-block">Choose existing</a>
</form>
</div>
<pre class="prettyprint">
&lt;form&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
&lt;input type=&quot;search&quot; placeholder=&quot;Search&quot;&gt;
&lt;textarea rows=&quot;5&quot;&gt;&lt;/textarea&gt;
&lt;a class=&quot;button button-block&quot;&gt;Choose existing&lt;/a&gt;
&lt;/form&gt;
</pre>
</article>
<!-- Form with input group -->
<article class="component" id="formsWithInputGroup">
<h3 class="component-title">Form with input group</h3>
<div class="component-example">
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
</div>
<pre class="prettyprint">
&lt;form&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
&lt;input type=&quot;email&quot; placeholder=&quot;Email&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Username&quot;&gt;
&lt;/div&gt;
&lt;/form&gt;
</pre>
</article>
<!-- Form with input group and labels -->
<article class="component" id="formsWithInputGroupAndLabels">
<h3 class="component-title">Form with input group and labels</h3>
<div class="component-example">
<form class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</form>
</div>
<pre class="prettyprint">
&lt;form&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;div class=&quot;input-row&quot;&gt;
&lt;label&gt;Full name&lt;/label&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Mister Ratchet&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-row&quot;&gt;
&lt;label&gt;Email&lt;/label&gt;
&lt;input type=&quot;email&quot; placeholder=&quot;ratchetframework@gmail.com&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-row&quot;&gt;
&lt;label&gt;Username&lt;/label&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;goRatchet&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
</pre>
</article>
<!-- Toggle -->
<article class="component" id="toggles">
<h3 class="component-title">Toggles</h3>
<p class="component-description">Toggles can be used by sliding or tapping the control.</p>
<div class="component-example">
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</div>
<pre class="prettyprint">
&lt;div class=&quot;toggle active&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;toggle&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<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>
<pre class="prettyprint js">
// Only needed if you want to fire a callback
document
.querySelector('#myToggle')
.addEventListener('toggle', myFunction)
</pre>
</article>
<!-- Popovers -->
<article class="component" id="popovers">
<h3 class="component-title">Popovers</h3>
<div class="component-example">
<div id="popover" class="popover">
<header class="popover-header">
<a class="button">
Left
</a>
<h3 class="title">Popover title</h3>
<a class="button">
Right
</a>
</header>
<ul class="list">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
</div>
<pre class="prettyprint">
&lt;div id=&quot;myPopover&quot; class=&quot;popover&quot;&gt;
&lt;header class=&quot;popover-header&quot;&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left
&lt;/a&gt;
&lt;h3 class=&quot;title&quot;&gt;Popover title&lt;/h3&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Right
&lt;/a&gt;
&lt;/header&gt;
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;Item1&lt;/li&gt;
&lt;li&gt;Item2&lt;/li&gt;
&lt;li&gt;Item3&lt;/li&gt;
&lt;li&gt;Item4&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<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>
<pre class="prettyprint">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;a href=&quot;#myPopover&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;/a&gt;
&lt;/header&gt;
</pre>
</article>
<!-- Modals -->
<article class="component" id="modals">
<h3 class="component-title">Modals</h3>
<div class="component-example">
<a href="#myModalexample" class="button">Open modal</a>
<div id="myModalexample" class="modal">
<header class="bar-title">
<h1 class="title">Modal</h1>
<a class="button" href="#myModalexample">
Close
</a>
</header>
<div class="content content-padded">
<p>The contents of my modal</p>
</div>
</div>
</div>
<pre class="prettyprint">
&lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt;
&lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
&lt;header class=&quot;bar-title&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
&lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
Close
&lt;/a&gt;
&lt;/header&gt;
&lt;div class=&quot;content content-padded&quot;&gt;
&lt;p&gt;The contents of my modal.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<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>
</article>
<!-- Slider -->
<article class="component" id="sliders">
<h3 class="component-title">Sliders</h3>
<p class="component-description">Can be used with any number of slides with any type of content.</p>
<div class="component-example component-example-fullbleed">
<div class="slider" id="mySlider">
<ul>
<li>
<img src="img/slide-1.jpg">
<span class="slide-text">&larr; Slide me</span>
</li>
<li>
<img src="img/slide-2.jpg">
</li>
<li>
<img src="img/slide-3.jpg">
</li>
</ul>
</div>
</div>
<pre class="prettyprint">
&lt;div class=&quot;slider&quot;&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;img src=&quot;img/slide-1.jpg&quot;&gt;
&lt;span class=&quot;slide-text&quot;&gt;&larr; Slide me&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src=&quot;img/slide-2.jpg&quot;&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src=&quot;img/slide-3.jpg&quot;&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<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>
<pre class="prettyprint js">
// Only needed if you want to fire a callback
document
.querySelector('#mySlider')
.addEventListener('slide', myFunction)
</pre>
</article>
<!-- Push docs -->
<article class="component" id="push">
<h3 class="component-title">Push</h3>
<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>
<pre class="prettyprint js">
&lt;!-- A one.html link --&gt;
&lt;a href=&quot;two.html&quot;&gt;Two&lt;a&gt;
</pre>
<p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-title and .bar-tab according to their presences in two.html.</p>
<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>
<pre class="prettyprint js">
&lt;!-- An one.html link that animates to two.html --&gt;
&lt;a href=&quot;two.html&quot; data-transition=&quot;fade&quot;&gt;Two&lt;a&gt;
</pre>
<p class="component-description">A working version of push:</p>
<div class="component-example component-example-fullbleed">
<header class="bar-title">
<h1 class="title">Push</h1>
</header>
<div class="content">
<ul class="list">
<li>
<a href="two.html" data-transition="slide-in">
Load new page with push
</a>
<span class="chevron"></span>
</li>
</ul>
</div>
</div>
<pre class="prettyprint push-example">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
&lt;/header&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;two.html&quot; data-transition=&quot;slide-in&quot;&gt;
Go to page 2
&lt;/a&gt;
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<p class="component-description">Have a link you don't want to intercepted by push? Try this:</p>
<pre class="prettyprint js">
&lt;!-- Use data-ignore=&quot;push&quot; to prevent the push.js interception --&gt;
&lt;a href=&quot;http://www.google.com&quot; data-ignore=&quot;push&quot;&gt;Google&lt;a&gt;
</pre>
<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>
<pre class="prettyprint js">
// Only needed if you want to fire a callback
window.addEventListener('push', myFunction);
</pre>
</article>
</div>
</section>
<section class="content-section section-informational" id="pageSetup">
<div class="docs-inner-wrapper">
<div class="section-header">
<h2 class="section-title">Page setup</h2>
<p class="section-description">3 simple rules for structuring your Ratchet pages</p>
</div>
<ol class="steps">
<li class="step">
<h3 class="step-title">1. Fixed bars come first</h3>
<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>
</li>
<li class="step">
<h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
<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>
</li>
<li class="step">
<h3 class="step-title">3. Don't forget your meta tags</h3>
<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>
</li>
</ol>
</div>
</section>
</div>
<div class="docs-outer-wrapper docs-footer">
<section class="content-section">
<div class="docs-inner-wrapper">
<h3>License &amp; credit</h3>
<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>
<ul class="avatars">
<li>
<a data-ignore="push" class="avatar" href="http://www.twitter.com/dhg">
<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="">
</a>
<a data-ignore="push" href="https://twitter.com/dhg" class="twitter-follow-button" data-show-count="false">Follow @dhg</a>
</li>
<li>
<a data-ignore="push" class="avatar" href="http://www.twitter.com/connors">
<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="">
</a>
<a data-ignore="push" href="https://twitter.com/connors" class="twitter-follow-button" data-show-count="false">Follow @connors</a>
</li>
<li>
<a data-ignore="push" class="avatar" href="http://www.twitter.com/fat">
<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="">
</a>
<a data-ignore="push" href="https://twitter.com/fat" class="twitter-follow-button" data-show-count="false">Follow @fat</a>
</li>
</ul>
</div>
</section>
</div>
</body>
</html>