mirror of https://github.com/twbs/ratchet.git
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.
1116 lines
35 KiB
1116 lines
35 KiB
--- |
|
layout: default |
|
--- |
|
|
|
<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"> |
|
<div class="step-icon"> |
|
<span class="icon icon-pages"></span> |
|
</div> |
|
<h3 class="step-title">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"> |
|
<div class="step-icon"> |
|
<span class="icon icon-refresh"></span> |
|
</div> |
|
<h3 class="step-title">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"> |
|
<div class="step-icon"> |
|
<span class="icon icon-share"></span> |
|
</div> |
|
<h3 class="step-title">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 <span class="icon icon-share"></span> 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-nav"> |
|
<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-nav"> |
|
<h1 class="title">Title</h1> |
|
</header> |
|
</div> |
|
|
|
{% highlight html %} |
|
<header class="bar-nav"> |
|
<h1 class="title">Title</h1> |
|
</header> |
|
{% endhighlight %} |
|
|
|
</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-nav"> |
|
<a class="button"> |
|
Left |
|
</a> |
|
<h1 class="title">Title</h1> |
|
<a class="button"> |
|
Right |
|
</a> |
|
</header> |
|
</div> |
|
|
|
{% highlight html %} |
|
<header class="bar-nav"> |
|
<a class="button"> |
|
Left |
|
</a> |
|
<h1 class="title">Title</h1> |
|
<a class="button"> |
|
Right |
|
</a> |
|
</header> |
|
{% endhighlight %} |
|
|
|
</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-nav"> |
|
<a class="button-prev"> |
|
Previous |
|
</a> |
|
<h1 class="title">Title</h1> |
|
<a class="button-next"> |
|
Next |
|
</a> |
|
</header> |
|
</div> |
|
|
|
{% highlight html %} |
|
<header class="bar-nav"> |
|
<a class="button-prev"> |
|
Previous |
|
</a> |
|
<h1 class="title">Title</h1> |
|
<a class="button-next"> |
|
Next |
|
</a> |
|
</header> |
|
{% endhighlight %} |
|
|
|
</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-nav"> |
|
<a class="button"> |
|
Left |
|
</a> |
|
<ul class="segmented-controller"> |
|
<li class="selected"> |
|
<a>One</a> |
|
</li> |
|
<li> |
|
<a>Two</a> |
|
</li> |
|
<li> |
|
<a>Three</a> |
|
</li> |
|
</ul> |
|
<a class="button"> |
|
Right |
|
</a> |
|
</header> |
|
</div> |
|
|
|
{% highlight html %} |
|
<header class="bar-nav"> |
|
<a class="button"> |
|
Left |
|
</a> |
|
<ul class="segmented-controller"> |
|
<li class="selected"> |
|
<a>One</a> |
|
</li> |
|
<li> |
|
<a>Two</a> |
|
</li> |
|
<li> |
|
<a>Three</a> |
|
</li> |
|
</ul> |
|
<a class="button"> |
|
Right |
|
</a> |
|
</header> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<article class="component"> |
|
<h3 class="component-title">Tab bar</h3> |
|
<p class="component-description">Use Ratchicons in the tab bar to represent different sections of your app.</p> |
|
|
|
<div class="component-example component-example-fullbleed"> |
|
<nav class="bar-tab"> |
|
<ul class="tab-inner"> |
|
<li class="tab-item active"> |
|
<a href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</li> |
|
<li class="tab-item"> |
|
<a href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</li> |
|
<li class="tab-item"> |
|
<a href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</li> |
|
<li class="tab-item"> |
|
<a href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</li> |
|
<li class="tab-item"> |
|
<a href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</li> |
|
</ul> |
|
</nav> |
|
</div> |
|
|
|
{% highlight html %} |
|
<nav class="bar-tab"> |
|
<ul class="tab-inner"> |
|
<li class="tab-item active"> |
|
<a href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</li> |
|
<li class="tab-item"> |
|
<a href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</li> |
|
<li class="tab-item"> |
|
<a href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</li> |
|
<li class="tab-item"> |
|
<a href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</li> |
|
<li class="tab-item"> |
|
<a href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</li> |
|
</ul> |
|
</nav> |
|
{% endhighlight %} |
|
|
|
<p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</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="selected"> |
|
<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> |
|
|
|
{% highlight html %} |
|
<!-- Segmented controller in standard bar fixed to top --> |
|
<nav class="bar-standard"> |
|
<ul class="segmented-controller"> |
|
<li class="selected"> |
|
<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> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<!-- Table views --> |
|
<article class="component" id="table-views"> |
|
<h3 class="component-title">Table views</h3> |
|
<p class="component-description">Table views 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="table-view"> |
|
<li class="table-view-cell">Item 1</li> |
|
<li class="table-view-cell">Item 2</li> |
|
<li class="table-view-cell table-view-divider">Divider</li> |
|
<li class="table-view-cell">Item 3</li> |
|
</ul> |
|
</div> |
|
|
|
{% highlight html %} |
|
<ul class="table-view"> |
|
<li class="table-view-cell">Item 1</li> |
|
<li class="table-view-cell">Item 2</li> |
|
<li class="table-view-cell table-view-divider">Divider</li> |
|
<li class="table-view-cell">Item 3</li> |
|
</ul> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<article class="component"> |
|
<h3 class="component-title">Table view 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 item is linked.</p> |
|
|
|
<div class="component-example component-example-fullbleed"> |
|
<ul class="table-view table-view-indented"> |
|
<li class="table-view-cell"> |
|
<a> |
|
<span class="icon icon-share pull-left"></span> |
|
Item 1 |
|
<span class="chevron"></span> |
|
</a> |
|
</li> |
|
<li class="table-view-cell"> |
|
<a> |
|
<span class="icon icon-share pull-left"></span> |
|
Item 2 |
|
<span class="chevron"></span> |
|
</a> |
|
</li> |
|
<li class="table-view-cell"> |
|
<a> |
|
<span class="icon icon-share pull-left"></span> |
|
Item 3 |
|
<span class="chevron"></span> |
|
</a> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
{% highlight html %} |
|
<ul class="table-view"> |
|
<li class="table-view-cell"> |
|
<a> |
|
Item 1 |
|
<span class="chevron"></span> |
|
</a> |
|
</li> |
|
<li class="table-view-cell"> |
|
<a> |
|
Item 2 |
|
<span class="chevron"></span> |
|
</a> |
|
</li> |
|
<li class="table-view-cell"> |
|
<a> |
|
Item 3 |
|
<span class="chevron"></span> |
|
</a> |
|
</li> |
|
</ul> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<article class="component"> |
|
<h3 class="component-title">Table view with badges</h3> |
|
|
|
<div class="component-example component-example-fullbleed"> |
|
<ul class="table-view"> |
|
<li class="table-view-cell">Item 1 <span class="badge">4</span></li> |
|
<li class="table-view-cell">Item 2 <span class="badge">1</span></li> |
|
<li class="table-view-cell">Item 3 <span class="badge">5</span></li> |
|
</ul> |
|
</div> |
|
|
|
{% highlight html %} |
|
<ul class="table-view"> |
|
<li class="table-view-cell">Item 1 <span class="badge">4</span></li> |
|
<li class="table-view-cell">Item 2 <span class="badge">1</span></li> |
|
<li class="table-view-cell">Item 3 <span class="badge">5</span></li> |
|
</ul> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<article class="component"> |
|
<h3 class="component-title">Table view with badges and chevrons</h3> |
|
|
|
<div class="component-example component-example-fullbleed"> |
|
<ul class="table-view"> |
|
<li class="table-view-cell"> |
|
<a> |
|
Item 1 |
|
<span class="chevron"></span> |
|
<span class="badge">4</span> |
|
</a> |
|
</li> |
|
<li class="table-view-cell"> |
|
<a> |
|
Item 2 |
|
<span class="chevron"></span> |
|
<span class="badge">1</span> |
|
</a> |
|
</li> |
|
<li class="table-view-cell"> |
|
<a> |
|
Item 3 |
|
<span class="chevron"></span> |
|
<span class="badge">5</span> |
|
</a> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
{% highlight html %} |
|
<ul class="table-view"> |
|
<li class="table-view-cell"> |
|
<a> |
|
Item 1 |
|
<span class="chevron"></span> |
|
<span class="badge">4</span> |
|
</a> |
|
</li> |
|
<li class="table-view-cell"> |
|
<a> |
|
Item 2 |
|
<span class="chevron"></span> |
|
<span class="badge">1</span> |
|
</a> |
|
</li> |
|
<li class="table-view-cell"> |
|
<a> |
|
Item 3 |
|
<span class="chevron"></span> |
|
<span class="badge">5</span> |
|
</a> |
|
</li> |
|
</ul> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<article class="component"> |
|
<h3 class="component-title">Table view with buttons</h3> |
|
|
|
<div class="component-example component-example-fullbleed"> |
|
<ul class="table-view"> |
|
<li class="table-view-cell">Item 1 <a class="button">Button</a></li> |
|
<li class="table-view-cell">Item 2 <a class="button-primary">Button</a></li> |
|
<li class="table-view-cell">Item 3 <a class="button-positive">Button</a></li> |
|
<li class="table-view-cell">Item 4 <a class="button-negative">Button</a></li> |
|
</ul> |
|
</div> |
|
|
|
{% highlight html %} |
|
<ul class="table-view"> |
|
<li class="table-view-cell">Item 1 <a class="button">Button</a></li> |
|
<li class="table-view-cell">Item 2 <a class="button-primary">Button</a></li> |
|
<li class="table-view-cell">Item 3 <a class="button-positive">Button</a></li> |
|
<li class="table-view-cell">Item 4 <a class="button-negative">Button</a></li> |
|
</ul> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<article class="component"> |
|
<h3 class="component-title">Table view with toggles</h3> |
|
|
|
<div class="component-example component-example-fullbleed"> |
|
<ul class="table-view"> |
|
<li class="table-view-cell"> |
|
Item 1 |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
<li class="table-view-cell"> |
|
Item 2 |
|
<div class="toggle active"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
<li class="table-view-cell"> |
|
Item 3 |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
{% highlight html %} |
|
<ul class="table-view"> |
|
<li class="table-view-cell"> |
|
Item 1 |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
<li class="table-view-cell"> |
|
Item 2 |
|
<div class="toggle active"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
<li class="table-view-cell"> |
|
Item 3 |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
</ul> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<article class="component"> |
|
<h3 class="component-title">Inset table views</h3> |
|
|
|
<div class="component-example"> |
|
<ul class="table-view inset"> |
|
<li class="table-view-cell">Item 1</li> |
|
<li class="table-view-cell">Item 2</li> |
|
<li class="table-view-cell table-view-divider">Divider</li> |
|
<li class="table-view-cell">Item 3</li> |
|
<li class="table-view-cell">Item 4</li> |
|
</ul> |
|
</div> |
|
|
|
{% highlight html %} |
|
<ul class="table-view inset"> |
|
<li class="table-view-cell">Item 1</li> |
|
<li class="table-view-cell">Item 2</li> |
|
<li class="table-view-cell table-view-divider">Divider</li> |
|
<li class="table-view-cell">Item 3</li> |
|
<li class="table-view-cell">Item 4</li> |
|
</ul> |
|
{% endhighlight %} |
|
|
|
</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-primary">Button</a> |
|
<a class="button-positive">Button</a> |
|
<a class="button-negative">Button</a> |
|
</div> |
|
|
|
{% highlight html %} |
|
<a class="button">Button</a> |
|
<a class="button-primary">Button</a> |
|
<a class="button-positive">Button</a> |
|
<a class="button-negative">Button</a> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<article class="component" id="buttonsCounts"> |
|
<h3 class="component-title">Buttons with badges</h3> |
|
|
|
<div class="component-example"> |
|
<a class="button">Badge button<span class="badge badge-filled">1</span></a> |
|
<a class="button-primary">Badge button<span class="badge-primary badge-filled">1</span></a> |
|
<a class="button-positive">Badge button<span class="badge-positive badge-filled">1</span></a> |
|
<a class="button-negative">Badge button<span class="badge-negative badge-filled">1</span></a> |
|
</div> |
|
|
|
{% highlight html %} |
|
<a class="button">Badge button<span class="badge badge-filled">1</span></a> |
|
<a class="button-primary">Badge button<span class="badge-primary badge-filled">1</span></a> |
|
<a class="button-positive">Badge button<span class="badge-positive badge-filled">1</span></a> |
|
<a class="button-negative">Badge button<span class="badge-negative badge-filled">1</span></a> |
|
|
|
<a class="button-filled">Badge button<span class="badge badge-filled">1</span></a> |
|
<a class="button-filled button-primary">Badge button<span class="badge-primary badge-filled">1</span></a> |
|
<a class="button-filled button-positive">Badge button<span class="badge-positive badge-filled">1</span></a> |
|
<a class="button-filled button-negative">Badge button<span class="badge-negative badge-filled">1</span></a> |
|
{% endhighlight %} |
|
|
|
</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-primary button-block">Block button</a> |
|
<a class="button-positive button-block">Block button</a> |
|
<a class="button-negative button-block">Block button</a> |
|
|
|
<a class="button-block button-filled">Block button</a> |
|
<a class="button-primary button-block button-filled">Block button</a> |
|
<a class="button-positive button-block button-filled">Block button</a> |
|
<a class="button-negative button-block button-filled">Block button</a> |
|
</div> |
|
|
|
{% highlight html %} |
|
<a class="button-block">Block button</a> |
|
<a class="button-primary button-block">Block button</a> |
|
<a class="button-positive button-block">Block button</a> |
|
<a class="button-negative button-block">Block button</a> |
|
|
|
<a class="button-block button-filled">Block button</a> |
|
<a class="button-primary button-block button-filled">Block button</a> |
|
<a class="button-positive button-block button-filled">Block button</a> |
|
<a class="button-negative button-block button-filled">Block button</a> |
|
{% endhighlight %} |
|
|
|
</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="selected"> |
|
<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 table-view"> |
|
<li id="item1mobile" class="table-view-cell segmented-controller-item selected"> |
|
Item 1 |
|
</li> |
|
<li id="item2mobile" class="table-view-cell segmented-controller-item"> |
|
Item 2 |
|
</li> |
|
<li id="item3mobile" class="table-view-cell segmented-controller-item"> |
|
Item 3 |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
{% highlight html %} |
|
<ul class="segmented-controller"> |
|
<li class="selected"> |
|
<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 table-view"> |
|
<li id="item1mobile" class="table-view-cell segmented-controller-item selected"> |
|
Item 1 |
|
</li> |
|
<li id="item2mobile" class="table-view-cell segmented-controller-item"> |
|
Item 2 |
|
</li> |
|
<li id="item3mobile" class="table-view-cell segmented-controller-item"> |
|
Item 3 |
|
</li> |
|
</ul> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<!-- Badges --> |
|
<article class="component" id="badges"> |
|
<h3 class="component-title">Badges</h3> |
|
<p class="component-description">Badges come in four flavors and should be used to indicate "how many" of something there are.</p> |
|
|
|
<div class="component-example"> |
|
<span class="badge">1</span> |
|
<span class="badge-primary">2</span> |
|
<span class="badge-positive">3</span> |
|
<span class="badge-negative">4</span> |
|
<span class="badge badge-filled">1</span> |
|
<span class="badge-primary badge-filled">2</span> |
|
<span class="badge-positive badge-filled">3</span> |
|
<span class="badge-negative badge-filled">4</span> |
|
</div> |
|
|
|
|
|
{% highlight html %} |
|
<span class="badge">1</span> |
|
<span class="badge-primary">2</span> |
|
<span class="badge-positive">3</span> |
|
<span class="badge-negative">4</span> |
|
|
|
<span class="badge badge-filled">1</span> |
|
<span class="badge-primary badge-filled">2</span> |
|
<span class="badge-positive badge-filled">3</span> |
|
<span class="badge-negative badge-filled">4</span> |
|
{% endhighlight %} |
|
|
|
|
|
</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-positive button-block button-filled">Choose existing</a> |
|
</form> |
|
</div> |
|
|
|
{% highlight html %} |
|
<form> |
|
<input type="text" placeholder="Full name"> |
|
<input type="search" placeholder="Search"> |
|
<textarea rows="5"></textarea> |
|
<a class="button-positive button-block button-filled">Choose existing</a> |
|
</form> |
|
{% endhighlight %} |
|
|
|
</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> |
|
|
|
{% highlight html %} |
|
<form class="input-group"> |
|
<input type="text" placeholder="Full name"> |
|
<input type="email" placeholder="Email"> |
|
<input type="text" placeholder="Username"> |
|
</form> |
|
{% endhighlight %} |
|
|
|
</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> |
|
|
|
{% highlight html %} |
|
<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> |
|
{% endhighlight %} |
|
|
|
</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> |
|
|
|
{% highlight html %} |
|
<div class="toggle active"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
{% endhighlight %} |
|
|
|
<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> |
|
|
|
{% highlight js %} |
|
// Only needed if you want to fire a callback |
|
document |
|
.querySelector('#myToggle') |
|
.addEventListener('toggle', myFunction) |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<!-- Popovers --> |
|
<article class="component" id="popovers"> |
|
<h3 class="component-title">Popovers</h3> |
|
|
|
<div class="component-example"> |
|
<div id="myPopover" class="popover"> |
|
<header class="bar-nav"> |
|
<a class="button"> |
|
Left |
|
</a> |
|
<h3 class="title">Popover title</h3> |
|
<a class="button"> |
|
Right |
|
</a> |
|
</header> |
|
<ul class="table-view"> |
|
<li class="table-view-cell">Item1</li> |
|
<li class="table-view-cell">Item2</li> |
|
<li class="table-view-cell">Item3</li> |
|
<li class="table-view-cell">Item4</li> |
|
<li class="table-view-cell">Item5</li> |
|
<li class="table-view-cell">Item6</li> |
|
<li class="table-view-cell">Item7</li> |
|
<li class="table-view-cell">Item8</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
{% highlight html %} |
|
<div id="popover" class="popover"> |
|
<header class="bar-nav"> |
|
<a class="button"> |
|
Left |
|
</a> |
|
<h3 class="title">Popover title</h3> |
|
<a class="button"> |
|
Right |
|
</a> |
|
</header> |
|
<ul class="table-view"> |
|
<li class="table-view-cell">Item1</li> |
|
<li class="table-view-cell">Item2</li> |
|
<li class="table-view-cell">Item3</li> |
|
<li class="table-view-cell">Item4</li> |
|
<li class="table-view-cell">Item5</li> |
|
<li class="table-view-cell">Item6</li> |
|
<li class="table-view-cell">Item7</li> |
|
<li class="table-view-cell">Item8</li> |
|
</ul> |
|
</div> |
|
{% endhighlight %} |
|
|
|
<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> |
|
|
|
{% highlight html %} |
|
<header class="bar-nav"> |
|
<a href="#myPopover"> |
|
<h1 class="title">Popover title</h3> |
|
</a> |
|
</header> |
|
{% endhighlight %} |
|
|
|
</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-nav"> |
|
<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> |
|
|
|
{% highlight html %} |
|
<a href="#myModalexample" class="button">Open modal</a> |
|
<div id="myModalexample" class="modal"> |
|
<header class="bar-nav"> |
|
<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> |
|
{% endhighlight %} |
|
|
|
<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="assets/img/slide-1.jpg"> |
|
<span class="slide-text">← Slide me</span> |
|
</li> |
|
<li> |
|
<img src="assets/img/slide-2.jpg"> |
|
</li> |
|
<li> |
|
<img src="assets/img/slide-3.jpg"> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
{% highlight html %} |
|
<div class="slider" id="mySlider"> |
|
<ul> |
|
<li> |
|
<img src="assets/img/slide-1.jpg"> |
|
<span class="slide-text">← Slide me</span> |
|
</li> |
|
<li> |
|
<img src="assets/img/slide-2.jpg"> |
|
</li> |
|
<li> |
|
<img src="assets/img/slide-3.jpg"> |
|
</li> |
|
</ul> |
|
</div> |
|
{% endhighlight %} |
|
|
|
<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> |
|
|
|
{% highlight js %} |
|
// Only needed if you want to fire a callback |
|
document |
|
.querySelector('#mySlider') |
|
.addEventListener('slide', myFunction) |
|
{% endhighlight %} |
|
|
|
</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> |
|
|
|
{% highlight html %} |
|
<!-- A one.html link --> |
|
<a href="two.html">Two</a> |
|
{% endhighlight %} |
|
|
|
<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-nav 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> |
|
|
|
{% highlight html %} |
|
<!-- An one.html link that animates to two.html --> |
|
<a href="two.html" data-transition="fade">Two</a> |
|
{% endhighlight %} |
|
|
|
<p class="component-description">A working version of push:</p> |
|
|
|
<div class="component-example component-example-fullbleed"> |
|
<header class="bar-nav"> |
|
<h1 class="title">Push</h1> |
|
</header> |
|
<div class="content"> |
|
<ul class="table-view"> |
|
<li class="table-view-cell"> |
|
<a href="two.html" data-transition="slide-in"> |
|
Load new page with push |
|
</a> |
|
<span class="chevron"></span> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
{% highlight html %} |
|
<header class="bar-nav"> |
|
<h1 class="title">Push</h1> |
|
</header> |
|
<div class="content"> |
|
<ul class="table-view"> |
|
<li class="table-view-cell"> |
|
<a href="two.html" data-transition="slide-in"> |
|
Load new page with push |
|
</a> |
|
<span class="chevron"></span> |
|
</li> |
|
</ul> |
|
</div> |
|
{% endhighlight %} |
|
|
|
<p class="component-description">Have a link you don't want to intercepted by push? Try this:</p> |
|
|
|
{% highlight html %} |
|
<!-- Use data-ignore="push" to prevent the push.js interception --> |
|
<a href="http://www.google.com" data-ignore="push">Google<a> |
|
{% endhighlight %} |
|
|
|
<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> |
|
|
|
{% highlight js %} |
|
// Only needed if you want to fire a callback |
|
window.addEventListener('push', myFunction); |
|
{% endhighlight %} |
|
|
|
</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-nav, .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> |