Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

441 lines (383 sloc) 14.035 kb
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Welcome to Foundation Testing</title>
<!-- Included CSS Files -->
<!-- Combine and Compress These CSS Files -->
<link rel="stylesheet" href="stylesheets/globals.css">
<link rel="stylesheet" href="stylesheets/typography.css">
<link rel="stylesheet" href="stylesheets/grid.css">
<link rel="stylesheet" href="stylesheets/ui.css">
<link rel="stylesheet" href="stylesheets/forms.css">
<link rel="stylesheet" href="stylesheets/orbit.css">
<link rel="stylesheet" href="stylesheets/reveal.css">
<link rel="stylesheet" href="stylesheets/mobile.css">
<!-- End Combine and Compress These CSS Files -->
<link rel="stylesheet" href="stylesheets/app.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<script src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
.display-grid .row { background: #eee; margin-bottom: 8px; }
.display-grid .column, .display-grid .columns { background: #ddd; }
</style>
</head>
<body>
<!-- container -->
<div class="container">
<div class="row">
<div class="twelve columns">
<h2>Foundation Testbed</h2>
<p>This page includes common elements and weird edge cases so we can test the crap out of stuff. It will probably change in each release to test new elements.</p>
<hr />
</div>
</div>
<div class="row">
<div class="twelve columns">
<ul class="nav-bar">
<li>
<a href="#" class="main">Nav Item 1</a>
</li>
<li class="has-flyout">
<a href="#" class="main">Nav Item 2</a>
<a href="#" class="flyout-toggle"><span></span></a>
<div class="flyout small">
<h5>Small Example (200px)</h5>
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. </p>
</div>
</li>
<li class="has-flyout">
<a href="#" class="main">Nav Item 3</a>
<a href="#" class="flyout-toggle"><span></span></a>
<div class="flyout">
Content...
</div>
</li>
<li class="has-flyout">
<a href="#" class="main">Nav Item 4</a>
<a href="#" class="flyout-toggle"><span></span></a>
<div class="flyout large right">
Content...
</div>
</li>
<li class="has-flyout">
<a href="#" class="main" data-reveal-id="testModal">Reveal</a>
<a href="#" class="flyout-toggle"><span></span></a>
<div class="flyout large right">
Content...
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="eight columns">
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Gene Splicing</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Gene Splicing</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Gene Splicing</a></li>
<li class="current"><a href="#">Home</a></li>
</ul>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li class="unavailable"><a href="#">Gene Splicing</a></li>
<li class="current"><a href="#">Home</a></li>
</ul>
<ul class="breadcrumbs">
<li><span>Home</span></li>
<li><span>Features</span></li>
<li><span>Gene Splicing</span></li>
<li class="current"><span>Home</span></li>
</ul>
<form>
<input type="submit" class="tiny blue nice button radius" />
<a href="#" class="tiny blue nice button radius">Link Button</a>
</form>
<form>
<input type="submit" class="small blue nice button radius" />
<a href="#" class="small blue nice button radius">Link Button</a>
</form>
<form>
<input type="submit" class="medium blue nice button radius" />
<a href="#" class="medium blue nice button radius">Link Button</a>
</form>
<form>
<input type="submit" class="large blue nice button radius" />
<a href="#" class="large blue nice button radius">Link Button</a>
</form>
<h3>The Grid</h3>
<div class="display-grid">
<div class="row">
<div class="twelve columns">
This is a twelve column section in a row.
</div>
</div>
<div class="row">
<div class="six columns">
Six Columns
</div>
<div class="six columns">
Six Columns
</div>
</div>
<div class="row">
<div class="eight columns">
Eight Columns
</div>
<div class="four columns">
Four Columns
</div>
</div>
<div class="row">
<div class="four columns">
Four Columns
</div>
<div class="four columns">
Four Columns
</div>
<div class="four columns">
Four Columns
</div>
</div>
<div class="row">
<div class="three columns">
Three Columns
</div>
<div class="three columns">
Three Columns
</div>
<div class="three columns">
Three Columns
</div>
<div class="three columns">
Three Columns
</div>
</div>
<div class="row">
<div class="ten columns">
Ten Columns
</div>
<div class="two columns">
Two
</div>
</div>
<div class="row">
<div class="two columns">
Two
</div>
<div class="two columns">
Two
</div>
<div class="two columns">
Two
</div>
<div class="two columns">
Two
</div>
<div class="two columns">
Two
</div>
<div class="two columns">
Two
</div>
</div>
</div>
<h3>Tabs</h3>
<dl class="contained mobile tabs">
<dd><a href="#simple1" class="active">Complex Form Content</a></dd>
<dd><a href="#simple2">Modal Dialog Call</a></dd>
<dd><a href="#simple3">UI Elements</a></dd>
</dl>
<ul class="contained tabs-content">
<li class="active" id="simple1Tab">
<form>
<label>Label</label>
<input type="text" class="input-text expand" placeholder="input.input-text.expand" />
<p>This is a paragraph with an inline select element.
<select>
<option>Option 1</option>
</select>
</p>
<input type="submit" class="blue button" value="Submit Input" />
</form>
<form class="nice">
<label>Nice Form Label</label>
<input type="text" class="input-text expand" placeholder="input.input-text.expand" />
<p>This is a paragraph with an inline select element.
<select>
<option>Option 1</option>
</select>
</p>
<input type="submit" class="nice blue button" value="Submit Input" />
</form>
<form class="custom">
<label>Custom Form Label</label>
<input type="text" class="input-text expand" placeholder="input.input-text.expand" />
<p>This is a paragraph with an inline select element.
<select class="small">
<option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
</p>
<p>This is a paragraph with an inline select element.
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
</p>
<input type="submit" class="nice blue button" value="Submit Input" />
</form>
</li>
<li id="simple2Tab">
<p>This button calls a modal from within the tabs.</p>
<a href="#" data-reveal-id="testModal" class="nice blue button">Fire Reveal Modal</a>
</li>
<li id="simple3Tab">
<div class="alert-box success">
This is a success alert (div.alert-box.success).
<a href="" class="close">&times;</a>
</div>
<p>
<span class="blue radius label">Added 01/19</span> This <span class="has-tip bottom" id="interestingTip" data-width="210" title="Some small explanation or tidbit that would live within the tooltip. Should only work for simple text tips.">paragraph</span> has an inline label to let you know that it was added on January 19, 2012 courtesy of Thomas Klemm. Thanks man!
</p>
<ul class="pagination">
<li class="unavailable"><a href="">&laquo;</a></li>
<li class="current"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="unavailable"><a href="">&hellip;</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li><a href="">&raquo;</a></li>
</ul>
</li>
</ul>
<h3>Buttons</h3>
<div class="row">
<div class="six columns">
<p><a href="#" class="tiny white button">Tiny White Button</a></p>
<p><a href="#" class="small blue button">Small Blue Button</a></p>
<p><a href="#" class="red button">Medium Red Button</a></p>
<p><a href="#" class="large black button">Large Black Button</a></p>
</div>
<div class="six columns">
<p><a href="#" class="nice radius tiny white button">Tiny White Button</a></p>
<p><a href="#" class="nice radius small blue button">Nice Blue Button</a></p>
<p><a href="#" class="nice radius red button">Nice Red Button</a></p>
<p><a href="#" class="nice radius large black button">Nice Black Button</a></p>
</div>
</div>
<h3>Reveal</h3>
<div class="row">
<div class="six columns">
<h6>Data Attributes</h6>
<p>
<a href="#" class="tiny blue button" data-reveal-id="testModal">Default</a>
<a href="#" class="tiny blue button" data-reveal-id="testModal" data-animation="fade">Fade</a>
<a href="#" class="tiny blue button" data-reveal-id="testModal" data-animation="none">None</a>
</p>
<h6>JavaScript</h6>
<p>
<a href="#" id="fireReveal" class="tiny blue button">Default</a>
<a href="#" id="fireRevealFade" class="tiny blue button">Fade</a>
<a href="#" id="fireRevealNone" class="tiny blue button">None</a>
</p>
</div>
</div>
</div>
<div class="four columns">
<dl class="sub-nav">
<dt>Filter:</dt>
<dd class="active"><a href="#">All</a></dd>
<dd><a href="#">Active</a></dd>
<dd><a href="#">Pending</a></dd>
</dl>
<h4>Other Resources</h4>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<ul class="disc">
<li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</li>
<li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</li>
<li><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</li>
</ul>
<p><a href="#" class="tiny white button">Tiny White Button</a></p>
</div>
</div>
</div>
<!-- container -->
<div id="testModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It's mine.</p>
<form class="nice custom">
<label>Custom Form Label</label>
<input type="text" class="input-text expand" placeholder="input.input-text.expand" />
<p>This is a paragraph with an inline select element.
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
</select>
</p>
<input type="submit" class="nice blue button" value="Submit Input" />
</form>
<a class="close-reveal-modal">&#215;</a>
</div>
<!-- Included JS Files -->
<script src="javascripts/jquery.min.js"></script>
<!-- Combine and Compress These JS Files -->
<script src="javascripts/jquery.reveal.js"></script>
<script src="javascripts/jquery.orbit-1.4.0.js"></script>
<script src="javascripts/jquery.customforms.js"></script>
<script src="javascripts/jquery.placeholder.min.js"></script>
<script src="javascripts/jquery.tooltips.js"></script>
<!-- End Combine and Compress These JS Files -->
<script src="javascripts/app.js"></script>
<script>
$('#testModal').bind('reveal:open reveal:opened reveal:close reveal:closed', function (event) {
console.log(event);
});
$('#fireReveal').click(function (event) {
event.preventDefault();
$('#testModal').reveal();
});
$('#fireRevealFade').click(function (event) {
event.preventDefault();
$('#testModal').reveal({animation: 'fade'});
});
$('#fireRevealNone').click(function (event) {
event.preventDefault();
$('#testModal').reveal({animation: 'none'});
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.