diff options
Diffstat (limited to 'docs/index.html')
| -rw-r--r-- | docs/index.html | 1214 |
1 files changed, 15 insertions, 1199 deletions
diff --git a/docs/index.html b/docs/index.html index 8430938..8c4c42a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,1199 +1,15 @@ -<!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"> -<header class="bar-title"> - <h1 class="title">Title</h1> -</header> -</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"> -<header class="bar-title"> - <a class="button" href="#"> - Left - </a> - <h1 class="title">Title</h1> - <a class="button" href="#"> - Right - </a> -</header> -</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"> -<header class="bar-title"> - <a class="button-prev" href="#"> - Previous - </a> - <h1 class="title">Title</h1> - <a class="button-next" href="#"> - Next - </a> -</header> -</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"> -<header class="bar-title"> - <a class="button" href="#"> - Left - </a> - <ul class="segmented-controller"> - <li class="active"> - <a href="#">One</a> - </li> - <li> - <a href="#">Two</a> - </li> - <li> - <a href="#">Three</a> - </li> - </ul> - <a class="button" href="#"> - Right - </a> -</header> -</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"> -<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> -</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"> -<!-- Segmented controller in standard bar fixed to top --> -<nav class="bar-standard"> - <ul class="segmented-controller"> - <li class="active"> - <a href="#">Thing one</a> - </li> - <li> - <a href="#">Thing two</a> - </li> - <li> - <a href="#">Thing three</a> - </li> - </ul> -</nav> -<div class="bar-standard bar-header-secondary"> - <a class="button-block">Block level button</a> -</div> -</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"> -<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> -</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"> -<ul class="list"> - <li> - <a href="#"> - List item 1 - <span class="chevron"></span> - </a> - </li> - <li> - <a href="#"> - List item 2 - <span class="chevron"></span> - </a> - </li> - <li> - <a href="#"> - List item 3 - <span class="chevron"></span> - </a> - </li> -</ul> -</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"> -<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> -</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"> -<ul class="list"> - <li> - <a href="#"> - List item 1 - <span class="chevron"></span> - <span class="count">4</span> - </a> - </li> - <li> - <a href="#"> - List item 2 - <span class="chevron"></span> - <span class="count">1</span> - </a> - </li> - <li> - <a href="#"> - List item 3 - <span class="chevron"></span> - <span class="count">5</span> - </a> - </li> -</ul> -</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"> -<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> -</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"> -<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> -</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"> -<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> -</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"> -<a class="button">Button</a> -<a class="button-main">Button</a> -<a class="button-positive">Button</a> -<a class="button-negative">Button</a> -</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"> -<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> -</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"> -<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> -</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"> -<ul class="segmented-controller"> - <li class="active"> - <a href="#item1">Thing one</a> - </li> - <li> - <a href="#item2">Thing two</a> - </li> - <li> - <a href="#item3">Thing three</a> - </li> -</ul> -<ul class="inset list"> - <li id="item1" class="segmented-controller-item active"> - Item 1 - </li> - <li id="item2" class="segmented-controller-item"> - Item 2 - </li> - <li id="item3" class="segmented-controller-item"> - Item 3 - </li> -</ul> -</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"> -<span class="count">1</span> -<span class="count-main">2</span> -<span class="count-positive">3</span> -<span class="count-negative">4</span> -</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"> -<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> -</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"> -<form> - <div class="input-group"> - <input type="text" placeholder="Full name"> - <input type="email" placeholder="Email"> - <input type="text" placeholder="Username"> - </div> -</form> -</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"> -<form> - <div 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> - </div> -</form> -</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"> -<div class="toggle active"> - <div class="toggle-handle"></div> -</div> -<div class="toggle"> - <div class="toggle-handle"></div> -</div> -</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"> -<div id="myPopover" class="popover"> - <header class="popover-header"> - <a class="button" href="#"> - Left - </a> - <h3 class="title">Popover title</h3> - <a class="button" href="#"> - Right - </a> - </header> - <ul class="list"> - <li>Item1</li> - <li>Item2</li> - <li>Item3</li> - <li>Item4</li> - </ul> -</div> -</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"> -<header class="bar-title"> - <a href="#myPopover"> - <h1 class="title">Title</h1> - </a> -</header> -</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"> -<a href="#myModal" class="button">Open modal</a> - -<div id="myModal" class="modal"> - <header class="bar-title"> - <h1 class="title">Modal</h1> - <a class="button" href="#myModal"> - Close - </a> - </header> - - <div class="content content-padded"> - <p>The contents of my modal.</p> - </div> -</div> -</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">← 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"> -<div class="slider"> - <ul> - <li> - <img src="img/slide-1.jpg"> - <span class="slide-text">← Slide me</span> - </li> - <li> - <img src="img/slide-2.jpg"> - </li> - <li> - <img src="img/slide-3.jpg"> - </li> - </ul> -</div> -</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"> -<!-- A one.html link --> -<a href="two.html">Two<a> -</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"> -<!-- An one.html link that animates to two.html --> -<a href="two.html" data-transition="fade">Two<a> -</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"> -<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"> - Go to page 2 - </a> - <span class="chevron"></span> - </li> - </ul> -</div> -</pre> - - <p class="component-description">Have a link you don't want to intercepted by push? Try this:</p> - -<pre class="prettyprint js"> -<!-- Use data-ignore="push" to prevent the push.js interception --> -<a href="http://www.google.com" data-ignore="push">Google<a> -</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><body></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><body></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 & 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> +--- +layout: home +title: Ratchet +--- + +<div class="docs-header"> + {% include masthead.html %} + <div class="docs-header-content"> + <p class="docs-subtitle">Build mobile apps with simple HTML‚ CSS‚ and JS components.</p> + <a data-ignore="push" href="https://github.com/twbs/ratchet/archive/v2.0.0.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a> + </div> + + {% include ad.html %} + {% include footer.html %} +</div> |