I have been investigating for the whole day as I considered it would be worthwhile spending some time to learn best practice for customizing Bootstrap.
I can see that there is a friendly page available for customizing elements selectively from http://twitter.github.io/bootstrap/customize.html but I want to have more control than this without touching original bootstrap source files.
To start with, I basically wanted to test out changing the grid from 12 to 16 columns and to do this, I created my own variable less file and added @gridColumns:16; only to this file and imported this custom less inside bootstrap.less as follows.
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
**@import "../custom-variables.less"; //Override variables**
I work on a similar project where we have bootstrap in a 'third-party' location and then override only
variables.less. The pattern we use for this adds three files and doesn't touch bootstrap at all (allowing you to drop in replacements easily):
/style |- bootstrap-master/ | |- less/ | |- js/ | ... |- shared/ |- shared.less |- variables.less |- mixins.less
the mixins file
/* * /style/shared/mixins.less */ @import "../bootstrap-master/less/mixins.less"; // override any mixins (or add any of your third party mixins here)
the variables file, which is where you would override grids
/* * /style/shared/variables.less */ @import "../bootstrap-master/less/variables.less"; @gridColumns: 16; // let's pretend this is your site-specific override
The file which is actually imported (or fed through to a less compiler):
/* * /style/shared/shared.less */ @import "variables.less"; @import "mixins.less"; @import "../bootstrap-master/less/grid.less"; //and any other bootstrap less files we need here
in my setup, if i do this, i get a css file with some weird .span15 values (since i didn't update
@gridGutterWidth but the .row-fluid values actually work out just the way you'd expect them to since they're calculated by straightforward division).
I like this setup because i can
cd into bootstrap-master and
git pull and fetch new updates without having to merge any of my specific kludges (it also gives me a good handle on what i've actually overridden)
The other thing is that it's very clear that shared.less is only using grid.less (rather than all of bootstrap). This is intentional since in most instances you don't need all of bootstrap, just a few parts of it to get going. Most bootstrap less files at least are nice in that their only hard dependencies are
if this still isn't working, then maybe WinLess is getting confused