braid-design-system

braid-design-system

Themeable design system for the SEEK Group.

NOTE: This project is currently in alpha. The API is extremely unstable. Avoid using in production without guidance from project contributors.

Setup

This guide is currently optimised for usage with sku. If your project has a custom build setup, you'll need some extra guidance from project contributors to configure your bundler.

In your sku project, first install this library:

$ npm install --save braid-design-system

Then, in sku.config.js, add braid-design-system to your compilePackages list:

module.exports = {
  compilePackages: ['braid-design-system']
};

Next, import the desired theme at the very top of your application (e.g. src/client.js), before importing anything else.

WARNING: Since the theme contains styles that may be overridden by invididual components, the theme needs to be imported first to avoid CSS ordering issues.

For example:

import jobStreetTheme from 'braid-design-system/lib/themes/jobStreet';
import React from 'react';
// ...etc.

Finally, render the ThemeProvider component, providing the imported theme via the theme prop:

import {
  ThemeProvider,
  Text
} from 'braid-design-system';

export default () => (
  <ThemeProvider theme={jobStreetTheme}>
    <Text>Hello World!</Text>
  </ThemeProvider>
);

Themes

List of available themes.

Components

List of available components.

Local Development

$ npm install
$ npm start

License

MIT.