Troublefree Metronic theme based on UIkit 3

Downloads in past


0.1.05 years ago6 years agoMinified + gzip package size for troublefree-metronic in KB


Pull this project as git submodule in the folder where you want to store your assets files:
cd resources/assets/
git submodule add
Create a new application entry less file and import the metronic theme uikit file:
// UIkit Base + Metronic Theme
@import "../metronic/less/uikit";

Adding New Module Colors

You can easily add some new application colors by using the colorize methods. The .colorize-global($name, $color-value); method can be used to create global color selector. The .colorize-specific($name, $color-value); method can be used to create a define a certain color for an page object
We need to define them in the right order.. otherwise sometimes the overwrite colors won't work properly:
// First we define the global overwrite colors.
.colorize-global(red, #fff);
.colorize-global(blue, #hhh);

// Then we define the specific overwrite colors.
.colorize-specific(red, #fff);
.colorize-specific(blue, #hhh);

This can all be done from your application entry file.


When you think your ready you can easily compile your less files by using the application entry file.
With elixir:
elixir(mix => {
    // The uikit stylesheets
    mix.less('app.less', 'public/css/uikit.css');
    // The uikit scripts.
    mix.scriptsIn('./resources/assets/metronic/vendor/uikit/js', 'public/js/uikit.js');
There is an example available in the cloned git module. Import this instead of the default metronic uikit less file:
@import "../metronic/less/example/app";