Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

195 lines (172 sloc) 7.324 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>Foundation Typography Testing</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/styles.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]-->
</head>
<body>
<div class="row">
<div class="twelve columns">
<p><a href="index.html">&laquo; Back</a></p>
<h2>Foundation Typography Testing</h2>
<hr />
<dl class="sub-nav">
<dt>Go to:</dt>
<dd><a href="#headers">Headers</a></dd>
<dd><a href="#links">Links</a></dd>
<dd><a href="#lists">Lists</a></dd>
<dd><a href="#blockquotes">Blockquotes</a></dd>
</dl>
</div>
</div>
<!-- Test Foundation Components Here -->
<div class="row">
<div class="twelve columns">
<h3>Typography</h3>
<h4 class="subheader">Foundation 3 uses a modular scale to generate typography. That means a great, logical vertical rhythm for every design.</h4>
<div class="row">
<div class="four columns">
<a name="headers"></a>
<h4>General Typography</h4>
<p>These are the basic elements of typography and rhythm in Foundation 3.</p>
</div>
<div class="eight columns">
<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is small header.</h5>
<h6>h6. This is very small header.</h6>
<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, let's see&#8230; did you know that there are storms occurring on Jupiter that are larger than the Earth? That's pretty cool.</p>
</div>
</div>
<br><br>
<div class="row">
<div class="four columns">
<h4>Header Styles</h4>
<p>Optional Subheader Styles</p>
</div>
<div class="eight columns">
<h2>This is a very large main header.</h2>
<h4 class="subheader">This is a smaller subheader.</h4>
<h3>This is a large header. <small>This is a small segment of that header.</small></h3>
</div>
</div>
<br><br>
<div class="row">
<div class="four columns">
<a name="links"></a>
<h4>Links</h4>
<p>Links are very standard, and the color is preset.</p>
</div>
<div class="eight columns">
<h2><a href="#">This is a header link.</a></h2>
<h3><a href="#">This is a header link.</a></h3>
<h4><a href="#">This is a header link.</a></h4>
<h5><a href="#">This is a header link.</a></h5>
<p><a href="#">This is a standard inline paragraph link.</a></p>
</div>
</div>
<br><br>
<div class="row">
<div class="four columns">
<a name="lists"></a>
<h4>Lists</h4>
<p>Lists are helpful for, well, lists of things.</p>
</div>
<div class="eight columns">
<h6>ul.disc</h6>
<ul class="disc">
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ul>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<br>
<h6>ul.circle</h6>
<ul class="circle">
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ul>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<br>
<h6>ul.square</h6>
<ul class="square">
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ul>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
<br><br>
<div class="row">
<div class="four columns">
<a name="blockquotes"></a>
<h4>Blockquotes</h4>
<p>Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.</p>
</div>
<br>
<div class="eight columns">
<blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
</div>
</div>
</div>
</div>
<!-- Included JS Files -->
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.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 type="text/javascript">
// Page-Specific JavaScript Goes Here
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.