Noticeably Playful Monkeys


    2.4.0 • Public • Published

    1. TfWM Design System

    Netlify Status David Last commit Open Github issues

    1.1. Table of contents

    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.

    Transport for West Midlands design system example

    1.3. Quick start

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

    1. Clone the project with git clone
    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.




    npm i wmn-design-system

    DownloadsWeekly Downloads






    Unpacked Size

    22.5 MB

    Total Files


    Last publish


    • wmcadigital