1. TfWM Design System

1.1. Table of contents

• 1. TfWM Design System
  • 1.1. Table of contents
  • 1.2. Overview
  • 1.3. Quick start
  • 1.4. Tasks
    • 1.4.1. Starting web server
    • 1.4.2. Linting
    • 1.4.3. Compilation
    • 1.4.4. Clean up
  • 1.5. Troubleshooting
  • 1.6. Contributing to the code base
  • 1.7. Got feedback?

1.2. Overview

Welcome to the Transport for West Midlands Design System.

The TfWM design system is ran at the designated url on startup (usually http://localhost:3000) and is the primary means of viewing your work - it will live update as you make changes.

• Tailored for building Transport for West Midlands apps and websites: Using the TfWM Design System markup and CSS framework results in UIs that reflect the Transport for West Midlands look and feel.
• Continuously updated: As long as you're using the latest version of the TfWM Design System, your pages are always up to date with Transport for West Midlands UI changes.

1.3. Quick start

You'll need Git and Node.js installed to get this project running.

1. Clone the project with git clone https://github.com/wmcadigital/wmn-design-system.git
2. Run npm install in the root folder.
3. Run npm start to launch the dev environment with hot reloading.
4. Visit http://localhost:3000

Having trouble getting these steps to work on your machine? Follow the troubleshooting guide.

1.4. Tasks

For more in-depth information on what each task does, see tasks guide.

1.4.1. Starting web server

Start the TfWM Design System web server.

npm start

1.4.2. Linting

Lint the code base for syntax and stylistic errors.

See Linting for more details.

# Lint indentation, Sass, JavaScript files, html
npm run lint:all

# Lint languages independently
npm run lint:styles
npm run lint:templates
npm run lint:scripts

1.4.3. Compilation

Build the design system for various environments

See Building for more details.

# Build Sass, JavaScript, HTML files
npm run build:all

# Build languages/assets independently
npm run build:styles
npm run build:templates
npm run build:scripts
npm run build:images
npm run build:sprites
npm run build:config

1.4.4. Clean up

Delete all built languages/assets including temporary build and local files.

npm run clean

1.5. Troubleshooting

See the troubleshooting guide.

1.6. Contributing to the code base

See the contributing guide.

1.7. Got feedback?

Please open a new Github Issue.