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.
Option 1: include compiled files (recommended)
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:
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://firstname.lastname@example.org/build/css/wmnds.min.css" /> </head> <body> <!-- site content... --> </body> </html>
Add Transport for West Midlands Design System icons to your project.
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
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.
Navigate to the root folder of your new project
Ensure you have a package.json file. If you do not have the file, create it by opening the terminal and running:
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
- 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.
- Add your CSS file to your page layout if you need to, for example:
<head> <link rel="stylesheet" href="YOUR-CSS-FILE.css" /> </head>
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.