Permalink
Fetching contributors…
Cannot retrieve contributors at this time
151 lines (121 sloc) 5.45 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">
<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>
<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>
<input type="submit" value="Publish" class="medium success button" />
<a href="" class="success button">Publish</a>
<ul class="radius button-group">
<li>
<a href="" class="secondary button">Save</a>
</li>
<li>
<a href="" class="success button">Publish</a>
</li>
</ul>
</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" />
</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.min.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.reveal.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.orbit-1.4.0.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.customforms.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.placeholder.min.js"></script>
<script src="vendor/assets/javascripts/foundation/jquery.tooltips.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>