* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Mon Aug 22 23:50:35 PDT 2011
* Date: Fri Aug 26 11:11:13 PDT 2011
*/
*/
/* Reset.less
/* 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).
* 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).
...
@@ -85,13 +85,92 @@ blockquote:before,
...
@@ -85,13 +85,92 @@ blockquote:before,
blockquote:after{
blockquote:after{
content:"";
content:"";
}
}
header,
html{
section,
overflow-y:scroll;
footer,
font-size:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
a:focus{
outline:thindotted;
}
article,
article,
aside{
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section{
display:block;
display:block;
}
}
audio,canvas,video{
display:inline-block;
*display:inline;
*zoom:1;
}
audio:not([controls]){
display:none;
}
sub,sup{
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sup{
top:-0.5em;
}
sub{
bottom:-0.25em;
}
img{
border:0;
-ms-interpolation-mode:bicubic;
}
button,
input,
select,
textarea{
font-size:100%;
margin:0;
vertical-align:baseline;
*vertical-align:middle;
}
button,input{
line-height:normal;
*overflow:visible;
}
button::-moz-focus-inner,input::-moz-focus-inner{
border:0;
padding:0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"]{
cursor:pointer;
-webkit-appearance:button;
}
input[type="search"]{
-webkit-appearance:textfield;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
input[type="search"]::-webkit-search-decoration{
-webkit-appearance:none;
}
textarea{
overflow:auto;
vertical-align:top;
}
table{
border-collapse:collapse;
border-spacing:0;
}
/* Preboot.less
/* Preboot.less
* Variables and mixins to pre-ignite any new web development project
* Variables and mixins to pre-ignite any new web development project
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br/>
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br/>
</p>
</p>
<p><strong>Nerd alert:</strong> Bootstrap is <ahref="#less"title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
<p><strong>Nerd alert:</strong> Bootstrap is <ahref="#less"title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
</div><!-- /container -->
</div><!-- /container -->
</div>
</div>
</div>
</div>
...
@@ -78,7 +78,7 @@
...
@@ -78,7 +78,7 @@
<h6>Hotlink the CSS</h6>
<h6>Hotlink the CSS</h6>
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
<h1>Layouts <small>Basic templates to create webpages</small></h1>
<h1>Layouts <small>Basic templates to create webpages</small></h1>
</div>
</div>
<!-- Fixed layout -->
<divclass="row">
<divclass="row">
<divclass="span4 columns">
<divclass="span8 columns">
<h2>Fixed layout</h2>
<h2>Fixed layout</h2>
<p>A basic 940px wide, centered container layout for just about any site or page.</p>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p>
</div>
<divclass="span12 columns">
<divclass="mini-layout">
<divclass="mini-layout">
<divclass="mini-layout-body"></div>
<divclass="mini-layout-body"></div>
</div>
</div>
...
@@ -269,16 +267,10 @@
...
@@ -269,16 +267,10 @@
</div>
</div>
</body>
</body>
</pre>
</pre>
</div>
</div><!-- /col -->
</div><!-- /row -->
<divclass="span8 columns">
<!-- Fluid layout -->
<divclass="row">
<divclass="span4 columns">
<h2>Fluid layout</h2>
<h2>Fluid layout</h2>
<p>A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar. Great for apps.</p>
<p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
</div>
<divclass="span12 columns">
<divclass="mini-layout fluid">
<divclass="mini-layout fluid">
<divclass="mini-layout-sidebar"></div>
<divclass="mini-layout-sidebar"></div>
<divclass="mini-layout-body"></div>
<divclass="mini-layout-body"></div>
...
@@ -295,8 +287,8 @@
...
@@ -295,8 +287,8 @@
</div>
</div>
</body>
</body>
</pre>
</pre>
</div>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /row -->
</section>
</section>
...
@@ -311,8 +303,10 @@
...
@@ -311,8 +303,10 @@
<!-- Headings & Paragraph Copy -->
<!-- Headings & Paragraph Copy -->
<divclass="row">
<divclass="row">
<divclass="span4 columns">
<divclass="span4 columns">
<h2>Headings and copy</h2>
<h2>Headings & copy</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p>
<p>A standard typographic hierarchy for structuring your webpages.</p>
<p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@basefont</code> and <code>@baseline</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>
</div>
<divclass="span4 columns">
<divclass="span4 columns">
<h1>h1. Heading 1</h1>
<h1>h1. Heading 1</h1>
...
@@ -346,7 +340,7 @@
...
@@ -346,7 +340,7 @@
<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>
<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>
<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><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>
<p><strong>Note:</strong> It's still okay to use <code><b></code> and <code><i></code> tags in HTML5 and they don't have to be styled bold and italic, respectively (although if there is a more semantic element, use it). <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>
<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>
<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>
<address>
...
@@ -359,7 +353,7 @@
...
@@ -359,7 +353,7 @@
<h3>Abbreviations</h3>
<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>
<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 -->
</div><!-- /row -->
<!-- Blockquotes -->
<!-- Blockquotes -->
<divclass="row">
<divclass="row">
...
@@ -379,7 +373,7 @@
...
@@ -379,7 +373,7 @@
<small>Dr. Julius Hibbert</small>
<small>Dr. Julius Hibbert</small>
</blockquote>
</blockquote>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
<h2>Lists</h2>
<h2>Lists</h2>
<divclass="row">
<divclass="row">
...
@@ -448,7 +442,7 @@
...
@@ -448,7 +442,7 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</dl>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
</section>
</section>
...
@@ -511,7 +505,7 @@
...
@@ -511,7 +505,7 @@
</tbody>
</tbody>
</table>
</table>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<table class="common-table">
<table>
...
...
</table></pre>
</table></pre>
<h3>Example: Zebra-striped</h3>
<h3>Example: Zebra-striped</h3>
...
@@ -548,7 +542,7 @@
...
@@ -548,7 +542,7 @@
</table>
</table>
<p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
<p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</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>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 and a red <code>.danger</code> class is available. Plus, rolling your own styles is easy peasy.</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. Plus, rolling your own styles is easy peasy.</p>
</div>
</div>
<divclass="span12 columns">
<divclass="span12 columns">
<h3>Example buttons</h3>
<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>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>
<p>Fancy larger or smaller buttons? Have at it!</p>
...
@@ -888,7 +886,7 @@
...
@@ -888,7 +886,7 @@
<buttonclass="btn large primary disabled"disabled>Primary action</button> <buttonclass="btn large"disabled>Action</button>
<buttonclass="btn large primary disabled"disabled>Primary action</button> <buttonclass="btn large"disabled>Action</button>
</div>
</div>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
</section>
</section>
...
@@ -927,9 +925,9 @@
...
@@ -927,9 +925,9 @@
</li>
</li>
</ul>
</ul>
</div>
</div>
</div><!-- /fill -->
</div><!-- /fill -->
</div><!-- /topbar -->
</div><!-- /topbar -->
</div><!-- topbar-wrapper -->
</div><!-- /topbar-wrapper -->
<divclass="row">
<divclass="row">
<divclass="span5 columns">
<divclass="span5 columns">
...
@@ -945,6 +943,7 @@
...
@@ -945,6 +943,7 @@
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done.</p>
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done.</p>
</div>
</div>
</div>
</div>
<p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>body</code>.</p>
<br/>
<br/>
...
@@ -988,7 +987,7 @@
...
@@ -988,7 +987,7 @@
</ul>
</ul>
</pre>
</pre>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
<!-- Pagination -->
<!-- Pagination -->
<divclass="row">
<divclass="row">
...
@@ -1052,7 +1051,7 @@
...
@@ -1052,7 +1051,7 @@
</div>
</div>
</pre>
</pre>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
</section>
</section>
...
@@ -1068,17 +1067,18 @@
...
@@ -1068,17 +1067,18 @@
<divclass="row">
<divclass="row">
<divclass="span4 columns">
<divclass="span4 columns">
<h2>Basic alerts</h2>
<h2>Basic alerts</h2>
<p><code>div.alert-message</code></p>
<p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
<p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
</div>
</div>
<divclass="span12 columns">
<divclass="span12 columns">
<divclass="alert-message error">
<aclass="close"href="#">×</a>
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
</div>
<divclass="alert-message warning">
<divclass="alert-message warning">
<aclass="close"href="#">×</a>
<aclass="close"href="#">×</a>
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>
</div>
<divclass="alert-message error">
<aclass="close"href="#">×</a>
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
</div>
<divclass="alert-message success">
<divclass="alert-message success">
<aclass="close"href="#">×</a>
<aclass="close"href="#">×</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
...
@@ -1088,36 +1088,45 @@
...
@@ -1088,36 +1088,45 @@
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
<p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
<p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
</div>
</div>
<divclass="span12 columns">
<divclass="span12 columns">
<divclass="alert-message block-message error">
<aclass="close"href="#">×</a>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p><aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a></p>
</div>
<divclass="alert-message block-message warning">
<divclass="alert-message block-message warning">
<aclass="close"href="#">×</a>
<aclass="close"href="#">×</a>
<p><strong>Holy gaucamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p><strong>Holy gaucamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p><aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a></p>
<divclass="alert-actions">
<aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
</div>
</div>
<divclass="alert-message block-message error">
<aclass="close"href="#">×</a>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<divclass="alert-actions">
<aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
</div>
</div>
</div>
<divclass="alert-message block-message success">
<divclass="alert-message block-message success">
<aclass="close"href="#">×</a>
<aclass="close"href="#">×</a>
<p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
<p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
<p><aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a></p>
<divclass="alert-actions">
<aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
</div>
</div>
</div>
<divclass="alert-message block-message info">
<divclass="alert-message block-message info">
<aclass="close"href="#">×</a>
<aclass="close"href="#">×</a>
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
<p><aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a></p>
<divclass="alert-actions">
<aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
</div>
</div>
</div>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
</section>
</section>
...
@@ -1150,7 +1159,7 @@
...
@@ -1150,7 +1159,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
<!-- Tooltips -->
<!-- Tooltips -->
<divclass="row">
<divclass="row">
...
@@ -1183,7 +1192,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
...
@@ -1183,7 +1192,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
<!-- Popovers -->
<!-- Popovers -->
<divclass="row">
<divclass="row">
...
@@ -1207,7 +1216,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
...
@@ -1207,7 +1216,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
</section>
</section>
...
@@ -1228,12 +1237,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
...
@@ -1228,12 +1237,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
<p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
<p>Not feeling the .js solution? <ahref="http://incident57.com/less"target="_blank">Try the Less Mac app</a> or <ahref="http://lesscss.org/#-client-side-usage"target="_blank">use Node.js</a> to compile when you deploy your code.</p>
<p>Not feeling the .js solution? <ahref="http://incident57.com/less"target="_blank">Try the Less Mac app</a> or <ahref="http://lesscss.org/#-client-side-usage"target="_blank">use Node.js</a> to compile when you deploy your code.</p>
<h2>What’s included</h2>
<h2>What’s included</h2>
<p>Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
<p>Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
<h3>Color variables</h3>
<h3>Variables</h3>
<p>Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.</p>
<p>Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
// Links
// Links
...
@@ -1257,8 +1266,9 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
...
@@ -1257,8 +1266,9 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
@pink: #c3325f;
@pink: #c3325f;
@purple: #7a43b6;
@purple: #7a43b6;
// Baseline
// Baseline grid
@baseline: 20px;
@basefont: 13px;
@baseline: 18px;
</pre>
</pre>
<h3>Commenting</h3>
<h3>Commenting</h3>
...
@@ -1310,8 +1320,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
...
@@ -1310,8 +1320,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
