<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
<h2>Headings & body copy</h2>
<!-- Headings & Paragraph Copy -->
<divclass="row">
<divclass="span4">
<h3>Typographic scale</h3>
<p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
<p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
</div>
<divclass="span4">
<h3>Example body text</h3>
<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>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
For emphasizing a snippet of text with <strong>important</strong>
</td>
<td>
<spanclass="muted">None</span>
</td>
</tr>
<tr>
<td>
<code><em></code>
</td>
<td>
For emphasizing a snippet of text with <em>stress</em>
</td>
<td>
<spanclass="muted">None</span>
</td>
</tr>
<tr>
<td>
<code><abbr></code>
</td>
<td>
Wraps abbreviations and acronyms to show the expanded version on hover
</td>
<td>
Include optional <code>title</code> for expanded text
</td>
</tr>
<tr>
<td>
<code><address></code>
</td>
<td>
For contact information for its nearest ancestor or the entire body of work
</td>
<td>
Preserve formatting by ending all lines with <code><br></code>
</td>
</tr>
</tbody>
</table>
<divclass="row">
<divclass="span4">
<h3>Using emphasis</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>
<p><strong>Note:</strong> Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
</div>
<divclass="span4">
<h3>Example addresses</h3>
<p>Here are two examples of how the <code><address></code> tag can be used:</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>
<address>
<strong>Full Name</strong><br>
<amailto="#">first.last@gmail.com</a>
</address>
</div>
<divclass="span4">
<h3>Example abbreviations</h3>
<p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p>
<p><abbrtitle="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
<p>An abbreviation of the word attribute is <abbrtitle="attribute">attr</abbr>.</p>
<p>To include a blockquote, wrap <code><blockquote></code> around any <abbrtitle="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code><p></code>.</p>
<p>Include an optional <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it for styling purposes.</p>
<p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<preclass="prettyprint"><div>
<h1>Heading</h1>
<p>Something right here...</p>
</div></pre>
<preclass="prettyprint linenums"><div>
<h1>Heading</h1>
<p>Something right here...</p>
</div></pre>
<p><ahref="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <ahref="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
</td>
</tr>
</tbody>
</table>
<!-- Labels -->
<h2>Inline labels <small>for special attention</small></h2>
<p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some</td>
<td>One</td>
<td>English</td>
</tr>
<tr>
<td>2</td>
<td>Joe</td>
<td>Sixpack</td>
<td>English</td>
</tr>
<tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
<td>Code</td>
</tr>
</tbody>
</table>
<preclass="prettyprint linenums">
<table>
...
</table></pre>
<h3>2. Zebra-striped</h3>
<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
<tableclass="zebra-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some</td>
<td>One</td>
<td>English</td>
</tr>
<tr>
<td>2</td>
<td>Joe</td>
<td>Sixpack</td>
<td>English</td>
</tr>
<tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
<td>Code</td>
</tr>
</tbody>
</table>
<p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
<preclass="prettyprint linenums">
<table class="zebra-striped">
...
</table></pre>
<h3>3. Zebra-striped w/ TableSorter.js</h3>
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <ahref="http://jquery.com">jQuery</a> and the <ahref="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
</div>
<divclass="span9">
<h3>Example buttons</h3>
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
<p>Fancy larger or smaller buttons? Have at it!</p>
<divclass="well">
<ahref="#"class="btn large primary">Primary action</a>
<ahref="#"class="btn large">Action</a>
</div>
<divclass="well"style="padding: 16px 19px;">
<ahref="#"class="btn small primary">Primary action</a>
<ahref="#"class="btn small">Action</a>
</div>
<h3>Disabled state</h3>
<p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
<h4>Links</h4>
<divclass="well">
<ahref="#"class="btn large primary disabled">Primary action</a>
<ahref="#"class="btn large disabled">Action</a>
</div>
<h4>Buttons</h4>
<divclass="well">
<buttonclass="btn large primary disabled"disabled="disabled">Primary action</button> <buttonclass="btn large"disabled>Action</button>
<pclass="pull-right"><ahref="#">Back to top</a></p>
<p>
Designed and built with all the love in the world <ahref="http://twitter.com/twitter"target="_blank">@twitter</a> by <ahref="http://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="http://twitter.com/fat"target="_blank">@fat</a>.<br>
Code licensed under the <ahref="http://www.apache.org/licenses/LICENSE-2.0"target="_blank">Apache License v2.0</a>. Documentation licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</p>
</footer>
</div><!-- /container -->
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
