It's possible to customise your implementation of brAND. We'll show you how.

## SASS

It's important that you do not modify brAND's core files. Problems can arise if updates happen to the codebase and your
changes will be overridden. The recommended way to include the latest brAND assets is by installing them through NPM and
importing the base brAND file through your own SASS compiler.

```
your-project/
├── scss
│   └── main.scss
└── node_modules/
    └── br-and
        └── scss
            └── brand.scss
```

It's entirely possible that you pick the individual assets you require from the `components` or `modules` folder (although)
modules are composed of components so you should be aware what components the module uses!

```scss
// main.scss
// Option A: Include all of brAND

@import "node_modules/@fakesamgregory/brand/scss/brand";
```

```scss
// main.scss
// Option B: Include parts of brAND

// Required
@import "node_modules/@fakesamgregory/brand/scss/variables";
@import "node_modules/@fakesamgregory/brand/scss/mixins";

// Optional
@import "node_modules/@fakesamgregory/brand/scss/normalize";
@import "node_modules/@fakesamgregory/brand/scss/grid";
@import "node_modules/@fakesamgregory/brand/scss/components/type";
@import "node_modules/@fakesamgregory/brand/scss/components/buttons";
```

## Variable defaults

There's a small list of variables that include the `!default` flag in brAND.
This allows you to specify your own customisations.

Right now, the following customisations are allowed.

- `$mobile` (breakpoint at which 'mobile' is considered active)
- `$tablet` (breakpoint at which 'tablet' is considered active)
- `$desktop`(breakpoint at which 'desktop' is considered active)

If overriding these defaults, you must set them before brAND. 

```scss
// main.scss

$mobile: 670px;
$tablet: 98px;
$desktop: 1290px;

@import "node_modules/@fakesamgregory/brand/scss/brand"`
```

## Colours

## Brand colours

Colour is a huge part of brand and we've provided a function for you to you access the colours...

- <span style="color: #FF323C;">Red</span> `theme-color("red")`
- <span style="color: #FFC800;">Yellow</span> `theme-color("yellow")`
- <span style="color: #5AC328;">Green</span> `theme-color("green")`
- <span style="color: #2897FF;">Blue</span> `theme-color("blue")`
- <span style="color: #A050FF;">Purple</span> `theme-color("purple")`
- <span style="color: #FF6ECF;">Pink</span> `theme-color("pink")`
- <span style="color: #323232;">Charcoal</span> `theme-color("charcoal")`

### Other colors

Other colours include

- `theme-color("green-accessible")`
- `theme-color("pink-accessible")`
- `color("white")`
- `color("grey")`

It's important to know when and how these colours must be used. 

## Colour utility classes

You can also use the brand colours in utility classes. These include.

- `.red-theme`
- `.section--blue`
- `.text-pink`

More on this later...