design-system's Introduction

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:

Install dependencies: npm install
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:

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

Storybook

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

Build the Storybook: npm run build:storybook
Serve the Storybook: npm run serve:storybook

design-system's People

Contributors

Watchers

design-system's Issues

Implement card with floating title

Add a card component like the below (from https://iatistandard.org homepage) with image and floating title

Fonts

The original brand guidance for fonts says "Pragmatica for headings and Chalet London Sixty for the body copy"

Pragmatica is, as far as I know, fine.

We know that Chalet London Sixty is unavailable and therefore we should choose an alternative.

We might also want to choose a font for tiny text such as is common in d-portal:

(that's Ariel, with text-rendering: optimizeLegibility)

...as I suspect that the font that we choose to look good in as a replacement for body text might not look great when crammed into a 20px high axis label or a 10px codelist description.

Change CDN link to a valid link

Brief Description
I would like a simple way to use the suggested CDN link.

The current CDN link is an invalid link and would benefit from being a valid link.

Either of these would suffice. The non-min is preferable as it is more human-friendly and legible.

Issue Location
https://github.com/iati/design-system

Recommend Projects

iati / design-system Goto Github PK