* 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>
</div>
<divclass="row">
<!-- Headings & Paragraph Copy -->
<divclass="row">
<divclass="span4 columns">
<h2>Headings and copy</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p>
...
...
@@ -304,9 +326,10 @@
<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>Using emphasis, addresses, & abbreviations</p>
...
...
@@ -335,9 +358,10 @@
<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>
</div><!-- /row -->
<divclass="row">
<!-- Blockquotes -->
<divclass="row">
<divclass="span4 columns">
<h2>Blockquotes</h2>
<p>
...
...
@@ -353,11 +377,10 @@
<small>Dr. Julius Hibbert</small>
</blockquote>
</div>
</div>
</div><!-- /row -->
<h2>Lists</h2>
<divclass="row">
<h2>Lists</h2>
<divclass="row">
<divclass="span4 columns">
<h4>Unordered <code><ul></code></h4>
<ul>
...
...
@@ -423,16 +446,19 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
<divclass="row">
</div>
<!-- Table structure -->
<divclass="row">
<divclass="span4 columns">
<h2>Building tables</h2>
<p>
...
...
@@ -450,9 +476,9 @@
<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>
<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>
...
...
@@ -481,15 +507,14 @@
<td>Code</td>
</tr>
</tbody>
</table>
</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">
<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>
...
...
@@ -518,15 +543,14 @@
<td>Code</td>
</tr>
</tbody>
</table>
</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">
<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>
...
...
@@ -757,11 +781,11 @@
</fieldset>
</form>
</div>
</div>
</div><!-- /row -->
<br/>
<br/>
<divclass="row">
<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>
<spanclass="help-inline">Small snippet of help text</span>
</div>
</div><!-- /clearfix -->
<divclass="clearfix">
<labelid="optionsCheckboxes">List of Options</label>
<divclass="input">
...
...
@@ -820,9 +851,9 @@
</div>
</form>
</div>
</div>
</div><!-- /row -->
<divclass="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>
...
...
@@ -832,10 +863,8 @@
<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>
...
...
@@ -849,7 +878,6 @@
</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>
<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>
...
...
@@ -857,17 +885,17 @@
</div>
<h4>Buttons</h4>
<divclass="well">
<form>
<buttonclass="btn large primary disabled"disabled>Primary action</button>
<buttonclass="btn large disabled"disabled>Action</button>
</form>
<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>
<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>
