<!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 >
