search

IATI / design-system

A design system for IATI products.
https://iati.github.io/design-system/
0 stars 1 forks source link

readme

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.

How do I use the IATI Design System?

CDN (Recommended)

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>

NPM (Optional)

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";

How do I contribute 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