Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Docs

Production

About

To start using our styles, components and patterns in your production project, you'll first need to include Transport for West Midlands Design System in your project.

There are currently two ways of including the design system within your project. You can either install it using node package manager (npm) or include the compiled files in your application.

Getting started is as simple as including Transport for West Midlands Design System's minified CSS file and adding .wmnds-html to the html element in your service/application:

Quick setup

  1. Add the below snippet of code to your page(s) within your project

    
<!DOCTYPE html>
<html lang="en-gb" class="wmnds-html">
  <head>
    <!-- CSS for WMN Design System -->
    <link rel="stylesheet" href="https://unpkg.com/wmn-design-system@2.4.0/build/css/wmnds.min.css" />
  </head>
  <body>
    <!-- site content... -->
  </body>
</html>

  2. Add Transport for West Midlands Design System icons to your project.

Start developing

You should now be able to include Transport for West Midlands Design System components and patterns using the design system documentation. Expand the HTML markup tabs on each page to see how to include that component/pattern to your project.

Option 2: install using npm

Transport for West Midlands Design System is available on npm as wmn-design-system. This package contains all of Transport for West Midlands Design System styles, components or patterns and documentation.

Add design system package to your project

  1. Install Node.js If you have not already installed version 4.2.0 or later of Node.js, install the latest Long Term Support(LTS) version.

  2. Navigate to the root folder of your new project

  3. Ensure you have a package.json file. If you do not have the file, create it by opening the terminal and running:

    npm init

  4. In your terminal, run:

    npm install wmn-design-system --save

When the installation finishes, the wmn-design-system will be in your node_modules folder and will appear in your package.json file.

Setup CSS

  1. Add the following to the main Sass file in your project, so that your compiler adds all of Transport for West Midlands Design System's styles to your compiled CSS file.
@import "node_modules/wmn-design-system/src/wmnds/sass/wmnds.scss
  1. Add your CSS file to your page layout if you need to, for example:
    <head>
   <link rel="stylesheet" href="YOUR-CSS-FILE.css" />
</head>

Start developing

You should now be able to include Transport for West Midlands Design System components and patterns using the design system documentation. Expand the nunjucks markup and properties tabs on each page to see how to include that component/pattern to your project.