Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
293 lines (251 sloc) 12.5 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</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="marketing/stylesheets/index.css">
<script src="vendor/assets/javascripts/foundation/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>
<div class="row">
<div class="eight columns">
<label for="customDropdown">Dropdown Label</label>
<select style="display:none;" id="customDropdown">
<option SELECTED>This is a dropdown</option>
<option>This is another option</option>
<option>Look, a third option</option>
</select>
<div class="custom dropdown">
<a href="#" class="current">This is a dropdown</a>
<a href="#" class="selector"></a>
<ul>
<li>This is a dropdown</li>
<li>This is another option</li>
<li>Look, a third option</li>
</ul>
</div>
<h4>Visibility Classes</h4>
<p>Foundation 3 allows you to easily turn elements on and off based on certain device criteria, like screen size, touch, or orientation.</p>
<h5>Screen Size</h5>
<p>The following text should describe the device you're using:
<strong class="show-for-xlarge">You are on a very large screen.</strong>
<strong class="show-for-large">You are on a large screen.</strong>
<strong class="show-for-large-up">You are on a large or very large screen.</strong>
<strong class="show-for-medium">You are on a medium screen.</strong>
<strong class="show-for-medium-down">You are on a medium or small screen.</strong>
<strong class="show-for-small">You are on a small screen, like a smartphone.</strong>
</p>
<p>This example uses the opposite rules, so the following text should inversely describe the device you're using:
<strong class="hide-for-xlarge">You are not on a very large screen.</strong>
<strong class="hide-for-large">You are not on a large screen.</strong>
<strong class="hide-for-large-up">You are not on a large or very large screen.</strong>
<strong class="hide-for-medium-down">You are not on a medium or small screen.</strong>
<strong class="hide-for-medium">You are not on a medium screen.</strong>
<strong class="hide-for-small">You are not on a small screen.</strong>
</p>
<h5>Orientation Detection</h5>
<p>The following text should describe the device you're using:
<strong class="show-for-landscape">You are in landscape orientation.</strong>
<strong class="show-for-portrait">You are in portrait orientation.</strong>
</p>
<h5>Touch Detection</h5>
<p>The following text should describe the device you're using:
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
</p>
<h4>Accordion</h4>
<ul class="accordion">
<li class="active">
<div class="title">
<h5>Accordion Panel 1</h5>
</div>
<div class="content">
<label for="customDropdown">Dropdown Label</label>
<select style="display:none;" id="customDropdown">
<option SELECTED>This is a dropdown</option>
<option>This is another option</option>
<option>Look, a third option</option>
</select>
<div class="custom dropdown">
<a href="#" class="current">This is a dropdown</a>
<a href="#" class="selector"></a>
<ul>
<li>This is a dropdown</li>
<li>This is another option</li>
<li>Look, a third option</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title">
<h5>Accordion Panel 2</h5>
</div>
<div class="content">
<label for="customDropdown">Dropdown Label</label>
<select style="display:none;" id="customDropdown">
<option SELECTED>This is a dropdown</option>
<option>This is another option</option>
<option>Look, a third option</option>
</select>
<div class="custom dropdown">
<a href="#" class="current">This is a dropdown</a>
<a href="#" class="selector"></a>
<ul>
<li>This is a dropdown</li>
<li>This is another option</li>
<li>Look, a third option</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title">
<h5>Accordion Panel 3</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>
<ul class="radius button-group">
<li>
<input type="submit" value="Save" class="medium secondary button" />
</li>
<li>
<input type="submit" value="Publish" class="medium success button" />
</li>
</ul>
<p>
<input type="submit" value="Publish" class="medium success button" />
<a href="" class="success button">Publish</a>
</p>
<p>
<a href="" class="disabled button">Publish</a> <a href="" class="disabled success button">Publish</a> <a href="" class="disabled alert button">Publish</a> <a href="" class="disabled secondary button">Publish</a>
</p>
<ul class="radius button-group">
<li>
<a href="" class="button">Save</a>
</li>
<li>
<a href="" class="button">Publish</a>
</li>
<li>
<div href="#" class="button split dropdown">
<a href="#">Split Button</a>
<span></span>
<ul>
<li><a href="#">Dropdown Item</a></li>
<li><a href="#">Another Dropdown Item</a></li>
<li class="divider"></li>
<li><a href="#">Last Item</a></li>
</ul>
</div>
</li>
<li>
<div href="#" class="button dropdown">
Dropdown Button
<ul>
<li><a href="#">Dropdown Item</a></li>
<li><a href="#">Another Dropdown Item</a></li>
<li class="divider"></li>
<li><a href="#">Last Item</a></li>
</ul>
</div>
</li>
</ul>
<p>
<div href="#" class="large secondary button split dropdown">
<a href="#">Split Button</a>
<span></span>
<ul>
<li><a href="#">Dropdown Item</a></li>
<li><a href="#">Another Dropdown Item</a></li>
<li class="divider"></li>
<li><a href="#">Last Item</a></li>
</ul>
</div>
</p>
</div>
<div class="four columns">
<div class="row">
<div class="six columns">
<img src="http://placehold.it/200x200" />
</div>
<div class="six columns">
<img src="http://placehold.it/200x200" />
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
<ul class="block-grid two-up">
<li><img src="http://placehold.it/200x200" /></li>
<li><img src="http://placehold.it/200x200" /></li>
</ul>
</div>
</div>
<!-- Included JS Files -->
<script src="vendor/assets/javascripts/foundation/jquery.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
<script src="vendor/assets/javascripts/foundation/app.js"></script>
<script>
$(window).load(function() {
$('#orbitTest').orbit({
fluid: '16x9'
});
});
$('#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>
Something went wrong with that request. Please try again.