Menu

Installing the design system

Consuming the design system via link

The simplest way to consume the design system is with a <link> & <script> tag. Unpkg is a CDN of the built CSS & JavaScript, and can be included like so:

<link rel="stylesheet" href="https://unpkg.com/mp-design-system@latest/dist/build/scss/main.css" />

<script src="https://unpkg.com/mp-design-system@latest/dist/build/js/app.js"></script>

The latest version number is V.0.9.10, and is visible in the top-right of the page throughout the design system. You can access previous versions by replacing "latest" in the URL, e.g. https://unpkg.com/mp-design-system@0.8.2/dist/build/scss/main.css

Consuming the design system via NPM

If you wish to integrate the design system into your own build system, or customise the files being served, you can install the mp-design-system NPM package.

npm install mp-design-system

Within your package.json file, you can add an alias, allowing you to reference the system with the characters mp:

{
...
"alias": {
"mp": "./node_modules/mp-design-system/src/assets/scss"
}
}

Now, within your main SCSS file, you can pull in the full system:

@import '~mp';

Pull in specific sections of the system:

@import '~mp/tools';
@import '~mp/foundations';
@import '~mp/elements';
@import '~mp/objects';
@import '~mp/components';
@import '~mp/utilities';

Or even pull in specific components:

@import '~mp/components/button';