Multistep User Onboarding For Web App - onboard.css

The onboard.css project makes use of Slick plugin and Bootstrap 4 modal component to create customizable, mobile-friendly, multistep user onboarding for web applications.

It helps web developers create guided user flows and introduce functions and new features of your web applications as seen on native mobile apps.

How to use it:

1. Include the necessary JavaScript and CSS resources on the webpage.

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<!-- Slick stylesheet -->
<link rel="stylesheet" href="/path/to/slick.min.css" />
<!-- Required iconic font -->
<link rel="stylesheet" href="/path/to/osfont-icon.css" />
<!-- jQuery library -->
<script src="/path/to/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/path/to/bootstrap.min.js"></script>
<!-- Slick Plugin -->
<script src="/path/to/slick.min.js"></script>

2. Download and include the onboard.css on the webpage.

<link rel="stylesheet" href="/path/to/onboard.min.css" />

3. Create a basic user onboarding in the Bootstrap modal.

<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="screen 1.png" />
          </div>
          <div class="onboard-curve-left background-danger">
            <h4 class="onboard-title text-white">
              Screen 1
            </h4>
            <div class="onboard-text text-white">
              Screen 1 Content
            </div>
          </div>
        </div>
        <div class="onboard-slide">
          <div class="onboard-media">
            <img alt="" src="screen 2.png" />
          </div>
          <div class="onboard-slice-right bg-color">
            <h4 class="onboard-title">
              Screen 2
            </h4>
            <div class="onboard-text">
              Screen 2 Content
            </div>
          </div>
        </div>
        <div class="onboard-slide">
          <div class="onboard-media">
            <img alt="" src="screen 3.png" />
          </div>
          <div class="onboard-slice-right bg-color">
            <h4 class="onboard-title">
              Screen 3
            </h4>
            <div class="onboard-text">
              Screen 3 Content
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

4. The JavaScript to show the user onboarding on page load. Done.

$('.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');
  });
}

5. Customize the shape displayed in the onboarding screen using the following CSS classes.

• .straight-line
• .slice-left
• .slice-right
• .curve-left
• .curve-right

6. Customize the title color using the following CSS classes.

• .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

7. Customize the background color using the following CSS classes.

• .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

---

This awesome jQuery plugin is developed by andreatchori. For more Advanced Usages, please check the demo page or visit the official website.