roobie/docs/utilities/background-color.md

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

# Background Color

## Classes
```html
<div class="bg0">Transparent</div>
<div class="bg1">1</div>
<div class="bg2">2</div>
<div class="bg3">3</div>
<div class="bg4">4</div>
<div class="bg5">5</div>
<div class="bg6">6</div>
<div class="bg-success">Success</div>
<div class="bg-warning">Warning</div>
<div class="bg-danger">Danger</div>
<div class="bg-info">Info</div>
<div class="bg-white1">White 1</div>
<div class="bg-white2 bg-white">White 2</div>
<div class="bg-white3">White 3</div>
<div class="bg-black1">Black 1</div>
<div class="bg-black2 bg-black">Black 2</div>
<div class="bg-black3">Black 3</div>
<div class="bg-grey1">Grey 1</div>
<div class="bg-grey2 bg-grey">Grey 2</div>
<div class="bg-grey3">Grey 3</div>
<div class="bg-red1">Red 1</div>
<div class="bg-red2 bg-red">Red 2</div>
<div class="bg-red3">Red 3</div>
<div class="bg-orange1">Orange 1</div>
<div class="bg-orange2 bg-orange">Orange 2</div>
<div class="bg-orange3">Orange 3</div>
<div class="bg-yellow1">Yellow 1</div>
<div class="bg-yellow2 bg-yellow">Yellow 2</div>
<div class="bg-yellow3">Yellow 3</div>
<div class="bg-green1">Green 1</div>
<div class="bg-green2 bg-green">Green 2</div>
<div class="bg-green3">Green 3</div>
<div class="bg-blue1">Blue 1</div>
<div class="bg-blue2 bg-blue">Blue 2</div>
<div class="bg-blue3">Blue 3</div>
<div class="bg-indigo1">Indigo 1</div>
<div class="bg-indigo2 bg-indigo">Indigo 2</div>
<div class="bg-indigo3">Indigo 3</div>
```

## Usage
### Base
<div class="bg0 pad4 br">Transparent</div>
<div class="bg1 pad4 br">bg1</div>
<div class="bg2 pad4 br">bg2</div>
<div class="bg3 pad4 br">bg3</div>
<div class="bg4 pad4 br">bg4</div>
<div class="bg5 pad4 br">bg5</div>
<div class="bg6 pad4 br">bg6</div>

```html
<div class="bg0 pad4 br">Transparent</div>
<div class="bg1 pad4 br">bg1</div>
<div class="bg2 pad4 br">bg2</div>
<div class="bg3 pad4 br">bg3</div>
<div class="bg4 pad4 br">bg4</div>
<div class="bg5 pad4 br">bg5</div>
<div class="bg6 pad4 br">bg6</div>
```

### Status
<div class="bg-success pad4 br">bg-success</div>
<div class="bg-warning pad4 br">bg-warning</div>
<div class="bg-danger pad4 br">bg-danger</div>
<div class="bg-info pad4 br">bg-info</div>

```html
<div class="bg-success pad4 br">bg-success</div>
<div class="bg-warning pad4 br">bg-warning</div>
<div class="bg-danger pad4 br">bg-danger</div>
<div class="bg-info pad4 br">bg-info</div>
```

### White
<div class="bg-white1 pad4 br">bg-white1</div>
<div class="bg-white pad4 br">bg-white</div>
<div class="bg-white3 pad4 br">bg-white3</div>

```html
<div class="bg-white1 pad4 br">bg-white1</div>
<div class="bg-white pad4 br">bg-white</div>
<div class="bg-white3 pad4 br">bg-white3</div>
```

### Black
<div class="bg-black1 pad4 br white">bg-black1</div>
<div class="bg-black pad4 br white">bg-black</div>
<div class="bg-black3 pad4 br white">bg-black3</div>

```html
<div class="bg-black1 pad4 br white">bg-black1</div>
<div class="bg-black pad4 br white">bg-black</div>
<div class="bg-black3 pad4 br white">bg-black3</div>
```

### Grey
<div class="bg-grey1 pad4 br">bg-grey1</div>
<div class="bg-grey pad4 br">bg-grey</div>
<div class="bg-grey3 pad4 br">bg-grey3</div>

```html
<div class="bg-grey1 pad4 br">bg-grey1</div>
<div class="bg-grey pad4 br">bg-grey</div>
<div class="bg-grey3 pad4 br">bg-grey3</div>
```

### Red
<div class="bg-red1 pad4 br white">bg-red1</div>
<div class="bg-red pad4 br white">bg-red</div>
<div class="bg-red3 pad4 br white">bg-red3</div>

```html
<div class="bg-red1 pad4 br white">bg-red1</div>
<div class="bg-red pad4 br white">bg-red</div>
<div class="bg-red3 pad4 br white">bg-red3</div>
```

### Orange
<div class="bg-orange1 pad4 br">bg-orange1</div>
<div class="bg-orange pad4 br">bg-orange</div>
<div class="bg-orange3 pad4 br">bg-orange3</div>

```html
<div class="bg-orange1 pad4 br">bg-orange1</div>
<div class="bg-orange pad4 br">bg-orange</div>
<div class="bg-orange3 pad4 br">bg-orange3</div>
```

### Yellow
<div class="bg-yellow1 pad4 br">bg-yellow1</div>
<div class="bg-yellow pad4 br">bg-yellow</div>
<div class="bg-yellow3 pad4 br">bg-yellow3</div>

```html
<div class="bg-yellow1 pad4 br">bg-yellow1</div>
<div class="bg-yellow pad4 br">bg-yellow</div>
<div class="bg-yellow3 pad4 br">bg-yellow3</div>
```

### Green
<div class="bg-green1 pad4 br">bg-green1</div>
<div class="bg-green pad4 br">bg-green</div>
<div class="bg-green3 pad4 br">bg-green3</div>

```html
<div class="bg-green1 pad4 br">bg-green1</div>
<div class="bg-green pad4 br">bg-green</div>
<div class="bg-green3 pad4 br">bg-green3</div>
```

### Blue
<div class="bg-blue1 pad4 br white">bg-blue1</div>
<div class="bg-blue pad4 br white">bg-blue</div>
<div class="bg-blue3 pad4 br white">bg-blue3</div>

```html
<div class="bg-blue1 pad4 br white">bg-blue1</div>
<div class="bg-blue pad4 br white">bg-blue</div>
<div class="bg-blue3 pad4 br white">bg-blue3</div>
```

### Indigo
<div class="bg-indigo1 pad4 br white">bg-indigo1</div>
<div class="bg-indigo pad4 br white">bg-indigo</div>
<div class="bg-indigo3 pad4 br white">bg-indigo3</div>

```html
<div class="bg-indigo1 pad4 br white">bg-indigo1</div>
<div class="bg-indigo pad4 br white">bg-indigo</div>
<div class="bg-indigo3 pad4 br white">bg-indigo3</div>
```