# Getting Start
---
## Development
#### 1. Import Style into main scss file
Create a new file `style.scss` to set up `$venture` variable, and import the promo-pretty theme.
```scss
// Example of styles.scss
$venture = "jackpotjoy";
// Import only the needed style: offer-ui
@import "node_modules/promo-pretty/scss/themes/offer-ui/index";
```
#### 2. Import Style into main html
```html
MDD Style Guidelines
```
---
## Theme Amendment
If you need to amend the style, try to overwrite files or elements under `themes` folder, currently only have one theme `offer-ui` under `themes` folder.
```bash
├── /scss
├── /components
├── /mixins
├── /modules
├── /utilities
├── /themes
├── /offer-ui
├── /common
├── /_index.scss
├── /_common.scss
├── /_ventures.scss
├── /partials
├── /_index.scss
├── /_responsive.scss
├── /_overlay.scss
├── /_tile.scss
├── /_index.scss
├── /_default.scss
├── /_jackpotjoy.scss
├── ...
```
`common` folder have global elements css rules, like `body`, `h1,h2,h3,p`, `html ...` and global font or colors.
`partials` folder contains the specific theme related components, such as offer system `overlay` and `tile` components.
`_responsive.scss` contains all breakpoints for each components, when you created a new component, you should add the responsive breakpoint handling as well.
---
For example, if you want to change `jackpotjoy` venture theme, you can edit `_jackpotjoy.scss` file, this is venture related theme file, you can change the variables and properties in here when you want to customize color or elements properties.
```scss
// _jackpotjoy.scss file should be look like this
@mixin jackpotjoy-variables() {
// change variables value in here
}
@mixin jackpotjoy() {
// change properties value in here
}
```
In the `@mixin jackpotjoy-variables()`, you can put those variables you want to change the value.
```scss
// _jackpotjoy.scss
@mixin jackpotjoy-variables() {
// override variables value in here
$primary-font-family: 'futura-pt', sans-serif !global; // override primary font family
$secondary-font-family: 'futura-pt-bold', sans-serif !global; // override secondary font family
$body-font-family: $primary-font-family, $fallback-font-family !global; // override body font family
// All h1,h2,h3... p, span will be inherited from body font family
$primary-color: #FFFFFF !global; // override primary color for button background etc
$primary-color-dark: #FFFFFF !global;
// override primary dark color, for button showdows etc
$light-color: #F53E7D !global; // override light color, for button text color etc
$body-font-color: white !global; // override body font color, for body or any typography color etc
}
```
In the `@mixin jackpotjoy() ` we can override the elements properties.
```scss
// _jackpotjoy.scss
@mixin jackpotjoy() {
// override button properties value for jackpotjoy venture in here
.btn.btn-primary {
font-family: 'futura-pt', sans-serif;
font-size: $html-font-size;
border: transparent solid 4px;
box-shadow: inset 0 0 0 2px;
padding: 10px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
transition: transform .2s ease-in-out;
border-radius: 0;
}
}
```