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.

530 lines
16 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<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">
<script src="../../../dist/ratchet.js"></script>
<script src="../../../docs/js/fingerblast.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function() {
$(window).on('load', function () { new FingerBlast('.body'); });
});
</script>
<style>
.content > [class*="bar"] {
position: relative;
}
.slider,
.slider li,
.slider li img {
width: 100%;
}
</style>
</head>
<!-- ontouchstart property makes :active/:hover behaviors work on everything -->
<body class="body" ontouchstart="">
<!-- POPOVER ============================================================ -->
<div id="myPopover" class="popover">
<header class="bar-nav">
<a class="button" href="#">
Open
</a>
<h3 class="title">Popover title</h3>
<a class="button" href="#">
Filter
</a>
</header>
<ul class="table-view">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With counts</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
<li>Item2 <span class="count">1</span></li>
<li>Item3 <span class="count">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
</ul>
</div>
<div class="content">
<header class="bar-nav">
<ul class="segmented-controller">
<li class="selected">
<a href="#item1">Thing one</a>
</li>
<li>
<a href="#item2">Thing two</a>
</li>
</ul>
</header>
<div>
<div id="item1" class="segmented-controller-item active"><p>section #1</p></div>
<div id="item2" class="segmented-controller-item"><p>section #2</p></div>
</div>
<!-- SLIDER ============================================================ -->
<div class="slider">
<ul>
<li>
<img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
</li>
<li>
<img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
</li>
<li>
<img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
</li>
</ul>
</div>
<!-- TITLEBAR ============================================================ -->
<!-- Title-bar left and right buttons -->
<header class="bar-nav">
<a class="button button-prev" href="#">
Left
</a>
<h1 class="title">Title</h1>
<a class="button button-next" href="#">
Right
</a>
</header>
<!-- Title-bar -->
<header class="bar-nav">
<h1 class="title"><a href="#myPopover">Title</a></h1>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open fatty
</a>
<h1 class="title">Title</h1>
</header>
<!-- Title-bar right button -->
<header class="bar-nav">
<h1 class="title">Title</h1>
<a class="button" href="#">
Filter
</a>
</header>
<div class="test"></div>
<!-- Title-bar right button -->
<header class="bar-nav">
<ul class="segmented-controller">
<li class="selected">
<a href="#">Thing one</a>
</li>
<li>
<a href="#">Thing two</a>
</li>
<li>
<a href="#">Thing three</a>
</li>
</ul>
</header>
<!-- Title-bar left button -->
<header class="bar-nav" id="newshit">
<a class="button-primary open-shelf" href="#">
Open
</a>
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
<a class="button" href="#">
Filter
</a>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open
</a>
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
<a class="button" href="#">
Filter
</a>
</header>
<!-- BAR-TAB ============================================================ -->
<!-- Bar-tab 5 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- Bar-tab 4 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- Bar-tab 3 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- SEARCH BAR ============================================================ -->
<!-- Search bar -->
<div class="bar-standard">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<!-- CONTROLLER BAR ============================================================ -->
<!-- Segmented controller as a bar -->
<nav class="bar-standard">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
</nav>
<!-- Segmented controller as a bar w/ 3 options -->
<nav class="bar-standard">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li>
<a href="#">Thing one</a>
</li>
</ul>
</nav>
<!-- BUTTON BAR ============================================================ -->
<!-- Button bar -->
<div class="bar-standard">
<a class="button-block">Block level button</a>
</div>
<!-- Button bar main -->
<div class="bar-standard">
<a class="button-primary button-block">Block level button</a>
</div>
<!-- Button bar positive -->
<div class="bar-standard">
<a class="button-positive button-block">Block level button</a>
</div>
<!-- Button bar negative -->
<div class="bar-standard">
<a class="button-negative button-block">Block level button</a>
</div>
<!-- BUTTONS ============================================================ -->
<!-- Standard buttons -->
<a class="button">Button</a>
<a class="button-primary">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>
<!-- Buttons w/ counts -->
<a class="button">Button <span class="count">1</span></a>
<a class="button-primary">Button <span class="count">1</span></a>
<a class="button-positive">Button <span class="count">1</span></a>
<a class="button-negative">Button <span class="count">1</span></a>
<!-- Buttons at block level -->
<a class="button-block">Block level button</a>
<a class="button-primary button-block">Block level button</a>
<a class="button-positive button-block">Block level button</a>
<a class="button-negative button-block">Block level button</a>
<!-- Buttons at block level w/ counts -->
<a class="button-block">Block level button <span class="count">1</span></a>
<a class="button-primary button-block">Block level button <span class="count">1</span></a>
<a class="button-positive button-block">Block level button <span class="count">1</span></a>
<a class="button-negative button-block">Block level button <span class="count">1</span></a>
<!-- TOGGLE ============================================================ -->
<div class="toggle">
<div class="toggle-handle"></div>
</div>
<!-- COUNTS ============================================================ -->
<span class="count">1</span>
<span class="count-primary">2</span>
<span class="count-positive">3</span>
<span class="count-negative">4</span>
<span class="count">5</span>
<!-- LIST ============================================================ -->
<ul class="table-view">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With counts</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
<li>Item2 <span class="count">1</span></li>
<li>Item3 <span class="count">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
<li class="table-view-divider">With chevrons &amp; counts</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count-primary">1</span></li>
<li>Item2 <span class="chevron"></span><span class="count-negative">1</span></li>
<li>Item3 <span class="chevron"></span><span class="count-positive">1</span></li>
<li class="table-view-divider">With buttons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li>Item2 <a class="button-primary">Button</a></li>
<li>Item3 <a class="button-positive">Button</a></li>
<li>Item4 <a class="button-negative">Button</a></li>
<li class="table-view-divider">With a toggle</li>
<li>
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
<a href="#">
Item2
</a>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Item3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<ul class="table-view inset">
<li class="table-view-divider">Normal</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With counts</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
<li>Item2 <span class="count">1</span></li>
<li>Item3 <span class="count">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
<li class="table-view-divider">With chevrons &amp; counts</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count">1</span></li>
<li>Item2 <span class="chevron"></span><span class="count">1</span></li>
<li>Item3 <span class="chevron"></span><span class="count">1</span></li>
<li class="table-view-divider">With buttons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li>Item2 <a class="button-primary">Button</a></li>
<li>Item3 <a class="button-positive">Button</a></li>
<li>Item4 <a class="button-negative">Button</a></li>
<li class="table-view-divider">With a toggle</li>
<li>
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Item2
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Item3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-divider">Bottom table-view-divider test</li>
</ul>
<!-- List with <a>'s -->
<ul class="inset table-view">
<li>
<a href="#">Item1</a>
</li>
<li>
<a href="#">Item2</a>
</li>
</ul>
<!-- SEGMENTED CONTROLLER ============================================================ -->
<!-- Segmented controller with 2 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li class="selected"><a href="#">Thing two</a></li>
</ul>
<!-- Segmented controller with 3 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
</ul>
<!-- Segmented controller with 4 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li>
</ul>
<!-- Segmented controller with 5 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li>
<li><a href="#">Thing five</a></li>
</ul>
<!-- FORMS ============================================================ -->
<!-- Input -->
<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>
<!-- Input group -->
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
<!-- Input group with labels-->
<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>
</body>
</html>