Commit a12f0e55 authored by Mark Otto's avatar Mark Otto
Browse files

overhaul docs on sub pages, clean up css and copy

parent 549d61fc
Showing with 8167 additions and 8299 deletions
+8167 -8299
...@@ -12,12 +12,8 @@ ...@@ -12,12 +12,8 @@
body { body {
position: relative; position: relative;
padding-top: 80px; padding-top: 40px;
font-size: 14px; font-size: 14px;
background-color: #fff;
background-image: url(../img/grid-20px.png);
background-repeat: repeat-x;
background-position: 0 40px;
} }
/* Code in headings */ /* Code in headings */
...@@ -87,7 +83,22 @@ hr.soften { ...@@ -87,7 +83,22 @@ hr.soften {
------------------------- */ ------------------------- */
.jumbotron { .jumbotron {
position: relative; position: relative;
padding: 40px 0;
color: #fff;
text-align: center; text-align: center;
text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
background: #020031; /* Old browsers */
background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
} }
.jumbotron h1 { .jumbotron h1 {
font-size: 80px; font-size: 80px;
...@@ -118,22 +129,8 @@ hr.soften { ...@@ -118,22 +129,8 @@ hr.soften {
------------------------- */ ------------------------- */
.masthead { .masthead {
padding: 50px 0 60px; padding: 50px 0 60px;
margin-top: -40px;
margin-bottom: 0; margin-bottom: 0;
color: #fff; color: #fff;
text-align: center;
text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
background: #020031; /* Old browsers */
background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
} }
.masthead h1 { .masthead h1 {
font-size: 120px; font-size: 120px;
...@@ -211,6 +208,9 @@ hr.soften { ...@@ -211,6 +208,9 @@ hr.soften {
.subhead h1 { .subhead h1 {
font-size: 60px; font-size: 60px;
} }
.subhead p {
margin-bottom: 10px;
}
.subhead .navbar { .subhead .navbar {
display: none; display: none;
} }
...@@ -736,7 +736,7 @@ form.bs-docs-example { ...@@ -736,7 +736,7 @@ form.bs-docs-example {
padding-top: 0; padding-top: 0;
} }
/* Widen masthead and social buttons to fill body padding */ /* Widen masthead and social buttons to fill body padding */
.masthead { .jumbotron {
margin-top: -20px; /* Offset bottom margin on .navbar */ margin-top: -20px; /* Offset bottom margin on .navbar */
} }
} }
...@@ -750,7 +750,7 @@ form.bs-docs-example { ...@@ -750,7 +750,7 @@ form.bs-docs-example {
} }
/* Widen masthead and social buttons to fill body padding */ /* Widen masthead and social buttons to fill body padding */
.masthead { .jumbotron {
padding: 40px 20px; padding: 40px 20px;
margin-top: -20px; /* Offset bottom margin on .navbar */ margin-top: -20px; /* Offset bottom margin on .navbar */
margin-right: -20px; margin-right: -20px;
......
This diff is collapsed.
This diff is collapsed.
...@@ -66,8 +66,6 @@ ...@@ -66,8 +66,6 @@
</div> </div>
</div> </div>
<div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
...@@ -416,8 +414,6 @@ ...@@ -416,8 +414,6 @@
</section><!-- /download --> </section><!-- /download -->
</form> </form>
</div>
<!-- Footer <!-- Footer
......
...@@ -66,8 +66,6 @@ ...@@ -66,8 +66,6 @@
</div> </div>
</div> </div>
<div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
...@@ -100,8 +98,6 @@ ...@@ -100,8 +98,6 @@
</li> </li>
</ul> </ul>
</div>
<!-- Footer <!-- Footer
......
...@@ -66,113 +66,114 @@ ...@@ -66,113 +66,114 @@
</div> </div>
</div> </div>
<div class="container">
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Extending Bootstrap</h1> <div class="container">
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p> <h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
<div>
</header> </header>
<div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
<li><a href="#built-with-less">Built with LESS <i class="icon-chevron-right"></i></a></li> <li><a href="#built-with-less">Built with LESS <i class="icon-chevron-right"></i></a></li>
<li><a href="#compiling">Compiling Bootstrap <i class="icon-chevron-right"></i></a></li> <li><a href="#compiling">Compiling Bootstrap <i class="icon-chevron-right"></i></a></li>
<li><a href="#static-assets">Use as static assets <i class="icon-chevron-right"></i></a></li> <li><a href="#static-assets">Use as static assets <i class="icon-chevron-right"></i></a></li>
</ul> </ul>
</div> </div>
<div class="span9"> <div class="span9">
<!-- BUILT WITH LESS <!-- BUILT WITH LESS
================================================== --> ================================================== -->
<section id="built-with-less"> <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>
<h3>Why LESS?</h3> <h3>Why LESS?</h3>
<p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p> <p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
<h3>What's included?</h3> <h3>What's included?</h3>
<p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p> <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
<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> </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>
<div class="alert alert-info"> <div class="alert alert-info">
<strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods. <strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
</div> </div>
<h2>Tools for compiling</h2> <h2>Tools for compiling</h2>
<h3>Node with makefile</h3> <h3>Node with makefile</h3>
<p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p> <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
<pre>$ npm install -g less jshint recess uglify-js</pre> <pre>$ npm install -g less jshint recess uglify-js</pre>
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p> <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
<p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p> <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
<h3>Command line</h3> <h3>Command line</h3>
<p>Install the LESS command line tool via Node and run the following command:</p> <p>Install the LESS command line tool via Node and run the following command:</p>
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre> <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p> <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
<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>
<p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p> <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
<p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p> <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
<h3>More Mac apps</h3> <h3>More Mac apps</h3>
<h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4> <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
<p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p> <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
<h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4> <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
<p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p> <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
<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 <!-- Static assets
================================================== --> ================================================== -->
<section id="static-assets"> <section id="static-assets">
<div class="page-header"> <div class="page-header">
<h1>Use as static assets</h1> <h1>Use as static assets</h1>
</div> </div>
<p>...</p> <p>...</p>
</section> </section>
</div>
</div> </div>
</div>
</div> </div>
......
...@@ -66,15 +66,17 @@ ...@@ -66,15 +66,17 @@
</div> </div>
</div> </div>
<div class="container"> </div>
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<div class="container">
<h1>Getting started</h1> <h1>Getting started</h1>
<p class="lead">Overview of the project, it's contents, and how to get started with a simple template.</p> <p class="lead">Overview of the project, it's contents, and how to get started with a simple template.</p>
</div>
</header> </header>
<div class="container">
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
...@@ -211,8 +213,6 @@ ...@@ -211,8 +213,6 @@
</div> </div>
</div> </div>
</div>
<!-- Footer <!-- Footer
......
...@@ -66,16 +66,13 @@ ...@@ -66,16 +66,13 @@
</div> </div>
</div> </div>
<div class="container">
</div>
<div class="jumbotron masthead"> <div class="jumbotron masthead">
<div class="container"> <div class="container">
<h1>Bootstrap</h1> <h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p> <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" >Download Bootstrap</a></p> <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" >Download Bootstrap</a></p>
<ul class="masthead-links"> <ul class="masthead-links">
<li><a href="./getting-started.html" >Getting started</a></li>
<li><a href="./download.html" >Customize</a></li> <li><a href="./download.html" >Customize</a></li>
<li><a href="http://github.com/twitter/bootstrap" >GitHub project</a></li> <li><a href="http://github.com/twitter/bootstrap" >GitHub project</a></li>
<li>Version 2.1.0</li> <li>Version 2.1.0</li>
...@@ -158,7 +155,7 @@ ...@@ -158,7 +155,7 @@
</div><!-- /.marketing --> </div><!-- /.marketing -->
</div> </div>
......
This diff is collapsed.
This diff is collapsed.
...@@ -78,12 +78,8 @@ ...@@ -78,12 +78,8 @@
</div> </div>
</div> </div>
<div class="container">
{{>body}} {{>body}}
</div>{{! /container }}
<!-- Footer <!-- Footer
......
This diff is collapsed.
This diff is collapsed.
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>{{_i}}Extending Bootstrap{{/i}}</h1> <div class="container">
<p class="lead">{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}</p> <h1>{{_i}}Extending Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}</p>
<div>
</header> </header>
<div class="container">
<!-- Docs nav <!-- Docs nav
================================================== --> ================================================== -->
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
<li><a href="#built-with-less">{{_i}}Built with LESS{{/i}} <i class="icon-chevron-right"></i></a></li> <li><a href="#built-with-less">{{_i}}Built with LESS{{/i}} <i class="icon-chevron-right"></i></a></li>
<li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}} <i class="icon-chevron-right"></i></a></li> <li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}} <i class="icon-chevron-right"></i></a></li>
<li><a href="#static-assets">{{_i}}Use as static assets{{/i}} <i class="icon-chevron-right"></i></a></li> <li><a href="#static-assets">{{_i}}Use as static assets{{/i}} <i class="icon-chevron-right"></i></a></li>
</ul> </ul>
</div> </div>
<div class="span9"> <div class="span9">
<!-- BUILT WITH LESS <!-- BUILT WITH LESS
================================================== --> ================================================== -->
<section id="built-with-less"> <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>
<h3>{{_i}}Why LESS?{{/i}}</h3> <h3>{{_i}}Why LESS?{{/i}}</h3>
<p>{{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}</p> <p>{{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}</p>
<h3>{{_i}}What's included?{{/i}}</h3> <h3>{{_i}}What's included?{{/i}}</h3>
<p>{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}</p> <p>{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}</p>
<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> </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>
<div class="alert alert-info"> <div class="alert alert-info">
{{_i}}<strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.{{/i}} {{_i}}<strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.{{/i}}
</div> </div>
<h2>{{_i}}Tools for compiling{{/i}}</h2> <h2>{{_i}}Tools for compiling{{/i}}</h2>
<h3>{{_i}}Node with makefile{{/i}}</h3> <h3>{{_i}}Node with makefile{{/i}}</h3>
<p>{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}</p> <p>{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}</p>
<pre>$ npm install -g less jshint recess uglify-js</pre> <pre>$ npm install -g less jshint recess uglify-js</pre>
<p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p> <p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p>
<p>{{_i}}Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p> <p>{{_i}}Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p>
<h3>{{_i}}Command line{{/i}}</h3> <h3>{{_i}}Command line{{/i}}</h3>
<p>{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}</p> <p>{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}</p>
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre> <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
<p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p> <p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
<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>
<p>{{_i}}<a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}</p>
<p>{{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}</p>
<h3>{{_i}}Unofficial Mac app{{/i}}</h3> <h3>{{_i}}More Mac apps{{/i}}</h3>
<p>{{_i}}<a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}</p> <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
<p>{{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}</p> <p>{{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}</p>
<h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
<p>{{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}</p>
<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>
<h3>{{_i}}More Mac apps{{/i}}</h3> </section>
<h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
<p>{{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}</p>
<h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
<p>{{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}</p>
<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>
<!-- Static assets
================================================== -->
<section id="static-assets">
<div class="page-header">
<h1>{{_i}}Use as static assets{{/i}}</h1>
</div>
<p>...</p>
</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}}
</div>{{! /span9 }} </div>{{! /container }}
</div>{{! row}}
</div>
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<div class="container">
<h1>{{_i}}Getting started{{/i}}</h1> <h1>{{_i}}Getting started{{/i}}</h1>
<p class="lead">{{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}</p> <p class="lead">{{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}</p>
</div>
</header> </header>
<div class="container">
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
......
</div>
<div class="jumbotron masthead"> <div class="jumbotron masthead">
<div class="container"> <div class="container">
<h1>Bootstrap</h1> <h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p> <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.0']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p> <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.0']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
<ul class="masthead-links"> <ul class="masthead-links">
<li><a href="./getting-started.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Getting started']);"{{/production}}>Getting started</a></li>
<li><a href="./download.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);"{{/production}}>Customize</a></li> <li><a href="./download.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);"{{/production}}>Customize</a></li>
<li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li> <li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li>
<li>Version 2.1.0</li> <li>Version 2.1.0</li>
...@@ -87,3 +86,5 @@ ...@@ -87,3 +86,5 @@
</div> </div>
</div><!-- /.marketing --> </div><!-- /.marketing -->
</div>{{! /container }}
This diff is collapsed.
This diff is collapsed.
...@@ -66,8 +66,6 @@ ...@@ -66,8 +66,6 @@
</div> </div>
</div> </div>
<div class="container">
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
...@@ -263,8 +261,6 @@ ...@@ -263,8 +261,6 @@
</section> </section>
</div>
<!-- Footer <!-- Footer
......
Supports Markdown
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