troublefree-metronic

Installation

Pull this project as git submodule in the folder where you want to store your assets files:

cd resources/assets/
git submodule add [e-mail]:troublefree/metronic.git

Usage

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.

Compiling

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');
});

Example

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";