Less bootstrap theme

Question

We use bootstrap in a project. We bought a custom made theme for bootstrap that created a nice custom style around it and added a lot of useful styles we used in our project. This theme uses LESS.

Now each of our clients wanted a custom color scheme for their site. By simply changing some LESS variables, we can generate a completely different appearance.

For example:

@import "../../theme/style.less";
@import "../../shared.less";

// Basic Colors
@navy: #781d7e;       // Primary color
@dark-gray: #c2c2c2;  // Default color
@blue: #8dc63f;       // Success color
@lazur: #00aedb;      // Info color
@yellow: #f7941e;     // Warrning color
@red: #ed1c24;        // Danger color

This generate a complete css file with all the styles. Each client has it's own set of generate .css files. Our problem is that it takes a long time to compile those each time we make changes.

How could we, using LESS, have a base theme and generate only classes overrides that are needed to modify values where the modified variables are used?

For example if btn-primary background-color is @navy, then for a new color scheme all I need is a css file containing a class override for .btn-primary changing background-color to the new value of @navy. Is this even possible with LESS?

Thanks,

Answer 1

See my answer to a similar question this could help to solve your problem. https://stackoverflow.com/a/25055203/138029

If you are using MVC 4 or above you could use BundleTransformer to compile your LESS server side.

It can depend on how you want to serve the file. If you know all the client urls at run time then just add add a bundle url for each client to the bundle config. If you don't and the clients are flexible/dynamic as was the case in our situation then add a controller action to handle dynamic themes.

I've expanded on our original use case and created a more reusable way of including themes.

Demo site here: http://bundletransformer-theme-builder.azurewebsites.net/

GitHub repo here: https://github.com/benembery/bundle-transformer-theme-builder