# Introduction

**Promo-Pretty** is a lightweight, responsive, extensible CSS framework for `Gamesys Marketing Design Development Team`. 

You can quickly build layouts and themes with simple inline class modifiers, most of classes are utilities level.

View Source Code:  <a href="https://github.gamesys.co.uk/gamesys-design/promo-pretty.git"><button class="btn btn-lg">GitHub</button></a>

---

## Install
Clone the repositorie and simply install node dependances, then link to your project.
```bash
# Git clone repositorie
git clone https://github.gamesys.co.uk/gamesys-design/promo-pretty.git

# Install node dependances
npm i && npm link

# Under your project folder
npm link path/to/promo-pretty
```

## Development
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/src/offer-ui";
```

## Docs Development
Go to `/src/Markdowns` to edit exist markdown file to add more infomation to the documents or create new one, you ca

For example, you created a new markdown file call `Development.md`,
after you created your new markdown file, import the new file into `/src/Markdowns/index.js`


```javascript
// Documents & Components browsers development
import GetStart from  './GetStart.md';
import Introduction from  './Introduction.md';

// Import Development.md file
import Development from  './Development.md';

// Export Development variable
export {
    Introduction,
    GetStart,
    Development
};

```

And then you can build it by runing:

```bash
# Documents & Components browsers development
yarn dev

# or

npm run dev 
```

## Production Build
Run `gulp build` under project root folder will build all ventures css file and output them to `/dist` folder.

```bash
# Build all ventures css to /dist folder
gulp build

├── dist/
│   ├── jackpotjoy.css
│   ├── jackpotjoy.min.css
│   ├── monoply.css
│   ├── monoply.min.css
│   ├── heartbingo.css
│   └── heartbingo.min.css
│   └── ...`
```