@ilo-org/designsystem

🚀 Go to website  |  ⚛️ React docs  |  🌿 Twig docs

Introduction

The ILO Design System provides tools and components for building accessible websites that implement the visual identity of the International Labour Organization.

Twig

Twig is a template engine used by PHP apps like WordPress and Drupal. Use our Twig Component Library to build content-heavy websites that don't require a lot of interactivity.

React

React is a JavaScript library for building user interfaces. Use our React Component Library to build dynamic web applications and dashboards, or websites that use frameworks like Next.js or Remix.

Packages

In addition to the two component libraries mentioned above, this monorepo includes packages which provides all of the styles, assets and utilities that both libraries need to operate. All packages are public packages on npm.

Package	Description	Current version
@ilo-org/brand-assets	Logos and image files
@ilo-org/fonts	Official fonts
@ilo-org/icon-build-helpers	Module used internally to generate icons
@ilo-org/icons	Icon files
@ilo-org/icons-react	Icon components
@ilo-org/react	React component library
@ilo-org/styles	Stylesheets for components
@ilo-org/themes	Style tokens for stylesheets
@ilo-org/twig	Twig component library
@ilo-org/utils	Shared utilities
@ilo-org/maestro	Storybook helpers for Twig

Code quality

JavasScript/Typescript projects undertaken for the ILO should use these configurations to be consist with ILO code standards.

Package	Description	Current version
@ilo-org/eslint-config	Config for linting with eslint
@ilo-org/prettier-config	Config for formatting with prettier
@ilo-org/typescript-config	config for type checking with TypeScript

Issues

Feel free to create an issue in this repository for all bugs, questions and feature requests.

Contributing

ILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review our Contribution Guidelines.

License

Licensed under the Apache 2.0.