Mns-core-ui NPM

Last 2 versions of evergreen browsers (chrome/safari/firefox) supported

Setup the library for use in your application

Install the module

npm install mns-core-ui --save

Asset paths

The library exposes the following paths:

sassPaths
assetImagePaths
assetFontPaths

Add the following to your webpack config:

var mnsCoreUI = require('mns-core-ui');

module.exports = {
    ....
    
    //SASS
    sassLoader: {
        includePaths: mnsCoreUI.sassPaths
    },
    
    //Fonts
    plugins: [
                new CopyWebpackPlugin([{
                    context: mnsCoreUI.assetFontPaths,
                    from: '**/*.{woff2,woff,eot,svg,ttf}',
                    to: 'fonts'
                }])
              ]
}

Or if you are using gulp, add this to your gulp sass compile file:

var mnsCoreUI = require('mns-core-ui');

    .pipe(sass({
        includePaths: mnsCoreUI.sassPaths
    })
);

The following variables need to be set:

$mns-core-ui-images-dir

Consuming the Library

SASS

Using M&S Core UI is easy. Just add the following to your main SASS file and you get all of the styles used in the library.

@import 'mns-core-ui'

If you would like to be more selective with which styles are imported you can add @import 'mns-core-ui/globals' to your main SASS file and then import the individual components, modules or templates that you want to use. 'mns-core-ui/globals' is the foundation on which the rest of the library is built on.