From a683497dbc0f9cc3f883f195206e87589d09caaf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Jun 2012 23:56:00 -0700 Subject: renamed less.html to extend.html, removing all the vars and mixins --- docs/extend.html | 205 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 docs/extend.html (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html new file mode 100644 index 000000000..7169908a6 --- /dev/null +++ b/docs/extend.html @@ -0,0 +1,205 @@ + + + + + Extend · Twitter Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + Bootstrap +
+ +
+
+
+
+ +
+ + +
+

Extending Bootstrap

+

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

+
+
+ +
+
+
+ + + + +
+
+

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

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

+ +
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3 From 3c07eaa251b73e6c5eff4b56e074c54708a4b4ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 15:11:54 -0700 Subject: updates to type scale --- docs/extend.html | 7 ------- 1 file changed, 7 deletions(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 7169908a6..77c93af3b 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • -- cgit v1.2.3 From 5f861ef51735d8b0f2c0f0faf8f438808a480d99 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jul 2012 23:16:07 -0700 Subject: fix up docs to use default container, fix responsive home changes --- docs/extend.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 77c93af3b..b3b72f75e 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -33,7 +33,7 @@ ================================================== -->
    -
    +
    -
    +
    @@ -167,6 +167,11 @@

    Designed and built with all the love in the world @twitter by @mdo and @fat.

    Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

    Icons from Glyphicons Free, licensed under CC BY 3.0.

    +
    -- cgit v1.2.3 From 20676ddd4d3e46c9fb32aadfeddb3a4a68efa6a3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jul 2012 01:47:36 -0700 Subject: adding getting started page based on Bootstrap University from awhile back, testing out side nav on docs instead of subnav bar --- docs/extend.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index b3b72f75e..ccd512260 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -27,7 +27,7 @@ - + -- cgit v1.2.3 From 6f8226a393537ce349ce7d211539bb6f699afa8d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 22:25:00 -0700 Subject: update Extend docs page to include side nav and spec out next section for extending with static assets --- docs/extend.html | 154 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 83 insertions(+), 71 deletions(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index ccd512260..5745c83b0 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.

    + +
    +
    +

    Built with LESS

    +
    -

    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.

    +

    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.

    -

    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.

    +

    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.

    -

    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.

    -
    +

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

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

    -

    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.

    - -
    +

    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

    +
    +

    ...

    +
    + + +
    +
    -
    +
    + -- cgit v1.2.3 From a12f0e551f7da763a9be23013d1b51c161a0f6f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 18:11:49 -0700 Subject: overhaul docs on sub pages, clean up css and copy --- docs/extend.html | 145 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 73 insertions(+), 72 deletions(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 71a9dddc2..3ea7953fd 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -66,113 +66,114 @@ -
    -
    -

    Extending Bootstrap

    -

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

    +
    +

    Extending Bootstrap

    +

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

    +
    +
    - -
    -
    - -
    -
    + +
    +
    + +
    +
    - -
    -
    -

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

    +

    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.

    +

    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.

    -
    +

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

    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

    +

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

    +

    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!

    +

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

    +

    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.

    +

    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.

    +

    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.

    +

    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

    -
    -

    ...

    -
    + +
    +
    +

    Use as static assets

    +
    +

    ...

    +
    +
    -
    -
    +
    -- cgit v1.2.3 From 9343e1e933c1a38ec4cc58024b01edda631863b0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 21:38:18 -0700 Subject: remove getting started link from home, add to navbar, overhaul getting started docs --- docs/extend.html | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 3ea7953fd..8f8f548be 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -45,6 +45,9 @@
  • Home
    • +
  • + Get started +
  • Scaffolding
    • -- cgit v1.2.3 From 93b1519017ecf002883b72cd69d4e08fc2500697 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 11:17:22 -0700 Subject: content edits to Extend page --- docs/extend.html | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 8f8f548be..66576aae8 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -102,8 +102,15 @@

    Built with 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.

    +

    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.

    +

    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.

    @@ -119,8 +126,11 @@ ================================================== -->
    -

    Compiling Bootstrap with LESS

    +

    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.
    @@ -147,8 +157,7 @@

    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.

    +

    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

    @@ -156,7 +165,7 @@

    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.

    +

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

    @@ -168,6 +177,7 @@

    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.

    ...

    -- cgit v1.2.3 From 6e622ee763867baae6f0c58f026621ee0c200288 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 11:18:35 -0700 Subject: more content edits to Extend --- docs/extend.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 66576aae8..1e1c753ea 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -102,6 +102,7 @@

    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?

    @@ -116,7 +117,6 @@

    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.

    -- cgit v1.2.3 From 463de252a9d695d6b52045e5e7df4e7b82ffb116 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 14:20:25 -0700 Subject: update static assets section of extend page, copy changes elsewhere --- docs/extend.html | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 2 deletions(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 1e1c753ea..8e9b79b6b 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -177,8 +177,59 @@

    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.

    -

    ...

    +

    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">
+    <script src="public/js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </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">
+    <script src="public/js/bootstrap.min.js"></script>
+    <!-- Project -->
+    <link href="public/css/application.css" rel="stylesheet">
+    <script src="public/js/application.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+
    + -- cgit v1.2.3 From 750badabf760d7fb0a68a1a214442ecbdff8a16c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 14:43:51 -0700 Subject: copy edits and tweaks to utility classes to ensure they always are specific enough --- docs/extend.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 8e9b79b6b..df30b679a 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -60,7 +60,7 @@
  • Javascript
    • -
  • +
  • Extend
    • -- cgit v1.2.3 From 426e7d9fbd87421e56a76e17a19de97a6e08c460 Mon Sep 17 00:00:00 2001 From: Ben Oakes Date: Mon, 16 Jul 2012 09:31:18 -0400 Subject: Compiled; ignoring bootstrap.css change to avoid conflicts --- docs/extend.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 7169908a6..4b200f31a 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -156,13 +156,13 @@

    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

    +

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

    +

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

    -- cgit v1.2.3 From 51c9fa1697d5df631fe37f1147d9265e89e5f4f6 Mon Sep 17 00:00:00 2001 From: Purwandi Date: Wed, 18 Jul 2012 12:19:02 +0700 Subject: Moved JS to bottom on extends page --- docs/extend.html | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index ee7de7a8c..43bccc8c0 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -203,10 +203,11 @@ <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="public/css/bootstrap.min.css" rel="stylesheet"> - <script src="public/js/bootstrap.min.js"></script> </head> <body> <h1>Hello, world!</h1> + <!-- Bootstrap --> + <script src="public/js/bootstrap.min.js"></script> </body> </html> @@ -219,13 +220,15 @@ <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="public/css/bootstrap.min.css" rel="stylesheet"> - <script src="public/js/bootstrap.min.js"></script> <!-- Project --> <link href="public/css/application.css" rel="stylesheet"> - <script src="public/js/application.js"></script> </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> -- cgit v1.2.3 From b9105b98f9ee5f15d5b18bccf277344683d4a6db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 Jul 2012 22:06:47 -0700 Subject: move from downloads.html to customize.html to better match purpose of page, fix up customize page layout to match other docs, link style refinement to jumbotrons --- docs/extend.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 43bccc8c0..edc588830 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -60,8 +60,8 @@
  • Javascript
    • -
  • - Extend +
  • + Customize
    • -- cgit v1.2.3 From dcf75697ecd243517b23d8ef440f772d91f699c0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jul 2012 18:28:39 -0700 Subject: some progress on affix plugin --- docs/extend.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index edc588830..38006289c 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -85,7 +85,7 @@ ================================================== -->
    -
      +
      • Built with LESS
      • Compiling Bootstrap
      • Use as static assets
        • @@ -281,6 +281,7 @@ + -- cgit v1.2.3 From b7b4fd5c82ea321da3d7858e223eb6adcd225672 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 01:53:32 -0700 Subject: wrap footer in bs docs canvas for scrolling doodad --- docs/extend.html | 240 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 121 insertions(+), 119 deletions(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 38006289c..973e08175 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -78,109 +78,110 @@
        -
        - - - -
        -
        - -
        -
        +
        +
        + +
        +
        + +
        +
        - -
        -
        -

        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.
          • -
        + +
        +
        +

        Built with LESS

        +
        -

        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.

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

        -

        Learn more

        -

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

        -
        +

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

        Compiling Bootstrap with Less

        +
        -

        Tools for compiling

        +

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

        -

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

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

        -

        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!

        +

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

        -

        Javascript

        -

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

        +

        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.

        +

        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.

        +

        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.

        +

        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.

        + +
        +
        +

        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:

        +

        Setup file structure

        +

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

           app/
   ├── layouts/
@@ -195,8 +196,8 @@
       └── glyphicons-halflings-white.png
        -

        Utilize starter template

        -

        Copy the following base HTML to get started.

        +

        Utilize starter template

        +

        Copy the following base HTML to get started.

         <html>
   <head>
@@ -212,8 +213,8 @@
 </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.

        +

        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>
@@ -233,56 +234,57 @@
 </html>
        -
        - - +
        +
        +
        -
        + + + - - + + + + + + + + + + + + + + + + + + + +
        - - - - - - - - - - - - - - - - - - - -- cgit v1.2.3 From a30045daef809edf5ed592ad842c04377898e444 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 00:30:15 -0700 Subject: reverse navbar styles to save code --- docs/extend.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/extend.html') diff --git a/docs/extend.html b/docs/extend.html index 973e08175..1c1a7d9a1 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -31,7 +31,7 @@ -
        +