<p>You can use Twitter Bootstrap in one of two ways: just drop the compiled CSS into any new project and start cranking, or run LESS on your site and compile on the fly like a boss.</p>
<p>Using Twitter Bootstrap is uber easy: just drop in the compiled, minified CSS and you're ready to go.</p>
</div>
</div>
<divclass="span12 columns">
<divclass="span12 columns">
<h3>1. Compiled CSS</h3>
<h3>Compiled CSS</h3>
<p>Use this option if you want all the styles of Bootstrap in a <ahref="../bootstrap-1.0.0.min.css">compiled and minified stylesheet</a>, but none of the extra power of LESS.</p>
<p>Use this option if you want all the styles of Bootstrap in a <ahref="../bootstrap-1.0.0.min.css">compiled and minified stylesheet</a>, but none of the extra power of LESS.</p>
<h1>Fully Bootstrapped <small>Supercharged CSS with variables, mixins, and functions</small></h1>
</div>
<divclass="row">
<divclass="span4 columns">
<p><ahref="http://markdotto.com/bootstrap/">Preboot</a> is a super awesome pack of mixins and variables to be used in conjunction with <ahref="http://lesscss.org"target="_blank">LESS</a>, a CSS preprocessor for faster and easier web development, that we used to build Bootstrap.</p>
</div>
<divclass="span12 columns">
<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>
<h3>Color 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>
<preclass="css">
// Links
@linkColor: #8b59c2;
@linkColorHover: darken(@linkColor, 10);
// Grays
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 70%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
@blue: #08b5fb;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Baseline
@baseline: 20px;
</pre>
<h3>Commenting</h3>
<p>LESS also provides another style of commenting in addition to CSS's normal <code>/* ... */</code> syntax.</p>
<preclass="css">
// This is a comment
/* This is also a comment */
</pre>
<h3>Mixins up the wazoo</h3>
<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They're great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p>
<h1>Using Bootstrap with LESS <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
</div>
<divclass="row">
<divclass="span4 columns">
<p><ahref="http://markdotto.com/bootstrap/">Preboot</a> is a super awesome pack of mixins and variables to be used in conjunction with <ahref="http://lesscss.org"target="_blank">LESS</a>, a CSS preprocessor for faster and easier web development, that we used to build Bootstrap.</p>
</div>
<divclass="span12 columns">
<h2>How to use it</h2>
<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>
<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>
<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="css">
// Links
@linkColor: #8b59c2;
@linkColorHover: darken(@linkColor, 10);
// Grays
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 70%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
@blue: #08b5fb;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Baseline
@baseline: 20px;
</pre>
<h3>Commenting</h3>
<p>LESS also provides another style of commenting in addition to CSS's normal <code>/* ... */</code> syntax.</p>
<preclass="css">
// This is a comment
/* This is also a comment */
</pre>
<h3>Mixins up the wazoo</h3>
<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They're great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p>
