Using Twitter Bootstrap 3 during development

css, less, twitter-bootstrap, twitter-bootstrap-3

Solution

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;
    }
}

Problem

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... Is this really the intended way of doing it? Should I move the Bootstrap source directory to some other directory to work more efficiently? 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.

Original source