1. WMCA Design System

1.1. Table of contents

• 1. WMCA 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 West Midlands Combined Authority Design System.

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

• Tailored for building West Midlands Combined Authority apps and websites: Using the WMCA Design System markup and CSS framework results in UIs that reflect the West Midlands Combined Authority look and feel.
• Continuously updated: As long as you're using the latest version of the WMCA Design System, your pages are always up to date with West Midlands Combined Authority 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/wmca-design-system.git
2. Run npm i in the root folder.
3. Run npm start to launch the dev environment with hot reloading.
4. Visit http://localhost:8080

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 WMCA 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.