* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sun Aug 21 20:38:48 PDT 2011
* Date: Sun Aug 21 20:50:48 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
<divclass="row">
<divclass="span4 columns">
<h2>Headings and copy</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p>
</div>
<divclass="span4 columns">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
<divclass="span8 columns">
<h3>Example paragraph</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>
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
</div>
<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 indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <code><strong></code> for importance and <code><em></code> for <em>stress</em> emphasis.</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>
<p><strong>Note:</strong> It's still okay to use <code><b></code> and <code><i></code> tags in HTML5, but they don't come with inherent styles anymore. <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>
<h3>Addresses</h3>
<p>The <code><address></code> element is used for contact information for its nearest ancestor, or the entire body of work. 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>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</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>
<!-- Headings & Paragraph Copy -->
<divclass="row">
<divclass="span4 columns">
<h2>Headings and copy</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p>
</div>
<divclass="span4 columns">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
<divclass="span8 columns">
<h3>Example paragraph</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>Be sure to wrap your <code><blockquote></code> around <code><p></code> and <code><small></code> tags. When citing a source, use the <code><small></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>
<small>Dr. Julius Hibbert</small>
</blockquote>
</div>
</div>
<!-- Misc Elements -->
<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 indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <code><strong></code> for importance and <code><em></code> for <em>stress</em> emphasis.</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>
<p><strong>Note:</strong> It's still okay to use <code><b></code> and <code><i></code> tags in HTML5, but they don't come with inherent styles anymore. <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>
<h3>Addresses</h3>
<p>The <code><address></code> element is used for contact information for its nearest ancestor, or the entire body of work. 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>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</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><!-- /row -->
<!-- Blockquotes -->
<divclass="row">
<divclass="span4 columns">
<h2>Blockquotes</h2>
<p>
<code><blockquote></code>
<code><p></code>
<code><small></code>
</p>
</div>
<divclass="span12 columns">
<p>Be sure to wrap your <code><blockquote></code> around <code><p></code> and <code><small></code> tags. When citing a source, use the <code><small></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>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
</div><!-- /row -->
</section>
<sectionid="tables">
<divclass="page-header">
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
<divclass="row">
<divclass="span4 columns">
<h2>Building tables</h2>
<p>
<code><table></code>
<code><thead></code>
<code><tbody></code>
<code><tr></code>
<code><th></code>
<code><td></code>
<code><colspan></code>
<code><caption></code>
</p>
<p>Tables are great—for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.</p>
<p>Always wrap your column headers in a <code><thead></code> such that hierarchy is <code><thead></code> > <code><tr></code> > <code><th></code>.</p>
<p>Similar to the column headers, all your table’s body content should be wrapped in a <code><tbody></code> so your hierarchy is <code><tbody></code> > <code><tr></code> > <code><td></code>.</p>
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
<divclass="span12 columns">
<h3>Example: Default table styles</h3>
<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>
<!-- Table structure -->
<divclass="row">
<divclass="span4 columns">
<h2>Building tables</h2>
<p>
<code><table></code>
<code><thead></code>
<code><tbody></code>
<code><tr></code>
<code><th></code>
<code><td></code>
<code><colspan></code>
<code><caption></code>
</p>
<p>Tables are great—for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.</p>
<p>Always wrap your column headers in a <code><thead></code> such that hierarchy is <code><thead></code> > <code><tr></code> > <code><th></code>.</p>
<p>Similar to the column headers, all your table’s body content should be wrapped in a <code><tbody></code> so your hierarchy is <code><tbody></code> > <code><tr></code> > <code><td></code>.</p>
</div>
<divclass="span12 columns">
<h3>Example: Default table styles</h3>
<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 class="common-table">
...
</table></pre>
<h3>Example: 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>
<h3>Example: 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>
<preclass="prettyprint linenums">
<table class="common-table zebra-striped">
...
</table></pre>
<h3>Example: 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>
<tableclass="zebra-striped"id="sortTableExample">
<thead>
<tr>
<th>#</th>
<thclass="yellow">First Name</th>
<thclass="blue">Last Name</th>
<thclass="green">Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Your</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>
<h3>Example: 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>All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.</p>
<p>Add <code>.form-stacked</code> to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.</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 blue <code>.primary</code> class is available. Plus, rolling your own styles is easy peasy.</p>
<divclass="page-header">
<h1>Forms</h1>
</div>
<divclass="span12 columns">
<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>
<divclass="well"style="padding: 14px 19px;">
<divclass="row">
<divclass="span4 columns">
<h2>Default styles</h2>
<p>All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.</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><!-- /row -->
<br/>
<divclass="row">
<divclass="span4 columns">
<h2>Stacked forms</h2>
<p>Add <code>.form-stacked</code> to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.</p>
</div>
<divclass="well"style="padding: 16px 19px;">
<ahref="#"class="btn small primary">Primary action</a>
<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>
<p><strong>Note:</strong> If you're developing for older browsers like IE8 or below -- you're going to want to use the <code>.disabled</code> class for <code><button></code> elements as well.
<h4>Links</h4>
<divclass="well">
<ahref="#"class="btn large primary disabled">Primary action</a>
<ahref="#"class="btn large disabled">Action</a>
</div><!-- /row -->
<divclass="row">
<divclass="span4 columns">
<h2>Buttons</h2>
<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 blue <code>.primary</code> class is available. Plus, rolling your own styles is easy peasy.</p>
</div>
<h4>Buttons</h4>
<divclass="well">
<form>
<buttonclass="btn large primary disabled"disabled>Primary action</button>
<buttonclass="btn large disabled"disabled>Action</button>
</form>
<divclass="span12 columns">
<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>Primary action</button>
<p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
</div>
<divclass="span12 columns">
<ulclass="tabs">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Messages</a></li>
<li><ahref="#">Settings</a></li>
<li><ahref="#">Contact</a></li>
</ul>
<divclass="row">
<divclass="span4 columns">
<h2>Tabs and pills</h2>
<p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
<p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
<p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
