troublefree-metronic

Troublefree Metronic theme based on UIkit 3

Downloads in past

Stats

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

Readme

Installation
Pull this project as git submodule in the folder where you want to store your assets files:
cd resources/assets/
git submodule add git@gitlab.troublefree.nl: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";