CODEWITHSUNDEEP
variablestwitter-bootstrapcustomizationless
Seong Lee
Seong Lee

Reputation: 10520

Bootstrap variable overriding with LESS

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 "mixins.less";
**@import "../custom-variables.less"; //Override variables**

Then, using WinLess I compiled the bootstrap.less file to get new bootstrap.css with overridden variable import call and linked the css with html file but the grid won't change to 16 columns.

Can anyone please point out what I am doing wrong?

Upvotes: 70

Views: 59753

Answers (4)

Sterling Diaz
Sterling Diaz

Reputation: 3875

An easy way is just to override the styles in your style doc, using the same name, and marking it as !important.

Upvotes: -4

adamj
adamj

Reputation: 4782

Another example that may help someone:

@import 'bootstrap/bootstrap/variables';

// Prgress bar
@progress-bar-bg: #f5f5f5;
@progress-bar-default-color: @gray-base;

@import 'bootstrap/bootstrap';

Upvotes: 1

Adam
Adam

Reputation: 2917

Overriding variables after importing the original bootstrap.less works great for me:

@import "less/bootstrap.less";

@body-bg:     red;
@text-color:  green;
@link-color:  blue;

Compiling the above LESS source outputs properly customized Bootstrap CSS code.

Relevant info: http://lesscss.org/features/#variables-feature-lazy-loading

Upvotes: 153

Marcos
Marcos

Reputation: 657

I work on a similar project where we have bootstrap in a 'third-party' location and then override only mixins.less and 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 @gridColumnWidth or @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 shared.less and mixins.less

if this still isn't working, then maybe WinLess is getting confused

Upvotes: 43

Related Questions