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.
The recommended way to use the design system in an IATI product is by including the CSS from the CDN, using the url below, replacing <VERSION> with the version you would like to use:
https://cdn.jsdelivr.net/npm/iati-design-system@<VERSION>/dist/css/iati.min.css
This project is versioned using Semantic Versioning. Versions can be specified as a major, minor, or patch version e.g. 1, 1.2, or 1.2.3. The latest version is shown on the GitHub releases page. We recommend fixing to a specific patch version so that upgrades can be checked explicitly before deployment, but as a minimum you should fix to a major version to prevent unexpected breaking changes.
To include the CSS in a HTML project, add the following code inside the <head> of your HTML pages:
<link
href="https://cdn.jsdelivr.net/npm/iati-design-system@<VERSION>/dist/css/iati.min.css"
rel="stylesheet"
/>Once this link is included, core styles will be applied, and all component and layout CSS classes will be available to apply to HTML elements, for example the .iati-button class:
<button class="iati-button">Button</button>It is also possible to include the design system in a Sass project.
First install with npm:
npm install iati-design-system
Then import the package in your .scss file. The Node.js Package Importer is required to use this syntax.
@use "pkg:iati-design-system";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.
To run Storybook locally, take the following steps:
- Install dependencies:
npm install - Start Storybook:
npm start
You will see live updates in the browser when you update styles or stories.
To check the CSS production build, take the following steps:
- Build the CSS:
npm run build - View the CSS file:
./dist/css/iati.css.
The check the Storybook production build, take the following steps:
- Build the Storybook:
npm run build:storybook - Serve the Storybook:
npm run serve:storybook