Less boot theme

Question

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

Now, each of our customers needs a custom color scheme for their site. Just by changing some LESS variables, we can create a completely different view.

For instance:

@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 generates a complete css file with all styles. Each client has its own set of .css files. Our problem is that every time we make changes, it takes a long time to compile them.

How can we use LESS, have a basic theme and only generate class overrides that are needed to change the values ​​in which the changed variables are used?

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

Thanks,

Answer 1

See my answer to a similar question that might help solve your problem. fooobar.com/questions/1215176 / ...

If you are using MVC 4 or higher, you can use BundleTransformer to compile your junior server side.

This may depend on how you want to serve the file. If you know all the client URLs at runtime, just add the package URL for each client to the package configuration. If you do not, and the clients are flexible / dynamic, as was the case in our situation, add a controller action to handle dynamic themes.

I expanded our initial use case and created a more reusable way to include themes.

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

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