IATI Design System

What is the IATI Design System?

The IATI Design System is a set of reusable styles and components which should be used in IATI web products, along with guidance on how to use them.

Using the IATI Design System

Please see the Storybook site for instructions.

Contributing to the IATI Design System

Prerequisites

Node v20

IATI Design System requires Node v20. We recommend installing Node Version Manager and running the command nvm use to use the Node version set in the .nvmrc file at the root of the project.

Running locally

To run Storybook locally, take the following steps:

1. Install dependencies: npm install
2. Start Storybook: npm start

You will see live updates in the browser when you update styles or stories.

Production build

CSS

To check the CSS production build, take the following steps:

1. Build the CSS: npm run build
2. View the CSS file: ./dist/css/iati.css.

Storybook

The check the Storybook production build, take the following steps:

1. Build the Storybook: npm run build:storybook
2. Serve the Storybook: npm run serve:storybook