Skip to content

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

renamed less.html to extend.html, removing all the vars and mixins

parent b77ed4a3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 2016 deletions
docs/base-css.html
View file @ a683497d
......@@ -57,9 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="">
<a href="./less.html">LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
......@@ -67,6 +64,9 @@
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
</ul>
</div>
</div>
......
docs/components.html
View file @ a683497d
......@@ -57,9 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="">
<a href="./less.html">LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
......@@ -67,6 +64,9 @@
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
</ul>
</div>
</div>
......
docs/download.html
View file @ a683497d
......@@ -57,9 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="">
<a href="./less.html">LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="active">
<a href="./download.html">Customize</a>
......@@ -67,6 +64,9 @@
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
</ul>
</div>
</div>
......
docs/examples.html
View file @ a683497d
......@@ -57,9 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="">
<a href="./less.html">LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
......@@ -67,6 +64,9 @@
<li class="active">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
</ul>
</div>
</div>
......
docs/extend.html 0 → 100644
View file @ a683497d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Extend · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="bs-docs-container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Home</a>
</li>
<li class="">
<a href="./scaffolding.html">Scaffolding</a>
</li>
<li class="">
<a href="./base-css.html">Base CSS</a>
</li>
<li class="">
<a href="./components.html">Components</a>
</li>
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
<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>
<li><a href="#compiling">Compiling Bootstrap</a></li>
</ul>
</div>
</div>
</header>
<!-- BUILT WITH LESS
================================================== -->
<section id="builtWith">
<div class="page-header">
<h1>Built with LESS</h1>
</div>
<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>
<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>
<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>
<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">
<div class="page-header">
<h1>Compiling Bootstrap with LESS</h1>
</div>
<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.
</div>
<h2>Tools for compiling</h2>
<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>
<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>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>
<p>Install the LESS command line tool via Node and run the following command:</p>
<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>
<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>
<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>
<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>
<h3>More Mac apps</h3>
<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>
<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>
<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>
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>
docs/index.html
View file @ a683497d
......@@ -57,9 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="">
<a href="./less.html">LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
......@@ -67,6 +64,9 @@
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
</ul>
</div>
</div>
......
docs/javascript.html
View file @ a683497d
......@@ -57,9 +57,6 @@
<li class="active">
<a href="./javascript.html">Javascript</a>
</li>
<li class="">
<a href="./less.html">LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
......@@ -67,6 +64,9 @@
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
</ul>
</div>
</div>
......
docs/less.html deleted 100644 → 0
View file @ b77ed4a3
This diff is collapsed.
docs/scaffolding.html
View file @ a683497d
......@@ -57,9 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="">
<a href="./less.html">LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
......@@ -67,6 +64,9 @@
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
</ul>
</div>
</div>
......
docs/templates/layout.mustache
View file @ a683497d
......@@ -69,9 +69,6 @@
<li class="{{javascript}}">
<a href="./javascript.html">{{_i}}Javascript{{/i}}</a>
</li>
<li class="{{less}}">
<a href="./less.html">{{_i}}LESS{{/i}}</a>
</li>
<li class="divider-vertical"></li>
<li class="{{download}}">
<a href="./download.html">{{_i}}Customize{{/i}}</a>
......@@ -79,6 +76,9 @@
<li class="{{examples}}">
<a href="./examples.html">{{_i}}Examples{{/i}}</a>
</li>
<li class="{{less}}">
<a href="./extend.html">{{_i}}Extend{{/i}}</a>
</li>
</ul>
</div>
</div>
......
docs/templates/pages/extend.mustache 0 → 100644
View file @ a683497d
<!-- Masthead
================================================== -->
<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>
<li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
</ul>
</div>
</div>
</header>
<!-- BUILT WITH LESS
================================================== -->
<section id="builtWith">
<div class="page-header">
<h1>{{_i}}Built with LESS{{/i}}</h1>
</div>
<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>
<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>
<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>
<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">
<div class="page-header">
<h1>{{_i}}Compiling Bootstrap with LESS{{/i}}</h1>
</div>
<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}}
</div>
<h2>{{_i}}Tools for compiling{{/i}}</h2>
<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>
<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}}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>
<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>
<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>
<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>
<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}}More Mac apps{{/i}}</h3>
<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>
docs/templates/pages/less.mustache deleted 100644 → 0
View file @ b77ed4a3
This diff is collapsed.
docs/upgrading.html
View file @ a683497d
......@@ -57,9 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
<li class="">
<a href="./less.html">LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
......@@ -67,6 +64,9 @@
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
</ul>
</div>
</div>
......
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