* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Thu Aug 25 01:55:33 PDT 2011
* Date: Fri Aug 26 15:21:30 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).
...
...
@@ -85,13 +85,92 @@ blockquote:before,
blockquote:after{
content:"";
}
header,
section,
footer,
html{
overflow-y:scroll;
font-size:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
a:focus{
outline:thindotted;
}
article,
aside{
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section{
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
* 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/>
</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>
...
...
@@ -78,7 +78,7 @@
<h6>Hotlink the CSS</h6>
<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>
</div>
<!-- Fixed layout -->
<divclass="row">
<divclass="span4 columns">
<divclass="span8 columns">
<h2>Fixed layout</h2>
<p>A basic 940px wide, centered container layout for just about any site or page.</p>
</div>
<divclass="span12 columns">
<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>
<divclass="mini-layout">
<divclass="mini-layout-body"></div>
</div>
...
...
@@ -270,16 +267,10 @@
</div>
</body>
</pre>
</div>
</div><!-- /row -->
<!-- Fluid layout -->
<divclass="row">
<divclass="span4 columns">
</div><!-- /col -->
<divclass="span8 columns">
<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>
</div>
<divclass="span12 columns">
<p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
<divclass="mini-layout fluid">
<divclass="mini-layout-sidebar"></div>
<divclass="mini-layout-body"></div>
...
...
@@ -296,8 +287,8 @@
</div>
</body>
</pre>
</div>
</div><!-- /row -->
</div><!-- /col -->
</div><!-- /row -->
</section>
...
...
@@ -312,8 +303,10 @@
<!-- Headings & Paragraph Copy -->
<divclass="row">
<divclass="span4 columns">
<h2>Headings and copy</h2>
<h2>Headings & copy</h2>
<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>
<divclass="span4 columns">
<h1>h1. Heading 1</h1>
...
...
@@ -347,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>
<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>
<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>
<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>
...
...
@@ -360,7 +353,7 @@
<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 -->
</div><!-- /row -->
<!-- Blockquotes -->
<divclass="row">
...
...
@@ -380,7 +373,7 @@
<small>Dr. Julius Hibbert</small>
</blockquote>
</div>
</div><!-- /row -->
</div><!-- /row -->
<h2>Lists</h2>
<divclass="row">
...
...
@@ -449,7 +442,7 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<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>
<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>
...
...
@@ -889,7 +886,7 @@
<buttonclass="btn large primary disabled"disabled>Primary action</button> <buttonclass="btn large"disabled>Action</button>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
</section>
...
...
@@ -928,9 +925,9 @@
</li>
</ul>
</div>
</div><!-- /fill -->
</div><!-- /topbar -->
</div><!-- topbar-wrapper -->
</div><!-- /fill -->
</div><!-- /topbar -->
</div><!-- /topbar-wrapper -->
<divclass="row">
<divclass="span5 columns">
...
...
@@ -946,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>
</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/>
...
...
@@ -989,7 +987,7 @@
</ul>
</pre>
</div>
</div><!-- /row -->
</div><!-- /row -->
<!-- Pagination -->
<divclass="row">
...
...
@@ -1053,7 +1051,7 @@
</div>
</pre>
</div>
</div><!-- /row -->
</div><!-- /row -->
</section>
...
...
@@ -1069,58 +1067,58 @@
<divclass="row">
<divclass="span4 columns">
<h2>Basic alerts</h2>
<p><code>div.alert</code></p>
<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>
</div>
<divclass="span12 columns">
<divclass="alert">
<divclass="alert-message warning">
<aclass="close"href="#">×</a>
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>
<divclass="alert alert-error">
<divclass="alert-message error">
<aclass="close"href="#">×</a>
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
</div>
<divclass="alert alert-success">
<divclass="alert-message success">
<aclass="close"href="#">×</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
<divclass="alert alert-info">
<divclass="alert-message info">
<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>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>
<divclass="span12 columns">
<divclass="alert alert-block">
<divclass="alert-message block-message warning">
<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><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>
<divclass="alert-actions">
<aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
</div>
</div>
<divclass="alert alert-block error">
<divclass="alert-message block-message error">
<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>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>
<divclass="alert alert-block success">
<divclass="alert-message block-message success">
<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>
<divclass="alert-actions">
<aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
</div>
</div>
<divclass="alert alert-block info">
<divclass="alert-message block-message info">
<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>
<divclass="alert-actions">
...
...
@@ -1128,7 +1126,7 @@
</div>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
</section>
...
...
@@ -1161,7 +1159,7 @@
</div>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
<!-- Tooltips -->
<divclass="row">
...
...
@@ -1194,7 +1192,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
<!-- Popovers -->
<divclass="row">
...
...
@@ -1218,7 +1216,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
</div>
</div>
</div><!-- /row -->
</div><!-- /row -->
</section>
...
...
@@ -1239,7 +1237,7 @@ 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>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>
...
...
@@ -1371,7 +1369,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
