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.1.2.60, and is visible in the top-right of the page throughout the design system. That version may not have been tested thoroughly - on the main website we stay a few versions behind the latest, and we specify a precise version of each asset by replacing "@latest" in the URL, e.g. https://unpkg.com/mp-design-system@0.9.5/dist/build/scss/main.css.

N.B. the <script> tag needs to be placed near the closing </body> tag of your page; it won't run correctly if placed in the head.

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';