</div>
<p class="lead">Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
- <p>Grid variables and mixins are covered <a href="{{ site.baseurl }}css/#grid-less">within the Grid system section</a>.</p>
+ <p>Grid variables and mixins are covered <a href="#grid-less">within the Grid system section</a>.</p>
+ <h2 id="less-bootstrap">Compiling Bootstrap</h2>
+ <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source LESS files. To compile the LESS files, <a href="https://github.com/twbs/bootstrap#compiling-css-and-javascript">visit the README</a> for how to setup your development environment to run the necessary commands.</p>
+ <p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
+
<h2 id="less-variables">Variables</h2>
- <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ site.baseurl }}customize/#less-variables-section">the Customizer</a>.</p>
+ <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="../customize/#less-variables-section">the Customizer</a>.</p>
<h3 id="less-variables-colors">Colors</h3>
<p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
<img src="../examples/screenshots/non-responsive.jpg" alt="">
</a>
<h4>Non-responsive Bootstrap</h4>
- <p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
+ <p>Easily disable the responsiveness of Bootstrap <a href="#disable-responsive">per our docs</a>.</p>
</div>
<div class="col-xs-6 col-md-4">
- <a class="thumbnail" href="../examples/theme/">
- <img src="../examples/screenshots/theme.jpg" alt="">
+ <a class="thumbnail" href="../examples/offcanvas/">
+ <img src="../examples/screenshots/offcanvas.jpg" alt="">
</a>
- <h4>Bootstrap theme</h4>
- <p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
+ <h4>Offcanvas</h4>
+ <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
</div>
</div>