Master-CSS v1.4.2

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

Getting Started with NPM

Dependencies

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

Node.js
[Grunt] (http://gruntjs.com/) or [gulp] (http://gulpjs.com/)

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

$ npm install grunt-cli -g

Adding your .npmrc

In order to

registry=https://wkaxcess.pkgs.visualstudio.com/_packaging/master-css-npm/npm/registry
always-auth=true

Now that you are set up you need to get authenticated. To do this we will use the grunt package vsts-npm-auth to set up our .npmrc file.

To install run:

npm install -g vsts-npm-auth

And now to run the tool:

vsts-npm-auth -config path/to/your/.npmrc

Installation

Master-css is installed using npm:

$ npm install master-css-npm --save

This will put master-css into your node_modules directory and put it in the dependencies section of your package.json file.

Nuget Installation

In the Nuget package management console

Install-Package Master-CSS -Source "https://wkaxcess.pkgs.visualstudio.com/_packaging/Master-CSS/nuget/v3/index.json" -Version 1.3.12

Alternatively you can run this command via a windows command prompt:

nuget.exe install Master-CSS -Source "https://wkaxcess.pkgs.visualstudio.com/_packaging/Master-CSS/nuget/v3/index.json" -Version 1.3.12

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.

Setting up your grunt task

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.
...