From 6f8226a393537ce349ce7d211539bb6f699afa8d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 22:25:00 -0700 Subject: [PATCH] update Extend docs page to include side nav and spec out next section for extending with static assets --- docs/extend.html | 166 ++++++++++++++------------- docs/templates/pages/extend.mustache | 154 +++++++++++++------------ 2 files changed, 172 insertions(+), 148 deletions(-) diff --git a/docs/extend.html b/docs/extend.html index ccd5122602..5745c83b05 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -68,96 +68,108 @@
-

Extending Bootstrap

-

Extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.

-
-
- -
-
+

Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

- -
-
-

Built with LESS

+
+
+
- -

Why LESS?

-

Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

- -

What's included?

-

As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

- -

Learn more

- LESS CSS -

Visit the official website at http://lesscss.org to learn more.

- -

Variables

-

Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.

- -

Mixins

-

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.

- -

Operations

-

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.

-
+
- -
-
-

Compiling Bootstrap with LESS

+ +
+
+

Built with LESS

+
+ +

Why LESS?

+

Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

+ +

What's included?

+

As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

+ +

Learn more

+ LESS CSS +

Visit the official website at http://lesscss.org to learn more.

+
+ + + + +
+
+

Compiling Bootstrap with LESS

+
+
+ Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods. +
+ +

Tools for compiling

+ +

Node with makefile

+

Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

+ 
$ npm install -g less jshint recess uglify-js
+

Once installed just run make from the root of your bootstrap directory and you're all set.

+

Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

+ +

Command line

+

Install the LESS command line tool via Node and run the following command:

+ 
$ lessc ./less/bootstrap.less > bootstrap.css
+

Be sure to include --compress in that command if you're trying to save some bytes!

+ +

Javascript

+

Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

+ 
+    <link rel="stylesheet/less" href="/path/to/bootstrap.less">
+    <script src="/path/to/less.js"></script>
+
+

To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

+ +

Unofficial Mac app

+

The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

+

If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

+ +

More Mac apps

+

Crunch

+

Crunch is a great looking LESS editor and compiler built on Adobe Air.

+

CodeKit

+

Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

+

Simpless

+

Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

+ +
+ + + + +
+
+

Use as static assets

+
+

...

+
+ +
-
- Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods. -
- -

Tools for compiling

- -

Node with makefile

-

Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

- 
$ npm install -g less jshint recess uglify-js
-

Once installed just run make from the root of your bootstrap directory and you're all set.

-

Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

- -

Command line

-

Install the LESS command line tool via Node and run the following command:

- 
$ lessc ./less/bootstrap.less > bootstrap.css
-

Be sure to include --compress in that command if you're trying to save some bytes!

- -

Javascript

-

Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

-
-<link rel="stylesheet/less" href="/path/to/bootstrap.less">
-<script src="/path/to/less.js"></script>
-
-

To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

- -

Unofficial Mac app

-

The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

-

If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

- -

More Mac apps

-

Crunch

-

Crunch is a great looking LESS editor and compiler built on Adobe Air.

-

CodeKit

-

Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

-

Simpless

-

Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

- -
+

{{_i}}Extending Bootstrap{{/i}}

-

{{_i}}Extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}

-
-
- -
-
+

{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}

- -
-
-

{{_i}}Built with LESS{{/i}}

+
+
+
- -

{{_i}}Why LESS?{{/i}}

-

{{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

- -

{{_i}}What's included?{{/i}}

-

{{_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}}

- -

{{_i}}Learn more{{/i}}

- LESS CSS -

{{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

- -

{{_i}}Variables{{/i}}

-

{{_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—assign colors or pixel values as variables and change them once.{{/i}}

- -

{{_i}}Mixins{{/i}}

-

{{_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}}

- -

{{_i}}Operations{{/i}}

-

{{_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}}

-
+
- -
-
-

{{_i}}Compiling Bootstrap with LESS{{/i}}

-
-
- {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}} -
+ +
+
+

{{_i}}Built with LESS{{/i}}

+
-

{{_i}}Tools for compiling{{/i}}

+

{{_i}}Why LESS?{{/i}}

+

{{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

-

{{_i}}Node with makefile{{/i}}

-

{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

- 
$ npm install -g less jshint recess uglify-js
-

{{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}

-

{{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}

+

{{_i}}What's included?{{/i}}

+

{{_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}}

-

{{_i}}Command line{{/i}}

-

{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

- 
$ lessc ./less/bootstrap.less > bootstrap.css
-

{{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

+

{{_i}}Learn more{{/i}}

+ LESS CSS +

{{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

+
-

{{_i}}Javascript{{/i}}

-

{{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

-
-<link rel="stylesheet/less" href="/path/to/bootstrap.less">
-<script src="/path/to/less.js"></script>
-
-

{{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

-

{{_i}}Unofficial Mac app{{/i}}

-

{{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}

-

{{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

-

{{_i}}More Mac apps{{/i}}

-

Crunch

-

{{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

-

CodeKit

-

{{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

-

Simpless

-

{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

+ +
+
+

{{_i}}Compiling Bootstrap with LESS{{/i}}

+
+
+ {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}} +
-
+

{{_i}}Tools for compiling{{/i}}

+ +

{{_i}}Node with makefile{{/i}}

+

{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

+ 
$ npm install -g less jshint recess uglify-js
+

{{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}

+

{{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}

+ +

{{_i}}Command line{{/i}}

+

{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

+ 
$ lessc ./less/bootstrap.less > bootstrap.css
+

{{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

+ +

{{_i}}Javascript{{/i}}

+

{{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

+ 
+    <link rel="stylesheet/less" href="/path/to/bootstrap.less">
+    <script src="/path/to/less.js"></script>
+
+

{{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

+ +

{{_i}}Unofficial Mac app{{/i}}

+

{{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}

+

{{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

+ +

{{_i}}More Mac apps{{/i}}

+

Crunch

+

{{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

+

CodeKit

+

{{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

+

Simpless

+

{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

+ +
+ + + + +
+
+

{{_i}}Use as static assets{{/i}}

+
+

...

+
+ + +
{{! /span9 }} +
{{! row}}