<p align="left">
  <a href="https://bhp-devhub.github.io/bhp-digital-design-system/">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/BHP_2017_logo.svg/167px-BHP_2017_logo.svg.png" alt="BHP logo"h height="40">
  </a>
</p>
<p>
    <a href="https://bhp-devhub.github.io/bhp-digital-design-system/">Read the docs</a>
    ·
    <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a>
  </p>

# BHP UI Bootstrap Library

<!-- Badges section here. -->
[![Build Status](https://travis-ci.org/BHP-DevHub/bhp-ui.svg?branch=master)](https://travis-ci.org/BHP-DevHub/bhp-ui)
[![npm version](https://badge.fury.io/js/%40bhp%2Fui.svg)](https://badge.fury.io/js/%40bhp%2Fui)

The base HTML/CSS package for BHP Digital Design System. A customised Bootstrap deployment with extra custom components. Also available in [Material UI](https://github.com/BHP-DevHub/bhp-ui-material) framework.

### Getting started: With NPM

```
npm install @bhp/ui
```

### Getting started: With Yarn

```
yarn add @bhp/ui
```

### Getting started: With GitHub

Clone this [GitHub repository](https://github.com/BHP-DevHub/bhp-ui) to your project folder.

## Using BHP UI in HTML/CSS Project

Import the SCSS theme file in your project. You have a choice of dark theme `/scss/index-dark.scss`, warm theme  `/scss/index-warm.scss` or light theme  `/scss/index-light.scss`.

Any custom style or style override are to be added after.

## Using BHP UI in React Project

Please visit the React companion repository. Click here: [BHP UI Bootstrap React](https://github.com/BHP-DevHub/bhp-ui-react)

## Using BHP UI in Angular Project

Please visit the Angular companion repository. Click here: [BHP UI Bootstrap Angular](https://github.com/BHP-DevHub/bhp-ui-angular)

---

Please refer to the [online documentation](https://bhp-devhub.github.io/bhp-digital-design-system/) on how to create and add component into your project.
