<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
<h2>Headings and paragraphs</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p>
<divclass="row">
<divclass="span4 columns">
<h2>Headings and copy</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p>
</div>
<divclass="span6 columns">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
...
...
@@ -342,40 +345,55 @@
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<h2>Emphasis, addresses, & abbreviations</h2>
<p>
<code><strong></code>
<code><em></code>
<code><address></code>
<code><abbr></code>
</p>
<h4>When to use</h4>
<p>Emphasis tags (<code><strong></code> and <code><em></code>) should be used to add visual distinction between a word or phrase and its surrounding copy. Use <code><strong></code> for plain old attention and <code><em></code> for <em>slick</em> attention and titles.</p>
<h3>Emphasis in a paragraph</h3>
<p><ahref="">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
<h3>Addresses</h3>
<p>The <code>address</code> element is used for—you guessed it!—addresses. Here's how it looks:</p>
<address>
<strong>Twitter, Inc.</strong><br/>
795 Folsom Ave, Suite 600<br/>
San Francisco, CA 94107<br/>
<abbrtitle="Phone">P:</abbr> (123) 456-7890
</address>
<p><strong>Note:</strong> Each line in an <code>address</code> must end with a line-break (<code><br /></code>) to properly structure the content as it is read in real life without any styles applied.</p>
<h3>Abbreviations</h3>
<p>For abbreviations and acronyms, use the <code>abbr</code> tag (<code>acronym</code> is deprecated in <abbrtitle="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
<h2>Blockquotes</h2>
<p>
<code><blockquote></code>
<code><p></code>
<code><cite></code>
</p>
<p>Be sure to wrap your <code>blockquote</code> around <code>paragraph</code> and <code>cite</code> tags. When citing a source, use the <code>cite</code> element. The CSS will automatically preface a name with an em dash (&mdash;).</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
<cite>Dr. Julius Hibbert</cite>
</blockquote>
<divclass="row">
<divclass="span4 columns">
<h2>Misc. elements</h2>
<p>Using emphasis, addresses, & abbreviations</p>
<p>
<code><strong></code>
<code><em></code>
<code><address></code>
<code><abbr></code>
</p>
</div>
<divclass="span12 columns">
<h4>When to use</h4>
<p>Emphasis tags (<code><strong></code> and <code><em></code>) should be used to add visual distinction between a word or phrase and its surrounding copy. Use <code><strong></code> for plain old attention and <code><em></code> for <em>slick</em> attention and titles.</p>
<h3>Emphasis in a paragraph</h3>
<p><ahref="">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
<h3>Addresses</h3>
<p>The <code>address</code> element is used for—you guessed it!—addresses. Here's how it looks:</p>
<address>
<strong>Twitter, Inc.</strong><br/>
795 Folsom Ave, Suite 600<br/>
San Francisco, CA 94107<br/>
<abbrtitle="Phone">P:</abbr> (123) 456-7890
</address>
<p><strong>Note:</strong> Each line in an <code>address</code> must end with a line-break (<code><br /></code>) to properly structure the content as it is read in real life without any styles applied.</p>
<h3>Abbreviations</h3>
<p>For abbreviations and acronyms, use the <code>abbr</code> tag (<code>acronym</code> is deprecated in <abbrtitle="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
</div>
</div>
<divclass="row">
<divclass="span4 columns">
<h2>Blockquotes</h2>
<p>
<code><blockquote></code>
<code><p></code>
<code><cite></code>
</p>
</div>
<divclass="span12 columns">
<p>Be sure to wrap your <code>blockquote</code> around <code>paragraph</code> and <code>cite</code> tags. When citing a source, use the <code>cite</code> element. The CSS will automatically preface a name with an em dash (&mdash;).</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
<cite>Dr. Julius Hibbert</cite>
</blockquote>
</div>
</div>
<h2>Lists</h2>
<divclass="row">
...
...
@@ -627,178 +645,185 @@
<divclass="page-header"id="forms">
<h1>Forms and buttons</h1>
</div>
<p>All forms are given default styles to present them in a readable and scalable way.</p>
