barnardos / design-system

The website and components of the Design System

Design System

Installation

1. Install latest LTS Node.js.
2. Install the Barnardo’s Design System components using:

npm install @barnardos/components

3. Import the components you need. You can either import:

• the React components (recommended)
• just the CSS of the components

Importing the React components

Use named imports.

For example, to import the BackLink and Pagination components:

// MyComponent/index.js
import { BackLink, Pagination } from "@barnardos/components";

Importing the CSS only

If you aren’t using React, you can still use the CSS of each component.

For example, to import the CSS of the BackLink and Pagination components:

/* src/index.css */
@import "node_modules/@barnardos/components/src/components/custom-properties.css";
@import "node_modules/@barnardos/components/src/components/BackLink/index.css";
@import "node_modules/@barnardos/components/src/components/Pagination/index.css";

You’ll need to use postcss-present-env to transpile the CSS using the Design System’s PostCSS and browserslist configurations.

---

Looking to contribute? View the contributing guide.