Skip to content
The website and components of the Design System
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Move e2e tests to cypress Apr 12, 2019
.github Add releasing notes Apr 12, 2019
__mocks__ Move e2e tests to cypress Apr 12, 2019
cypress Move e2e tests to cypress Apr 12, 2019
src Fix contributing guidance Jun 27, 2019
static Fix missing guidance Jun 10, 2019
.browserslistrc Fix browserslist config Oct 31, 2018
.editorconfig Add code quality tools Feb 7, 2018
.eslintrc.json Refactor for consistent imports order Mar 12, 2019
.gitignore Move e2e tests to cypress Apr 12, 2019
.nvmrc Bump node version Jan 15, 2019
.prettierignore Update dependencies Nov 8, 2018
.remarklintrc.json Add code quality tools Feb 7, 2018
.stylelintrc.json Use shared stylelint config Aug 2, 2018
CHANGELOG.md Prepare 1.0.0 Apr 18, 2019
LICENSE Add community guidelines Jun 19, 2018
README.md Refactor to remove template literals around string nodes Mar 6, 2019
VISION.md Update dependencies Oct 12, 2018
_redirects Add domain redirect Oct 30, 2018
cypress.json Move e2e tests to cypress Apr 12, 2019
gatsby-browser.js Add search Mar 8, 2019
gatsby-config.js Move e2e tests to cypress Apr 12, 2019
jest-preprocess.js Move e2e tests to cypress Apr 12, 2019
jest-setup.js Move e2e tests to cypress Apr 12, 2019
jest.config.js Move e2e tests to cypress Apr 12, 2019
loadershim.js Move e2e tests to cypress Apr 12, 2019
package-lock.json Prepare 1.0.0 Apr 18, 2019
package.json Prepare 1.0.0 Apr 18, 2019
postcss.config.js Fix overall structure Mar 5, 2019

README.md

Design System

Installation

  1. Install latest LTS Node.js.
  2. Install the Barnardo’s Design System components using:
npm install @barnardos/components
  1. 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.

You can’t perform that action at this time.