Extending Bootstrap
-Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.
-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?
-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.
- -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> -- -