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 @@
<div class="container">
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<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>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#builtWith">Built with Less</a></li>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
</header>
<!-- 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="#static-assets">Use as static assets</a></li>
</ul>
</div>
</div>
</header>
<div class="span9">
<!-- BUILT WITH LESS
================================================== -->
<section id="builtWith">
<!-- BUILT WITH LESS
================================================== -->
<section id="built-with-less">
<div class="page-header">
<h1>Built with LESS</h1>
</div>
......@@ -101,22 +107,13 @@
<h3>Learn more</h3>
<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>
</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
================================================== -->
<section id="compiling">
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
<section id="compiling">
<div class="page-header">
<h1>Compiling Bootstrap with LESS</h1>
</div>
......@@ -139,10 +136,10 @@
<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>
<pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</pre>
<pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</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>
<h3>Unofficial Mac app</h3>
......@@ -157,7 +154,22 @@
<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>
</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
......
docs/templates/pages/extend.mustache
View file @ 6f8226a3
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<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>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
<p class="lead">{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}</p>
</header>
<!-- 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="#static-assets">{{_i}}Use as static assets{{/i}}</a></li>
</ul>
</div>
</div>
</header>
<div class="span9">
<!-- BUILT WITH LESS
================================================== -->
<section id="builtWith">
<!-- BUILT WITH LESS
================================================== -->
<section id="built-with-less">
<div class="page-header">
<h1>{{_i}}Built with LESS{{/i}}</h1>
</div>
......@@ -31,22 +37,13 @@
<h3>{{_i}}Learn more{{/i}}</h3>
<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>
</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
================================================== -->
<section id="compiling">
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
<section id="compiling">
<div class="page-header">
<h1>{{_i}}Compiling Bootstrap with LESS{{/i}}</h1>
</div>
......@@ -69,10 +66,10 @@
<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>
<pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</pre>
<pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</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>
<h3>{{_i}}Unofficial Mac app{{/i}}</h3>
......@@ -87,4 +84,19 @@
<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>
</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