From 4642156cbc6da4a9e25dce2168f2fb9b726de042 Mon Sep 17 00:00:00 2001 From: Thomas Park Date: Tue, 6 Aug 2013 15:19:12 -0400 Subject: unignore bower_components --- 2/bower_components/bootstrap/docs/extend.html | 307 ++++++++++++++++++++++++++ 1 file changed, 307 insertions(+) create mode 100644 2/bower_components/bootstrap/docs/extend.html (limited to '2/bower_components/bootstrap/docs/extend.html') diff --git a/2/bower_components/bootstrap/docs/extend.html b/2/bower_components/bootstrap/docs/extend.html new file mode 100644 index 00000000..f60c7ecd --- /dev/null +++ b/2/bower_components/bootstrap/docs/extend.html @@ -0,0 +1,307 @@ + + + + + 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>
+
+ +
+ +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3