# onboard.css

> 🏝️🏖️💯 Introduce your customers to your app before they start using your app

Latest version **1.1.0** (published 2020-01-20) · 0 weekly downloads

## Install

```sh
npm install onboard.css
pnpm add onboard.css
yarn add onboard.css
bun add onboard.css
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-01-20 |
| First published | 2019-12-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | André ATCHORI |
| Maintainers | dredev1234m |

## Links

- npm: https://www.npmjs.com/package/onboard.css
- Repository: https://github.com/andreatchori/onboard.css
- Homepage: https://andreatchori.github.io/onboard.css/
- Issues: https://github.com/andreatchori/onboard.css/issues
- npm.io page: https://npm.io/package/onboard.css

## Recent versions

- 1.1.0 (latest) — 2020-01-20
- 1.0.0 — 2019-12-05

## README

🏝️🏖️💯 Introduce your customers to your app before they start using your app

`onboard.css` is a multistep onboarding screen, you can use it to introduce your customers to your app, or collect additional information from them before they start using your app.

## Installation

Install via npm:

```bash
$ npm install onboard.css
```

## Usage
onboard.css work with bootstrap and Slick carroussel so if you want to use onboard.css in your website , you have to put these following items in your `<head>` and before your `</body>`

```html
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
  <link rel="stylesheet" href="osfont-icon.css"> <!-- Osfont icon is used to display slick icons -->
  <link rel="stylesheet" href="onboard.min.css">
</head>
<body>
    Your content here

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
</body>
```

or use a Github hosted version

```html
<head>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/andreatchori/onboard.css/master/sources/onboard.min.css">
</head>
```


### Shape

| Class Name        |                    |                     |                      |
| ----------------- | ------------------ | ------------------- | -------------------- |
| `straight-line`   | `slice-left`       | `slice-right`       | `curve-left`         |
| `curve-right`     | `normal-curve`     |  `wave`             | `electric-wave`      |

### Title

| Class Name        |                    |                     |                      |
| ----------------- | ------------------ | ------------------- | -------------------- |
| `title-blue`      | `title-purple`     | `title-pink`        | `title-red`          |
| `title-indigo`    |`title-orange`      | `title-yellow`      | `title-green`        |
| `title-teal`      |`title-cyan`        | `title-gray-dark`   | `title-danger`       |
| `title-primary`   |`title-success`     | `title-info`        | `title-warning`      |
| `title-light`     |`title-dark`        | 

### Background

| Class Name        |                    |                     |                      |
| ----------------- | ------------------ | ------------------- | -------------------- |
| `background-blue` | `background-purple`| `background-pink`   | `background-red`     |
| `background-indigo`|`background-orange`| `background-yellow` | `background-green`   |
| `background-teal`|`background-cyan`    | `background-gray-dark` | `background-danger` |


Full example:

```html
    <div class="onboard-modal modal fade animated show-on-load">
        <div class="modal-dialog modal-centered">
            <div class="modal-content text-center">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span class="close-label">Skip Intro</span>
                    <span class="os-icon os-icon-close"></span>
                </button>
                <div class="onboard-slider-container">
                    <div class="onboard-slide">
                        <div class="onboard-media">
                            <img alt="" src="assets/img/your-images.png" width="120px">
                        </div>
                        <div class="content">
                            <h4 class="onboard-title">
                                Put your title here
                            </h4>
                            <div class="onboard-text">
                                Put your description here
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
```

### Launch modal on page load
Put this script before your `</body>`
```javascript
    $('.onboard-modal.show-on-load').modal('show');
        if ($('.onboard-modal .onboard-slider-container').length) {
            $('.onboard-modal .onboard-slider-container').slick({
                dots: true,
                infinite: false,
                adaptiveHeight: true,
                slidesToShow: 1,
                slidesToScroll: 1
            });
            $('.onboard-modal').on('shown.bs.modal', function (e) {
                $('.onboard-modal .onboard-slider-container').slick('setPosition');
            });
    }
```

## Contributing

Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase) and let us see a demo of submitted animations in a [pen](http://codepen.io). That **last one is important**.

---
_Source: https://npm.io/package/onboard.css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._