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

CSS

If you do not want to use SASS then dist/mns-core-ui/all.css will give you the CSS for the entire library.

Fonts

Set the variable $mns-london-font-path in your main SASS file to point to your fonts directory and you shall be able to use the mns-core-ui fonts.

Contributing

Click here for guidelines on how to participate in the development of mns-core-ui.