<p align="left">
  <a href="https://gitlab.com/bhp-dev/dds-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://gitlab.com/bhp-dev/dds-digital-design-system/">Read the docs</a>
    ·
    <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a>
  </p>

# DDS Bootstrap Theme  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 Digital Design System. A customised Bootstrap deployment with extra custom components. Also available in [Material UI](https://gitlab.com/bhp-dev/dds-material-react) framework.

### Getting started: With NPM

```
npm install @ddsys/ui
```

### Getting started: With Yarn

```
yarn add @ddsys/ui
```

### Getting started: With GitLab

Clone this [repository](https://gitlab.com/bhp-dev/dds-bootstrap-theme) to your project folder.

## Using DDS Bootstrap 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 DDS Bootstrap in React Project

Please visit the React companion repository. Click here: [DDS Bootstrap React](https://gitlab.com/bhp-dev/dds-bootstrap-react)

## Using DDS Bootstrap in Angular Project

Please visit the Angular companion repository. Click here: [DDS Bootstrap Angular](https://gitlab.com/bhp-dev/dds-bootstrap-ng)

---

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