Skip to content

B
bootstrap
Commit 6f8226a3 authored by Mark Otto's avatar Mark Otto
Browse files
Options

update Extend docs page to include side nav and spec out next section for... 

update Extend docs page to include side nav and spec out next section for extending with static assets
parent 64e87a85
Show whitespace changes
Inline Side-by-side
Showing with 166 additions and 142 deletions
docs/extend.html
View file @ 6f8226a3
...@@ -68,26 +68,32 @@ ...@@ -68,26 +68,32 @@
<div class="container"> <div class="container">
<!-- Masthead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Extending Bootstrap</h1> <h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p> <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
<div class="navbar navbar-subnav"> </header>
<div class="navbar-inner">
<ul class="nav">
<li><a href="#builtWith">Built with Less</a></li>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#built-with-less">Built with LESS</a></li>
<li><a href="#compiling">Compiling Bootstrap</a></li> <li><a href="#compiling">Compiling Bootstrap</a></li>
<li><a href="#static-assets">Use as static assets</a></li>
</ul> </ul>
</div> </div>
</div> <div class="span9">
</header>
<!-- BUILT WITH LESS <!-- BUILT WITH LESS
================================================== --> ================================================== -->
<section id="builtWith"> <section id="built-with-less">
<div class="page-header"> <div class="page-header">
<h1>Built with LESS</h1> <h1>Built with LESS</h1>
</div> </div>
...@@ -101,22 +107,13 @@ ...@@ -101,22 +107,13 @@
<h3>Learn more</h3> <h3>Learn more</h3>
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS"> <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
<p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p> <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
</section>
<h3><a href="#variables">Variables</a></h3>
<p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
<h3><a href="#mixins">Mixins</a></h3>
<p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
<h3>Operations</h3>
<p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.</p>
</section>
<!-- COMPILING LESS AND BOOTSTRAP
<!-- COMPILING LESS AND BOOTSTRAP ================================================== -->
================================================== --> <section id="compiling">
<section id="compiling">
<div class="page-header"> <div class="page-header">
<h1>Compiling Bootstrap with LESS</h1> <h1>Compiling Bootstrap with LESS</h1>
</div> </div>
...@@ -139,10 +136,10 @@ ...@@ -139,10 +136,10 @@
<h3>Javascript</h3> <h3>Javascript</h3>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p> <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt; &lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt; &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</pre> </pre>
<p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p> <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
<h3>Unofficial Mac app</h3> <h3>Unofficial Mac app</h3>
...@@ -157,7 +154,22 @@ ...@@ -157,7 +154,22 @@
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4> <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
<p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p> <p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
</section> </section>
<!-- Static assets
================================================== -->
<section id="static-assets">
<div class="page-header">
<h1>Use as static assets</h1>
</div>
<p>...</p>
</section>
</div>
</div>
<!-- Footer <!-- Footer
......
docs/templates/pages/extend.mustache
View file @ 6f8226a3
<!-- Masthead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>{{_i}}Extending Bootstrap{{/i}}</h1> <h1>{{_i}}Extending Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p> <p class="lead">{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}</p>
<div class="navbar navbar-subnav"> </header>
<div class="navbar-inner">
<ul class="nav">
<li><a href="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#built-with-less">{{_i}}Built with LESS{{/i}}</a></li>
<li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li> <li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
<li><a href="#static-assets">{{_i}}Use as static assets{{/i}}</a></li>
</ul> </ul>
</div> </div>
</div> <div class="span9">
</header>
<!-- BUILT WITH LESS <!-- BUILT WITH LESS
================================================== --> ================================================== -->
<section id="builtWith"> <section id="built-with-less">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Built with LESS{{/i}}</h1> <h1>{{_i}}Built with LESS{{/i}}</h1>
</div> </div>
...@@ -31,22 +37,13 @@ ...@@ -31,22 +37,13 @@
<h3>{{_i}}Learn more{{/i}}</h3> <h3>{{_i}}Learn more{{/i}}</h3>
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS"> <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
<p>{{_i}}Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.{{/i}}</p> <p>{{_i}}Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.{{/i}}</p>
</section>
<h3><a href="#variables">{{_i}}Variables{{/i}}</a></h3>
<p>{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.{{/i}}</p>
<h3><a href="#mixins">{{_i}}Mixins{{/i}}</a></h3>
<p>{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}</p>
<h3>{{_i}}Operations{{/i}}</h3>
<p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
</section>
<!-- COMPILING LESS AND BOOTSTRAP
<!-- COMPILING LESS AND BOOTSTRAP ================================================== -->
================================================== --> <section id="compiling">
<section id="compiling">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Compiling Bootstrap with LESS{{/i}}</h1> <h1>{{_i}}Compiling Bootstrap with LESS{{/i}}</h1>
</div> </div>
...@@ -69,10 +66,10 @@ ...@@ -69,10 +66,10 @@
<h3>{{_i}}Javascript{{/i}}</h3> <h3>{{_i}}Javascript{{/i}}</h3>
<p>{{_i}}<a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.{{/i}}</p> <p>{{_i}}<a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.{{/i}}</p>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt; &lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt; &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</pre> </pre>
<p>{{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}</p> <p>{{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}</p>
<h3>{{_i}}Unofficial Mac app{{/i}}</h3> <h3>{{_i}}Unofficial Mac app{{/i}}</h3>
...@@ -87,4 +84,19 @@ ...@@ -87,4 +84,19 @@
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4> <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
<p>{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.{{/i}}</p> <p>{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.{{/i}}</p>
</section> </section>
<!-- Static assets
================================================== -->
<section id="static-assets">
<div class="page-header">
<h1>{{_i}}Use as static assets{{/i}}</h1>
</div>
<p>...</p>
</section>
</div>{{! /span9 }}
</div>{{! row}}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment