Master-css

Master-css is a wk-themed version of bootstrap along with several third party front end components:

• Angular-Toaster
• UI-Grid
• UI-Bootstrap
• UI-Select

Dependencies

In order to build the module, you will need to install the following apps:

• Node.js
• Grunt or gulp

Once node is installed, you will need to add the grunt-cli to your global node repository:

$ npm install grunt-cli -g

Installation

Master-css is installed using npm:

$ npm install master-css --save

This will put master-css into your node_modules directory.

Usage

Master-css is best utilized when you are making use of its scss components and the functionality that those provide.

The best way to go about this is to set up your own sass directory and import the styles you need from the main directory.

Then you would use the task runner of your choice to compile the scss.

Using Grunt

Assuming you already have a gruntfile already, first thing you would need to install is the grunt-sass plugin.

$ npm install grunt-sass --save-dev

And the task in your gruntfile should look something like this

sass: {
    master: {
        options: {
            outputStyle: 'compressed',
            sourceMap: true
        },
 
 
        files: {
            // if you only wanted to compile master-css
            'node_modules/master-css/stylesheets/main.scss': '/content/css/master.css'
 
            // if you want to customize your master-css build import the files in the sass and compile those
            '<path to your own main.scss stylesheet goes here>': '<path to your output css>'
        }
    }
}

Your own sass file would look something like this

//your own bootstrap variable overrides must be imported first if you are using them 
@import 'custom_theme'
 
 
//the base stylesheets, includes bootstrap uibootstrap icons and fonts 
@import './node_modules/master-css/stylesheets/base.scss'
 
 
//Picking and chosing the components you need. 
 
@import './node_modules/master-css/stylesheets/components/<path to component .scss file>'
 
 
//now import your own styles. 
...