Using Twitter Bootstrap 3 during development - css

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...
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.

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.

Answer 3

For me, since they add stuff to the variables.less file I import the bs3 variables into my own variables file. I stick Bootstrap in its own folder inside my less directory.
The mixins.less has the grid creation and the grid.less is where those mixins are used. There's no one specific place for all min-width media queries of any size. If there is a desktop min-width for BS3, they stick it right after the stuff outside media queries, so that it's close by.
If you wanted to hide all images at the md width, you can use the responsive utilities OR
#media (min-width: #screen-md-min) {
img.md-hide {display:none}
}
However, the next size up won't see them since md is before lg in the stacking. So it's best to use responsive utilities on the image. I believe it's "hidden-md" is the class to use on stuff you want to hide at only md (992px or whatever you set in the variables.less).