playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

deleting the components page. it's duplication of the docs.

pull/249/head
connors 11 years ago
parent
bb48247b7c
commit
1f7c311e93
4 changed files with 0 additions and 1173 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 530
      examples/components/classic/index.html
  2. 57
      examples/components/classic/modals.html
  3. 530
      examples/components/default/index.html
  4. 56
      examples/components/default/modals.html

530
examples/components/classic/index.html
Unescape View File

@ -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 &amp; 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 &amp; 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>

57
examples/components/classic/modals.html
Unescape View File

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

530
examples/components/default/index.html
Unescape View File

@ -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 &amp; 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 &amp; 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>

56
examples/components/default/modals.html
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save