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.
1097 lines
32 KiB
1097 lines
32 KiB
--- |
|
layout: default |
|
title: Ratchet ~ Components |
|
base_url: "../" |
|
--- |
|
|
|
<div class="docs-header"> |
|
<div class="container column-group"> |
|
<div class="column units-2"> |
|
<header class="docs-nav"> |
|
<h1 class="docs-title">Ratchet</h1> |
|
<a data-ignore="push" class="icon icon-list" href="/components"></a> |
|
<a data-ignore="push" class="version" href="/">Home</a> |
|
</header> |
|
</div> |
|
</div> |
|
|
|
<div class="docs-sub-content"> |
|
<h2 class="page-title">Components</h2> |
|
<p class="page-description">Design patterns that serve as basic building blocks</p> |
|
</div> |
|
|
|
<div class="platform-toggle"> |
|
<ul class="segmented-control"> |
|
<li class="platform-switch active" data-platform=""> |
|
<a>Base</a> |
|
</li> |
|
<li class="platform-switch" data-platform="platform-ios"> |
|
<a>iOS</a> |
|
</li> |
|
<!-- <li class="platform-switch" data-platform="platform-android"> |
|
<a>Android</a> |
|
</li> --> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div class="container"> |
|
<!-- Components --> |
|
<div class="docs-components column-group"> |
|
<div class="device-column column units-2 lg-units-5 pull-right"> |
|
<!-- In phone examples --> |
|
<div class="device"> |
|
<div class="device-content"> |
|
<div id="iwindow"> |
|
<header class="bar bar-nav"> |
|
<h1 class="title">Title</h1> |
|
</header> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="column units-2 lg-units-7"> |
|
<!-- 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 bar-nav"> |
|
<h1 class="title">Title</h1> |
|
</header> |
|
</div> |
|
|
|
{% highlight html %} |
|
<header class="bar 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 bar-nav"> |
|
<a class="btn pull-left"> |
|
Left |
|
</a> |
|
<a class="btn pull-right"> |
|
Right |
|
</a> |
|
<h1 class="title">Title</h1> |
|
</header> |
|
</div> |
|
|
|
{% highlight html %} |
|
<header class="bar bar-nav"> |
|
<a class="btn pull-left"> |
|
Left |
|
</a> |
|
<a class="btn pull-right"> |
|
Right |
|
</a> |
|
<h1 class="title">Title</h1> |
|
</header> |
|
{% endhighlight %} |
|
|
|
</article> |
|
<article class="component"> |
|
<h3 class="component-title">Title bar with link buttons and icons</h3> |
|
|
|
<div class="component-example component-example-fullbleed"> |
|
<header class="bar bar-nav"> |
|
<a class="btn btn-link pull-left"> |
|
Previous |
|
</a> |
|
<a class="btn btn-link pull-right"> |
|
Next |
|
</a> |
|
<h1 class="title">Title</h1> |
|
</header> |
|
</div> |
|
|
|
{% highlight html %} |
|
<header class="bar bar-nav"> |
|
<a class="btn btn-link pull-left"> |
|
<span class="icon icon-lg-left"></span> |
|
Previous |
|
</a> |
|
<a class="pull-right"> |
|
<span class="icon icon-refresh"></span> |
|
</a> |
|
<h1 class="title">Title</h1> |
|
</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. Feel free to add accompanying buttons too. The control will automatically layout itself out correctly.</p> |
|
|
|
<div class="component-example component-example-fullbleed"> |
|
<header class="bar bar-nav"> |
|
<a class="btn pull-left"> |
|
Left |
|
</a> |
|
<a class="btn pull-right"> |
|
Right |
|
</a> |
|
<ul class="segmented-control"> |
|
<li class="active"> |
|
<a>One</a> |
|
</li> |
|
<li> |
|
<a>Two</a> |
|
</li> |
|
<li> |
|
<a>Three</a> |
|
</li> |
|
</ul> |
|
</header> |
|
</div> |
|
|
|
{% highlight html %} |
|
<header class="bar bar-nav"> |
|
<a class="btn pull-left"> |
|
Left |
|
</a> |
|
<a class="btn pull-right"> |
|
Right |
|
</a> |
|
<ul class="segmented-control"> |
|
<li class="active"> |
|
<a>One</a> |
|
</li> |
|
<li> |
|
<a>Two</a> |
|
</li> |
|
<li> |
|
<a>Three</a> |
|
</li> |
|
</ul> |
|
</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 bar-tab"> |
|
<a class="tab-item active" href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
<a class="tab-item" href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
<a class="tab-item" href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
<a class="tab-item" href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
<a class="tab-item" href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</nav> |
|
</div> |
|
|
|
{% highlight html %} |
|
<nav class="bar bar-tab"> |
|
<a class="tab-item active" href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
<a class="tab-item" href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
<a class="tab-item" href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
<a class="tab-item" href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
<a class="tab-item" href="#"> |
|
<span class="icon icon-share"></span> |
|
<div class="tab-label">Label</div> |
|
</a> |
|
</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 bar-standard"> |
|
<ul class="segmented-control"> |
|
<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 bar-standard bar-header-secondary"> |
|
<a class="btn btn-block">Block level button</a> |
|
</div> |
|
</div> |
|
|
|
{% highlight html %} |
|
<!-- Segmented controller in standard bar fixed to top --> |
|
<nav class="bar bar-standard"> |
|
<ul class="segmented-control"> |
|
<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 bar-standard bar-header-secondary"> |
|
<a class="btn btn-block">Block level button</a> |
|
</div> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<!-- Typography --> |
|
<article class="component" id="typography"> |
|
<h3 class="component-title">Typography</h3> |
|
<p class="component-description">Use headings and paragraphs to title and describe sections of your app.</p> |
|
|
|
<div class="component-example component-example-fullbleed"> |
|
<h1>Heading</h1> |
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco.</p> |
|
</div> |
|
|
|
{% highlight html %} |
|
<h1>Heading</h1> |
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco.</p> |
|
{% 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 table-view-cell">Item 2</li> |
|
<li class="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"> |
|
<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> |
|
</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="btn">Button</a></li> |
|
<li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li> |
|
<li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li> |
|
<li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li> |
|
</ul> |
|
</div> |
|
|
|
{% highlight html %} |
|
<ul class="table-view"> |
|
<li class="table-view-cell">Item 1 <a class="btn">Button</a></li> |
|
<li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li> |
|
<li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li> |
|
<li class="table-view-cell">Item 4 <a class="btn btn-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">Carded table views</h3> |
|
|
|
<div class="component-example"> |
|
<div class="card"> |
|
<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> |
|
<li class="table-view-cell">Item 4</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
{% highlight html %} |
|
<div class="card"> |
|
<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> |
|
<li class="table-view-cell">Item 4</li> |
|
</ul> |
|
</div> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<!-- Buttons --> |
|
<article class="component" id="buttons"> |
|
<h3 class="component-title">Buttons</h3> |
|
<p class="component-description">Buttons come in many flavors and should be used for user actions.</p> |
|
|
|
<div class="component-example"> |
|
<a class="btn">Button</a> |
|
<a class="btn btn-primary">Button</a> |
|
<a class="btn btn-positive">Button</a> |
|
<a class="btn btn-negative">Button</a> |
|
<a class="btn btn-link">Button</a> |
|
</div> |
|
|
|
{% highlight html %} |
|
<a class="btn">Button</a> |
|
<a class="btn btn-primary">Button</a> |
|
<a class="btn btn-positive">Button</a> |
|
<a class="btn btn-negative">Button</a> |
|
<a class="btn btn-link">Button</a> |
|
|
|
<a class="btn"> |
|
<span class="icon icon-search"></span> |
|
Button |
|
</a> |
|
<a class="btn btn-primary"> |
|
<span class="icon icon-search"></span> |
|
Button |
|
</a> |
|
<a class="btn btn-positive"> |
|
<span class="icon icon-search"></span> |
|
Button |
|
</a> |
|
<a class="btn btn-negative"> |
|
<span class="icon icon-search"></span> |
|
Button |
|
</a> |
|
<a class="btn btn-link"> |
|
<span class="icon icon-left"></span> |
|
Button |
|
</a> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<article class="component" id="buttonsBadges"> |
|
<h3 class="component-title">Buttons with badges</h3> |
|
|
|
<div class="component-example"> |
|
<a class="btn">Badge button <span class="badge">1</span></a> |
|
<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a> |
|
<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a> |
|
<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a> |
|
</div> |
|
|
|
{% highlight html %} |
|
<a class="btn">Badge button <span class="badge">1</span></a> |
|
<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a> |
|
<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a> |
|
<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a> |
|
|
|
<a class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></a> |
|
<a class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></a> |
|
<a class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></a> |
|
<a class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></a> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<article class="component" id="blockButtons"> |
|
<h3 class="component-title">Block buttons</h3> |
|
|
|
<div class="component-example"> |
|
<a class="btn btn-block">Block button</a> |
|
<a class="btn btn-primary btn-block">Block button</a> |
|
<a class="btn btn-positive btn-block">Block button</a> |
|
<a class="btn btn-negative btn-block">Block button</a> |
|
|
|
<a class="btn btn-block btn-outlined">Block button</a> |
|
<a class="btn btn-primary btn-block btn-outlined">Block button</a> |
|
<a class="btn btn-positive btn-block btn-outlined">Block button</a> |
|
<a class="btn btn-negative btn-block btn-outlined">Block button</a> |
|
</div> |
|
|
|
{% highlight html %} |
|
<a class="btn btn-block">Block button</a> |
|
<a class="btn btn-primary btn-block">Block button</a> |
|
<a class="btn btn-positive btn-block">Block button</a> |
|
<a class="btn btn-negative btn-block">Block button</a> |
|
|
|
<a class="btn btn-block btn-outlined">Block button</a> |
|
<a class="btn btn-primary btn-block btn-outlined">Block button</a> |
|
<a class="btn btn-positive btn-block btn-outlined">Block button</a> |
|
<a class="btn btn-negative btn-block btn-outlined">Block button</a> |
|
{% endhighlight %} |
|
|
|
</article> |
|
|
|
<!-- Segmented Controller --> |
|
<article class="component" id="segmentedControllers"> |
|
<h3 class="component-title">Segmented control</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-control-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-control"> |
|
<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> |
|
<div class="card"> |
|
<span id="item1mobile" class="segmented-control-item active">Item 1</span> |
|
<span id="item2mobile" class="segmented-control-item">Item 2</span> |
|
<span id="item3mobile" class="segmented-control-item">Item 3</span> |
|
</div> |
|
</div> |
|
|
|
{% highlight html %} |
|
<ul class="segmented-control"> |
|
<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> |
|
<div class="card"> |
|
<span id="item1mobile" class="segmented-control-item active">Item 1</span> |
|
<span id="item2mobile" class="segmented-control-item">Item 2</span> |
|
<span id="item3mobile" class="segmented-control-item">Item 3</span> |
|
</div> |
|
</div> |
|
{% 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 badge-primary">2</span> |
|
<span class="badge badge-positive">3</span> |
|
<span class="badge badge-negative">4</span> |
|
<span class="badge badge-inverted">1</span> |
|
<span class="badge badge-primary badge-inverted">2</span> |
|
<span class="badge badge-positive badge-inverted">3</span> |
|
<span class="badge badge-negative badge-inverted">4</span> |
|
</div> |
|
|
|
{% highlight html %} |
|
<span class="badge">1</span> |
|
<span class="badge badge-primary">2</span> |
|
<span class="badge badge-positive">3</span> |
|
<span class="badge badge-negative">4</span> |
|
|
|
<span class="badge badge-inverted">1</span> |
|
<span class="badge badge-primary badge-inverted">2</span> |
|
<span class="badge badge-positive badge-inverted">3</span> |
|
<span class="badge badge-negative badge-inverted">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="btn btn-positive btn-block">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="btn btn-positive btn-block">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 component-example-fullbleed"> |
|
<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 component-example-fullbleed"> |
|
<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="popover" class="popover"> |
|
<header class="bar bar-nav"> |
|
<a class="btn btn-link pull-left"> |
|
Left |
|
</a> |
|
<a class="btn btn-link pull-right"> |
|
Right |
|
</a> |
|
<h3 class="title">Popover title</h3> |
|
</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 bar-nav"> |
|
<a class="btn btn-link pull-left"> |
|
Left |
|
</a> |
|
<a class="btn btn-link pull-right"> |
|
Right |
|
</a> |
|
<h3 class="title">Popover title</h3> |
|
</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 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="btn">Open modal</a> |
|
<div id="myModalexample" class="modal"> |
|
<header class="bar bar-nav"> |
|
<a class="btn pull-right" href="#myModalexample"> |
|
Close |
|
</a> |
|
<h1 class="title">Modal</h1> |
|
</header> |
|
|
|
<div class="content"> |
|
<div class="card"> |
|
<p>The contents of my modal</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
{% highlight html %} |
|
<a href="#myModalexample" class="btn">Open modal</a> |
|
<div id="myModalexample" class="modal"> |
|
<header class="bar bar-nav"> |
|
<a class="btn pull-right" href="#myModalexample"> |
|
Close |
|
</a> |
|
<h1 class="title">Modal</h1> |
|
</header> |
|
|
|
<div class="content"> |
|
<div class="card"> |
|
<p>The contents of my modal</p> |
|
</div> |
|
</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="{{ page.base_url }}docs-assets/img/slide-1.jpg"> |
|
<span class="slide-text">← Slide me</span> |
|
</li> |
|
<li> |
|
<img src="{{ page.base_url }}docs-assets/img/slide-2.jpg"> |
|
</li> |
|
<li> |
|
<img src="{{ page.base_url }}docs-assets/img/slide-3.jpg"> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
{% highlight html %} |
|
<div class="slider" id="mySlider"> |
|
<ul> |
|
<li> |
|
<img src="{{ page.base_url }}docs-assets/img/slide-1.jpg"> |
|
<span class="slide-text">← Slide me</span> |
|
</li> |
|
<li> |
|
<img src="{{ page.base_url }}docs-assets/img/slide-2.jpg"> |
|
</li> |
|
<li> |
|
<img src="{{ page.base_url }}docs-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 bar-nav"> |
|
<h1 class="title">Push</h1> |
|
</header> |
|
<div class="content"> |
|
<div class="card"> |
|
<ul class="table-view"> |
|
<li class="table-view-cell"> |
|
<a href="{{ page.base_url }}two.html" data-transition="slide-in"> |
|
Load new page with push |
|
</a> |
|
<span class="chevron"></span> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
{% highlight html %} |
|
<header class="bar bar-nav"> |
|
<h1 class="title">Push</h1> |
|
</header> |
|
<div class="content"> |
|
<div class="card"> |
|
<ul class="table-view"> |
|
<li class="table-view-cell"> |
|
<a href="{{ page.base_url }}two.html" data-transition="slide-in"> |
|
Load new page with push |
|
</a> |
|
<span class="chevron"></span> |
|
</li> |
|
</ul> |
|
</div> |
|
</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> |
|
|
|
<!-- Footer --> |
|
{% include footer.html %} |
|
</div> |
|
</div> |
|
</div>
|
|
|