<pclass="lead">Baseline is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.</p>
<pclass="lead">Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.</p>
</div>
</div>
<divclass="span5 columns">
<divclass="span5 columns">
<ahref=""class="btn large primary">Download Zip »</a>
<ahref=""class="btn large primary">Download Zip »</a>
...
@@ -80,51 +69,50 @@
...
@@ -80,51 +69,50 @@
</div>
</div>
<divclass="row">
<divclass="row">
<divclass="span4 columns">
<divclass="span4 columns">
<p>You can use Twitter Baseline 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>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>
</div>
</div>
<divclass="span12 columns">
<divclass="span12 columns">
<h3>1. Compiled CSS</h3>
<h3>1. Compiled CSS</h3>
<p>Use this option if you want all the styles of Baseline in a <ahref="../baseline-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>
<h1>Fully Bootstrapped <small>Supercharged CSS with variables, mixins, and functions</small></h1>
</div>
</div>
<divclass="row">
<divclass="row">
<divclass="span4 columns">
<divclass="span4 columns">
<p><ahref="http://markdotto.com/bootstrap/">Bootstrap</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 Baseline.</p>
<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>
</div>
<divclass="span12 columns">
<divclass="span12 columns">
<h2>What's included</h2>
<h2>What's included</h2>
<p>Here are some of the highlights of what's included in Twitter Baseline 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>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>
<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">
<preclass="css">
// Links
// Links
@link-color: #0069d6;
@linkColor: #8b59c2;
@link-hover-color: darken(@link-color, 10);
@linkColorHover: darken(@linkColor, 10);
// Grays
// Grays
@white: #fff;
@gray-lighter: #ccc;
@gray-light: #777;
@gray: #555;
@gray-dark: #333;
@black: #000;
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 70%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
// Accent Colors
@blue: #08b5fb;
@blue: #08b5fb;
@blue-dark: #0069d6;
@green: #46a546;
@green: #46a546;
@red: #9d261d;
@red: #9d261d;
@yellow: #ffc40d;
@yellow: #ffc40d;
...
@@ -144,51 +132,69 @@
...
@@ -144,51 +132,69 @@
</pre>
</pre>
<h3>Mixins up the wazoo</h3>
<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 in Baseline.</p>
<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>
<p>The default grid system provided as part of Baseline is a 940px wide 16-column grid. It's a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
<p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It's a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
