Using Twitter Bootstrap 3 during development

Question

This is a rather broad question, but I really can't narrow the title down more than this.

I have downloaded Bootstrap 3 and I am making customizations to variables.less while running grunt watch. Whenever I make changes to the LESS, grunt re-compiles everything into the dist directory, which I copy to my target static directory. All of that works fine, but...

1. Is this really the intended way of doing it? Should I move the Bootstrap source directory to some other directory to work more efficiently?

2. If I want to add some custom LESS for expressing e.g. "hide all img elements when the the screen is @screen-md pixels", how would I get access to @screen-md in my custom LESS file?

Any tips are highly appreciated, because I've found the documentation really lacking.

Answer 1

My workflow is similar to Matthew Trow, but instead of cloning I prefer to import the bootstrap.less file.

I'm using bower to keep Bootstrap updated, so my folder structure is like this:

> bower_components
  > bootstrap
  > font-awesome
  > requirejs
  ...
> css
  - project.css
  > less
    - project.less
    - variables.less

My project.less looks like this:

// Bootstrap framework
@import "../../bower_components/bootstrap/less/bootstrap.less";

// Font-awesome awesomeness
@import "../../bower_components/font-awesome/less/font-awesome.less";

// Project specific stuff
@import "variables.less";
@import "stuff.less";

I define both my variables and override bootstrap specific ones inside my variables.less:

// Override Bootstrap variables
@font-family-sans-serif:  "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
@btn-default-border: #bbb;
@brand-primary: #b02b2c;
@link-color: #08c;

// Override Font-Awesome variables (path relative to project.css position)
@fa-font-path: "../bower_components/font-awesome/fonts";

//Map Bootstrap variables to myproject specific names
@my-customname-float-breakpoint: @grid-float-breakpoint;
@theme-color: @brand-primary;

//Project specific variables
@my-favourite-color: rgb(228, 1, 1);

Then I compile only project.less to produce a compressed .css with everything (in the example there's also Font Awesome).

After the huge variables and classes update with Bootstrap 3, sometimes I feel better to map my custom variables to bootstrap ones inside my variables.less, instead of using directly Bootstrap ones inside my less files.

Importing bootstrap.less you can use any bootstrap variable wherever you want. So, for example:

// Hide all images at a viewport smaller than 992px (aka @screen-md)
@media (max-width: @screen-sm-max) {
    img {
        display: none;
    }
}

Answer 2

My personal way of doing this is to put all the bootstrap less files into a folder called 'bootstrap' and not touch any of them.

I then have my custom less files in a folder, which import bootstrap assets. I effectively clone the bootstrap.less file and prepend it with a project name: project-bootstrap.less This then imports files from the bootstrap folder.

At the base of my cloned project-bootstrap.less file, I add my custom less and my bootstrap overides. For example, I'll have a variables file that only includes parts of the bootstrap file I've overidden and of course, any custom variables. I do that for any bootstrap file where I make changes and comment accordingly.

My folder structure is usually:

css
 > less
   > bootstrap
     - bootstrap files
   - my custom files

I then simply compile my project-bootstrap.less file.