Created by: boennemann
I always wanted to consume bootstrap and customize it right inside of my own project without touching the original source files. I know there is something like the custom build generator, but it's not flexible, because the output is compiled css. If I change my mind and want to change that one variable I have to fill out the entire form again. So what I did up until now is simply copying the less/bootstrap.less
file, adapting the modules' paths and importing my own variables file after the original one, but then I'm touching the original source files, which is bad.
A great start would be if bootstrap could take user defined variables into account. A change as simple as the one I'm proposing would allow the following:
// works
@body-bg: gold;
@import "bower_components/bootstrap/less/bootstrap";
But there is a problem, let's say I'm changing @brand-primary
. It wouldn't have an effect at all, because the variable is never used directly, but only abstract (e.g. @component-active-bg: @brand-primary;
) and so it always refers to the variable's default value.
// no effect
@brand-primary: gold;
@import "bower_components/bootstrap/less/bootstrap";
Of course we could sort the variables by their dependencies and load them one after another, but that would make the code unreadable and unmaintainable.
// ugly
.default-variables() {
@import "variables.less";
}
.default-variables;
.default-variables-2() {
@import "variables-2.less";
}
.default-variables-2;
// etc.
So in the end the pull-request only allows to overwrite specific variables, which is confusing and unexpected behavior. Rather than trashing my attempt I want to put it up for discussion.
- Does this bring more benefits than cost?
- How could this be solved more elegantly?
- Should this be solved at all?