From 1f5f23f869a971a4c4395d5170d9b991048d244f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 11 Feb 2013 21:38:44 -0800 Subject: [PATCH] nuke dat extend docs page --- docs/extend.html | 282 ----------------------------------------------- 1 file changed, 282 deletions(-) delete mode 100644 docs/extend.html diff --git a/docs/extend.html b/docs/extend.html deleted file mode 100644 index 5928129344..0000000000 --- a/docs/extend.html +++ /dev/null @@ -1,282 +0,0 @@ - - - - - Extend ยท Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Bootstrap -
- -
-
-
-
- - -
-
-

Extending Bootstrap

-

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

-
-
- -
- - -
-
- -
-
- - - - -
-
-

Built with LESS

-
- - LESS CSS -

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.

- -

Why LESS?

-

One of Bootstrap's creators wrote a quick blog post about this, summarized here:

-
    -
  • Bootstrap compiles faster ~6x faster with Less compared to Sass
    • -
  • Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.
    • -
  • Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.
    • -
- -

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

-

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

-
- - - - -
-
-

Compiling Bootstrap with Less

-
- -

Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.

- -
- 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

- -

Command line

-

Follow the instructions in the project readme on GitHub for compiling via command line.

- -

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 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 Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

- -
- - - - -
-
-

Use as static assets

-
-

Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

- -

Setup file structure

-

Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

-
-   app/
-       layouts/
-       templates/
-   public/
-       css/
-           bootstrap.min.css
-       js/
-           bootstrap.min.js
-       img/
-           glyphicons-halflings.png
-           glyphicons-halflings-white.png
-
- -

Utilize starter template

-

Copy the following base HTML to get started.

-
-<html>
-  <head>
-    <title>Bootstrap 101 Template</title>
-    <!-- Bootstrap -->
-    <link href="public/css/bootstrap.min.css" rel="stylesheet">
-  </head>
-  <body>
-    <h1>Hello, world!</h1>
-    <!-- Bootstrap -->
-    <script src="public/js/bootstrap.min.js"></script>
-  </body>
-</html>
-
- -

Layer on custom code

-

Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

-
-<html>
-  <head>
-    <title>Bootstrap 101 Template</title>
-    <!-- Bootstrap -->
-    <link href="public/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Project -->
-    <link href="public/css/application.css" rel="stylesheet">
-  </head>
-  <body>
-    <h1>Hello, world!</h1>
-    <!-- Bootstrap -->
-    <script src="public/js/bootstrap.min.js"></script>
-    <!-- Project -->
-    <script src="public/js/application.js"></script>
-  </body>
-</html>
-
- -
- -
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -