How do I get started with customizing Bootstrap 3 with LESS?

Question

I've just downloaded Bootstrap 3 from https://github.com/twbs/bootstrap. I'm watching this tutorial: http://www.youtube.com/watch?v=I6EPArp4csA. How exactly do I get started with modifying the LESS files?

What I did was to copy these directories: LESS, dist/css dist/fonts dist/js and create my new project. The current project folder looks like this:

css
less
js
index.html

with the HTML file having this at the top:

<link rel="stylesheet/less" type="text/css" href="less/my_site.less"/> //only contains @import "bootstrap.less";
<script src="js/less.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

Now when I try to modify one of the variables in variables.less and compile it with SimpLESS there's a Syntax Error: carousel.less. What gives? When I comment out "carousel.less", another problem pops up with dropdown.less. So maybe it has something to do with the mixins? Anybody have an idea on how I get started on moving on with this?

Answer 1

Edit: Jan 14, 2015

Using gulp

1. Make sure you have node installed from nodejs.org

   1.1: Own /usr/local so you can run npm commands without sudo:

   sudo chown -R `whoami` /usr/local

2. Install gulp globally: npm install gulp -g

3. Make a folder on desktop and go to it: cd ~/Desktop && mkdir boot-gulp && cd $_.
4. Initiate the project manifest: npm init and accept the defaults.
5. Install gulp and gulp-less: npm install gulp gulp-less.
6. Make a file called gulpfile.js and paste the following in that file:

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");

gulp.task("less", function() {
   gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
});

7. Install bower globally: npm install bower -g
8. Install bootstrap with bower: bower install bootstrap
9. Make the less/main.less file and load bootstrap.less:

less/main.less

@import "bower_components/bootstrap/less/bootstrap.less";
// overrides here
@primary: #000; 
// ...

10. Run gulp less and you should see the output in the css folder.

Adding watch

11. Add the gulp-watch plugin: npm install gulp-watch
12. Update gulpfile.js to watch any less file and automatically compile to css:

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");
var watch = require("gulp-watch"); //+

gulp.task("less", function() {
  watch("less/**/*.less", function(){ //+
    gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
  }); //+
});

Now run gulp less. It is now watching all the less files in the less folder. Make a change and save any file in the less folder, and you should see the output automatically in the css folder.

EDIT: Jan 1, 2014

Give Koala a try. It compiles your LESS files real-time. It is free and cross-platform. You might also want to take a look at this FAQ about compiling Bootstrap with Koala.

Original Answer

I reproduced your problem with the app you mentioned. I tried another app such as crunch app and it worked fine. So with crunch, just drag and drop the bootstrap.less file into that app and click on crunch file button on the top right corner of the app. Then it will ask you where to save it. I personally use the command line tool assets-packager (npm install -g assets-packager). I hope that helped.

Answer 2

These are some of the better tutorial I could find about Bootstrap 3 Less Workflow.

1. http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
2. http://bootstrap.lesscss.ru/less.html

And if you want to learn Less, you can refer these links

1. http://lesscss.org (the official less website)
2. http://groupdocs.com/blog/using-bootstrap-with-less-css-tutorial
3. http://designshack.net/articles/css/using-less-js-to-simplify-your-css3

Hope this helps.