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

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.