mirror of https://github.com/twbs/ratchet.git
connors
11 years ago
4 changed files with 0 additions and 1173 deletions
@ -1,530 +0,0 @@
|
||||
<!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"> |
||||
<link rel="stylesheet" href="../../../dist/ratchet-theme.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 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 table-view-divider">With badges</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item2 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item3 <span class="badge">1</span></li> |
||||
<li class="table-view-cell table-view-divider">With chevrons</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">Item2 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">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 selected"><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/ badges --> |
||||
<a class="button">Button <span class="badge">1</span></a> |
||||
<a class="button-primary">Button <span class="badge">1</span></a> |
||||
<a class="button-positive">Button <span class="badge">1</span></a> |
||||
<a class="button-negative">Button <span class="badge">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/ badges --> |
||||
<a class="button-block">Block level button <span class="badge">1</span></a> |
||||
<a class="button-primary button-block">Block level button <span class="badge">1</span></a> |
||||
<a class="button-positive button-block">Block level button <span class="badge">1</span></a> |
||||
<a class="button-negative button-block">Block level button <span class="badge">1</span></a> |
||||
|
||||
<!-- TOGGLE ============================================================ --> |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
|
||||
<!-- BADGES ============================================================ --> |
||||
<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">5</span> |
||||
|
||||
<!-- LIST ============================================================ --> |
||||
<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 table-view-divider">With badges</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item2 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item3 <span class="badge">1</span></li> |
||||
<li class="table-view-cell table-view-divider">With chevrons</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">Item2 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">Item3 <span class="chevron"></span></li> |
||||
<li class="table-view-cell table-view-divider">With chevrons & badges</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li> |
||||
<li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge-negative">1</span></li> |
||||
<li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge-positive">1</span></li> |
||||
<li class="table-view-cell table-view-divider">With buttons</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
||||
<li class="table-view-cell">Item2 <a class="button-primary">Button</a></li> |
||||
<li class="table-view-cell">Item3 <a class="button-positive">Button</a></li> |
||||
<li class="table-view-cell">Item4 <a class="button-negative">Button</a></li> |
||||
<li class="table-view-cell table-view-divider">With a toggle</li> |
||||
<li class="table-view-cell"> |
||||
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a href="#"> |
||||
Item2 |
||||
</a> |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
Item3 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<ul class="table-view inset"> |
||||
<li class="table-view-cell table-view-divider">Normal</li> |
||||
<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 table-view-divider">With badges</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item2 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item3 <span class="badge">1</span></li> |
||||
<li class="table-view-cell table-view-divider">With chevrons</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">Item2 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">Item3 <span class="chevron"></span></li> |
||||
<li class="table-view-cell table-view-divider">With chevrons & badges</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge">1</span></li> |
||||
<li class="table-view-divider">With buttons</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
||||
<li class="table-view-cell">Item2 <a class="button-primary">Button</a></li> |
||||
<li class="table-view-cell">Item3 <a class="button-positive">Button</a></li> |
||||
<li class="table-view-cell">Item4 <a class="button-negative">Button</a></li> |
||||
<li class="table-view-cell table-view-divider">With a toggle</li> |
||||
<li class="table-view-cell"> |
||||
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
Item2 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
Item3 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell 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> |
||||
@ -1,57 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Modal slideup</title> |
||||
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
|
||||
<link rel="stylesheet" href="../../../dist/ratchet.css"> |
||||
<link rel="stylesheet" href="../../../dist/theme-classic.css"> |
||||
<script src="../../../dist/ratchet.js"></script> |
||||
</head> |
||||
<body> |
||||
|
||||
<header class="bar-nav"> |
||||
<h1 class="title">Modal slideup</h1> |
||||
</header> |
||||
|
||||
<div class="content content-padded"> |
||||
<a href="#myModal" class="button">Open modal</a> |
||||
</div> |
||||
|
||||
<div id="myModal" class="modal"> |
||||
<header class="bar-nav"> |
||||
<h1 class="title">Modal</h1> |
||||
<a class="button" href="#myModal"> |
||||
Close |
||||
</a> |
||||
</header> |
||||
|
||||
<div class="content content-padded"> |
||||
<p>Honey, check it out, you got me mesmerized |
||||
With your black hair and fat-ass thighs |
||||
Street poetry is my everyday |
||||
But yo, I gotta stop when you trot my way |
||||
If I was workin at the club you would not pay |
||||
Aiyyo, my man phife diggy, he got somthin to say</p> |
||||
|
||||
<p>I like em brown, yellow, puero rican or hatian |
||||
Name is phife dawg from the zulu nation |
||||
Told you in the jam that we can get down |
||||
Now lets knock the boots like the group h-town |
||||
You got bbd all on your bedroom wall |
||||
But Im above the rim and this is how I ball |
||||
A pretty little somethin on the new york street |
||||
This is how I represent over this here beat</p> |
||||
<p>Talkin bout you</p> |
||||
|
||||
<p>Yo, I took you out</p> |
||||
<p>But sex was on my mind for the whole damn route |
||||
My mind was in a frenzy and a horny state |
||||
But I couldnt drop dimes cause *you couldnt relate*</p> |
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -1,530 +0,0 @@
|
||||
<!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 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 table-view-divider">With badges</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item2 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item3 <span class="badge">1</span></li> |
||||
<li class="table-view-cell table-view-divider">With chevrons</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">Item2 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">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 selected"><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/ badges --> |
||||
<a class="button">Button <span class="badge">1</span></a> |
||||
<a class="button-primary">Button <span class="badge">1</span></a> |
||||
<a class="button-positive">Button <span class="badge">1</span></a> |
||||
<a class="button-negative">Button <span class="badge">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/ badges --> |
||||
<a class="button-block">Block level button <span class="badge">1</span></a> |
||||
<a class="button-primary button-block">Block level button <span class="badge">1</span></a> |
||||
<a class="button-positive button-block">Block level button <span class="badge">1</span></a> |
||||
<a class="button-negative button-block">Block level button <span class="badge">1</span></a> |
||||
|
||||
<!-- TOGGLE ============================================================ --> |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
|
||||
<!-- BADGES ============================================================ --> |
||||
<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">5</span> |
||||
|
||||
<!-- LIST ============================================================ --> |
||||
<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 table-view-divider">With badges</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item2 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item3 <span class="badge">1</span></li> |
||||
<li class="table-view-cell table-view-divider">With chevrons</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">Item2 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">Item3 <span class="chevron"></span></li> |
||||
<li class="table-view-cell table-view-divider">With chevrons & badges</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li> |
||||
<li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge-negative">1</span></li> |
||||
<li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge-positive">1</span></li> |
||||
<li class="table-view-cell table-view-divider">With buttons</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
||||
<li class="table-view-cell">Item2 <a class="button-primary">Button</a></li> |
||||
<li class="table-view-cell">Item3 <a class="button-positive">Button</a></li> |
||||
<li class="table-view-cell">Item4 <a class="button-negative">Button</a></li> |
||||
<li class="table-view-cell table-view-divider">With a toggle</li> |
||||
<li class="table-view-cell"> |
||||
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
<a href="#"> |
||||
Item2 |
||||
</a> |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
Item3 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
|
||||
<ul class="table-view inset"> |
||||
<li class="table-view-cell table-view-divider">Normal</li> |
||||
<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 table-view-divider">With badges</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item2 <span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item3 <span class="badge">1</span></li> |
||||
<li class="table-view-cell table-view-divider">With chevrons</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">Item2 <span class="chevron"></span></li> |
||||
<li class="table-view-cell">Item3 <span class="chevron"></span></li> |
||||
<li class="table-view-cell table-view-divider">With chevrons & badges</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge">1</span></li> |
||||
<li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge">1</span></li> |
||||
<li class="table-view-divider">With buttons</li> |
||||
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
||||
<li class="table-view-cell">Item2 <a class="button-primary">Button</a></li> |
||||
<li class="table-view-cell">Item3 <a class="button-positive">Button</a></li> |
||||
<li class="table-view-cell">Item4 <a class="button-negative">Button</a></li> |
||||
<li class="table-view-cell table-view-divider">With a toggle</li> |
||||
<li class="table-view-cell"> |
||||
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
Item2 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell"> |
||||
Item3 |
||||
<div class="toggle"> |
||||
<div class="toggle-handle"></div> |
||||
</div> |
||||
</li> |
||||
<li class="table-view-cell 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> |
||||
@ -1,56 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Modal slideup</title> |
||||
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
||||
|
||||
<link rel="stylesheet" href="../../../dist/ratchet.css"> |
||||
<script src="../../../dist/ratchet.js"></script> |
||||
</head> |
||||
<body> |
||||
|
||||
<header class="bar-nav"> |
||||
<h1 class="title">Modal slideup</h1> |
||||
</header> |
||||
|
||||
<div class="content content-padded"> |
||||
<a href="#myModal" class="button">Open modal</a> |
||||
</div> |
||||
|
||||
<div id="myModal" class="modal"> |
||||
<header class="bar-nav"> |
||||
<h1 class="title">Modal</h1> |
||||
<a class="button" href="#myModal"> |
||||
Close |
||||
</a> |
||||
</header> |
||||
|
||||
<div class="content content-padded"> |
||||
<p>Honey, check it out, you got me mesmerized |
||||
With your black hair and fat-ass thighs |
||||
Street poetry is my everyday |
||||
But yo, I gotta stop when you trot my way |
||||
If I was workin at the club you would not pay |
||||
Aiyyo, my man phife diggy, he got somthin to say</p> |
||||
|
||||
<p>I like em brown, yellow, puero rican or hatian |
||||
Name is phife dawg from the zulu nation |
||||
Told you in the jam that we can get down |
||||
Now lets knock the boots like the group h-town |
||||
You got bbd all on your bedroom wall |
||||
But Im above the rim and this is how I ball |
||||
A pretty little somethin on the new york street |
||||
This is how I represent over this here beat</p> |
||||
<p>Talkin bout you</p> |
||||
|
||||
<p>Yo, I took you out</p> |
||||
<p>But sex was on my mind for the whole damn route |
||||
My mind was in a frenzy and a horny state |
||||
But I couldnt drop dimes cause *you couldnt relate*</p> |
||||
</div> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue