1

I am working on a themable website, meaning the administrator can pick primary/secondary colors to customize the UI.

The website is build in .net and the style rules are written in less.js. The current implementation uses a homemade webpack plugin that bundles the less files together. Some less files contains undefined variables. Those variable are provided at runtime through dotless (ie the stylesheet url looks like this: www.mysite.com/main.bundle.less?primary=green)

We have two problems with this solution:

  • the custom plugin must be maintained (webpack 1 -> webpack 2 migration)
  • we would like to move away from dotless since it is not compatible with less.js

I could not find many articles on this topic.

We have two ideas:

  • build the css in the browser
  • when the administrator saves a new theme, create the css on the server and serve that to the user

Both options requires to bundle the required less file into one less file bundle. I could not find any existing webpack plugin that does this.

Are there other options? What are the usual ways to provide this feature?

Simon Bergot
  • 7,930
  • 3
  • 35
  • 54

1 Answers1

1

UIkit is the best suitable front-end framework for the things are you talking about. I have implemented all the things which you have mentioned here by using UIkit and enhancing few features, and it is really the best framework.

  • build the css in the browser

  • when the administrator saves a new theme, create the css on the server and serve that to the user

SynozeN Technologies
  • 221
  • 1
  • 6