Navigation

Stisla Documentation

All you need is here, the basic structure of the layout, the components, about the API component and so on.

Overview

First, thank you for using Stisla. Stisla is a responsive HTML5 admin template based on Bootstrap 4. Using this template you can easily create the layout you want.

You can use this template in PHP Native, Laravel Framework, CodeIgniter or the other depending on the skills that you can acquire.

If you use this template for free then you can create a product using this template and sell it to the marketplace (such as CodeCanyon).

This page is documentation for Stisla. On this page, you'll learn how to create a layout, use components, and JavaScript APIs.

License

We use MIT License for free version.

You are free to use it personally and commercially or you can also create a product using this template and sell it to a marketplace (such as CodeCanyon).

We use our own license for pro version.

The following is the provision for the pro version. If you buy Stilsa on other marketplaces, such as Themeforest, BootstrapBay, GrayGrids, ThemeQuarry or other, please refer to their license page to read about template license.

Description Freelancer Author
Create single website/app for personal
Yes
Yes
Create single website/app for client
Yes
Yes
Create website/app multiple times
No
Yes
Create website/app for sale
No
Yes
Create CMS with this template for sale
No
Yes
Create online/offline generators based on our products
No
No
Resale/Redistribute
No
No

Starter

Before we get into this template, it will be good if we know something basic in this template, such as folder structure, technologies used and so on.

Folder Structure

First of all, we will recognize the folder structure of this template. It's easy to understand, like any other template you have ever encountered.

+---dist
|   +---css
|   +---fonts
|   +---img
|   +---js
|   \---modules
+---documentation
|   +---css
|   \---js
+---pages
+---sources
|   +---ai
|   \---scss
|       +---components
|       +---override
|       \---theme

Let's get to know the description of each folder.

Folder Name Description
dist/ All distribution files are placed here, such as CSS, Images, third-party libraries, fonts and JavaScript.
dist/css/ All CSS files are placed here, namely style.css and custom.css. DO NOT TOUCH the style.css file, if you want to change the existing CSS rules, please use the custom.css file.
dist/fonts/ All font files are here, the font used by this template.
dist/img/ You can find all the images used by this template in this folder. Also, we have created several sample images.
dist/js/ All JS files are placed here, namely stisla.js, scripts.js and custom.js. Some HTML pages have 1 JavaScript file for functionality. We make it an external file to make it easier and for good practice.
dist/modules/ All third-party libraries, if you find a bug in one library, please report it to the developer of each library. Also, put the library that you want to add in this folder.
documentation/ Forget anything in this folder, only contains documentation.
pages/ This folder only contains pages in the template.
dist/sources/ All development files are placed here, such as SCSS and Adobe Illustrator.
dist/sources/ai/ All files regarding Adobe Illustrator.
dist/sources/scss/ All files regarding SASS.
dist/sources/scss/components/ All component CSS rules are here.
dist/sources/scss/override/ We overwritten some CSS Bootstrap rules and placed them in this file.
dist/sources/scss/theme/ All CSS rules in this template.

Technology

We use HTML5, CSS3 and JavaScript. We also use SASS with SCSS syntax.

To start customizing SCSS files, you need to have SCSS capabilities. Go to this page for details.

Development

Now we will learn how to use this template. Starting from understanding the layout, using components and using JavaScript function.

Layout

Stisla has 3 types of layout. The layout has a sidebar, a layout with a transparent sidebar and a layout with top navigation.

The following is the structure for creating a layout without a sidebar and header. Usually used for authentication pages.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <title>Your Title — Stisla</title>

  <!-- General CSS Files -->
  <link rel="stylesheet" href="../dist/modules/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/modules/fontawesome/css/all.min.css">

  <!-- Plugins -->
  <link rel="stylesheet" href="../dist/modules/bootstrap-social/bootstrap-social.css">

  <!-- Template CSS -->
  <link rel="stylesheet" href="../dist/css/style.css">
</head>

<body>
  <div id="app">
    <section class="section">

    </section>
  </div>

  <!-- General JS Scripts -->
  <script src="../dist/modules/jquery.min.js"></script>
  <script src="../dist/modules/popper.js"></script>
  <script src="../dist/modules/tooltip.js"></script>
  <script src="../dist/modules/bootstrap/js/bootstrap.min.js"></script>
  <script src="../dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
  <script src="../dist/modules/moment.min.js"></script>
  <script src="../dist/js/stisla.js"></script>
  
  <!-- Plugins -->

  <!-- Page Specific JS File -->
  
  <!-- Template JS File -->
  <script src="../dist/js/scripts.js"></script>
  <script src="../dist/js/custom.js"></script>
</body>
</html>

And here is the default layout with header and sidebar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <title>Layout › Default — Stisla</title>

  <!-- General CSS Files -->
  <link rel="stylesheet" href="../dist/modules/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/modules/fontawesome/css/all.min.css">

  <!-- Plugins -->

  <!-- Template CSS -->
  <link rel="stylesheet" href="../dist/css/style.css">
</head>

<body>
  <div id="app">
    <div class="main-wrapper">
      <div class="navbar-bg"></div>
      <nav class="navbar navbar-expand-lg main-navbar">
        <form class="form-inline mr-auto">
          <ul class="navbar-nav mr-3">
            <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
            <li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
          </ul>
          <div class="search-element">
            <input class="form-control" type="search" placeholder="Search" aria-label="Search">
            <button class="btn" type="submit"><i class="fas fa-search"></i></button>
          </div>
        </form>
        <ul class="navbar-nav navbar-right">
          <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
            <div class="dropdown-menu dropdown-list dropdown-menu-right">
              <div class="dropdown-header">Notifications
                <div class="float-right">
                  <a href="#">Mark All As Read</a>
                </div>
              </div>
              <div class="dropdown-list-content">
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <img alt="image" src="../dist/img/avatar/avatar-1.png" class="rounded-circle dropdown-item-img">
                  <div class="dropdown-item-desc">
                    <b>Kusnaedi</b> has moved task <b>Fix bug header</b> to <b>Done</b>
                    <div class="time">10 Hours Ago</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <img alt="image" src="../dist/img/avatar/avatar-2.png" class="rounded-circle dropdown-item-img">
                  <div class="dropdown-item-desc">
                    <b>Ujang Maman</b> has moved task <b>Fix bug footer</b> to <b>Progress</b>
                    <div class="time">12 Hours Ago</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <img alt="image" src="../dist/img/avatar/avatar-3.png" class="rounded-circle dropdown-item-img">
                  <div class="dropdown-item-desc">
                    <b>Agung Ardiansyah</b> has moved task <b>Fix bug sidebar</b> to <b>Done</b>
                    <div class="time">12 Hours Ago</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <img alt="image" src="../dist/img/avatar/avatar-4.png" class="rounded-circle dropdown-item-img">
                  <div class="dropdown-item-desc">
                    <b>Ardian Rahardiansyah</b> has moved task <b>Fix bug navbar</b> to <b>Done</b>
                    <div class="time">16 Hours Ago</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <img alt="image" src="../dist/img/avatar/avatar-5.png" class="rounded-circle dropdown-item-img">
                  <div class="dropdown-item-desc">
                    <b>Alfa Zulkarnain</b> has moved task <b>Add logo</b> to <b>Done</b>
                    <div class="time">Yesterday</div>
                  </div>
                </a>
              </div>
              <div class="dropdown-footer text-center">
                <a href="#">View All <i class="fas fa-chevron-right"></i></a>
              </div>
            </div>
          </li>
          <li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
            <img alt="image" src="../dist/img/avatar/avatar-1.png" width="30" class="rounded-circle mr-1">
            <div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div></a>
            <div class="dropdown-menu dropdown-menu-right">
              <div class="dropdown-title">Logged in 5 min ago</div>
              <a href="features-profile.html" class="dropdown-item has-icon">
                <i class="far fa-user"></i> Profile
              </a>
              <a href="features-activities.html" class="dropdown-item has-icon">
                <i class="fas fa-bolt"></i> Activities
              </a>
              <a href="features-settings.html" class="dropdown-item has-icon">
                <i class="fas fa-cog"></i> Settings
              </a>
              <div class="dropdown-divider"></div>
              <a href="#" class="dropdown-item has-icon text-danger">
                <i class="fas fa-sign-out-alt"></i> Logout
              </a>
            </div>
          </li>
        </ul>
      </nav>
      <div class="main-sidebar">
        <aside id="sidebar-wrapper">
          <div class="sidebar-brand">
            <a href="dashboard-index.html">Stisla</a>
          </div>
          <div class="sidebar-brand sidebar-brand-sm">
            <a href="dashboard-index.html">St</a>
          </div>
          <ul class="sidebar-menu">
            <li class="menu-header">Dashboard</li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="dashboard-general.html">General Dashboard</a></li>
                <li><a class="nav-link" href="dashboard-ecommerce.html">Ecommerce Dashboard</a></li>
              </ul>
            </li>
            <li class="menu-header">Starter</li>
            <li class="dropdown active">
              <a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>Layout</span></a>
              <ul class="dropdown-menu">
                <li class=active><a class="nav-link" href="layout-default.html">Default Layout</a></li>
                <li><a class="nav-link" href="layout-transparent.html">Transparent Sidebar</a></li>
                <li><a class="nav-link" href="layout-top-navigation.html">Top Navigation</a></li>
              </ul>
            </li>
            <li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>Blank Page</span></a></li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>Bootstrap</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="bootstrap-alert.html">Alert</a></li>
                <li><a class="nav-link" href="bootstrap-badge.html">Badge</a></li>
                <li><a class="nav-link" href="bootstrap-breadcrumb.html">Breadcrumb</a></li>
                <li><a class="nav-link" href="bootstrap-buttons.html">Buttons</a></li>
                <li><a class="nav-link" href="bootstrap-card.html">Card</a></li>
                <li><a class="nav-link" href="bootstrap-carousel.html">Carousel</a></li>
                <li><a class="nav-link" href="bootstrap-collapse.html">Collapse</a></li>
                <li><a class="nav-link" href="bootstrap-dropdown.html">Dropdown</a></li>
                <li><a class="nav-link" href="bootstrap-form.html">Form</a></li>
                <li><a class="nav-link" href="bootstrap-list-group.html">List Group</a></li>
                <li><a class="nav-link" href="bootstrap-media-object.html">Media Object</a></li>
                <li><a class="nav-link" href="bootstrap-modal.html">Modal</a></li>
                <li><a class="nav-link" href="bootstrap-nav.html">Nav</a></li>
                <li><a class="nav-link" href="bootstrap-navbar.html">Navbar</a></li>
                <li><a class="nav-link" href="bootstrap-pagination.html">Pagination</a></li>
                <li><a class="nav-link" href="bootstrap-popover.html">Popover</a></li>
                <li><a class="nav-link" href="bootstrap-progress.html">Progress</a></li>
                <li><a class="nav-link" href="bootstrap-table.html">Table</a></li>
                <li><a class="nav-link" href="bootstrap-tooltip.html">Tooltip</a></li>
                <li><a class="nav-link" href="bootstrap-typography.html">Typography</a></li>
              </ul>
            </li>
            <li class="menu-header">Stisla</li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>Components</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="components-article.html">Article</a></li>
                <li><a class="nav-link" href="components-chat-box.html">Chat Box</a></li>
                <li><a class="nav-link" href="components-gallery.html">Gallery</a></li>
                <li><a class="nav-link" href="components-multiple-upload.html">Multiple Upload</a></li>
                <li><a class="nav-link" href="components-statistic.html">Statistic</a></li>
                <li><a class="nav-link" href="components-tab.html">Tab</a></li>
                <li><a class="nav-link" href="components-table.html">Table</a></li>
                <li><a class="nav-link" href="components-user.html">User</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>Forms</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="forms-advanced-form.html">Advanced Form</a></li>
                <li><a class="nav-link" href="forms-editor.html">Editor</a></li>
                <li><a class="nav-link" href="forms-validation.html">Validation</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-map-marker-alt"></i> <span>Google Maps</span></a>
              <ul class="dropdown-menu">
                <li><a href="gmaps-advanced-route.html">Advanced Route</a></li>
                <li><a href="gmaps-draggable-marker.html">Draggable Marker</a></li>
                <li><a href="gmaps-geocoding.html">Geocoding</a></li>
                <li><a href="gmaps-geolocation.html">Geolocation</a></li>
                <li><a href="gmaps-marker.html">Marker</a></li>
                <li><a href="gmaps-multiple-marker.html">Multiple Marker</a></li>
                <li><a href="gmaps-route.html">Route</a></li>
                <li><a href="gmaps-simple.html">Simple</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>Modules</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="modules-calendar.html">Calendar</a></li>
                <li><a class="nav-link" href="modules-chartjs.html">ChartJS</a></li>
                <li><a class="nav-link" href="modules-datatables.html">DataTables</a></li>
                <li><a class="nav-link" href="modules-flag.html">Flag</a></li>
                <li><a class="nav-link" href="modules-font-awesome.html">Font Awesome</a></li>
                <li><a class="nav-link" href="modules-ion-icons.html">Ion Icons</a></li>
                <li><a class="nav-link" href="modules-owl-carousel.html">Owl Carousel</a></li>
                <li><a class="nav-link" href="modules-sparkline.html">Sparkline</a></li>
                <li><a class="nav-link" href="modules-sweet-alert.html">Sweet Alert</a></li>
                <li><a class="nav-link" href="modules-toastr.html">Toastr</a></li>
                <li><a class="nav-link" href="modules-vector-map.html">Vector Map</a></li>
                <li><a class="nav-link" href="modules-weather-icon.html">Weather Icon</a></li>
              </ul>
            </li>
            <li class="menu-header">Pages</li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>Auth</span></a>
              <ul class="dropdown-menu">
                <li><a href="auth-forgot-password.html">Forgot Password</a></li> 
                <li><a href="auth-login.html">Login</a></li> 
                <li><a href="auth-register.html">Register</a></li> 
                <li><a href="auth-reset-password.html">Reset Password</a></li> 
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>Errors</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="errors-503.html">503</a></li> 
                <li><a class="nav-link" href="errors-403.html">403</a></li> 
                <li><a class="nav-link" href="errors-404.html">404</a></li> 
                <li><a class="nav-link" href="errors-500.html">500</a></li> 
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-bicycle"></i> <span>Features</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="features-activities.html">Activities</a></li>
                <li><a class="nav-link" href="features-post-create.html">Post Create</a></li>
                <li><a class="nav-link" href="features-posts.html">Posts</a></li>
                <li><a class="nav-link" href="features-profile.html">Profile</a></li>
                <li><a class="nav-link" href="features-settings.html">Settings</a></li>
                <li><a class="nav-link" href="features-setting-detail.html">Setting Detail</a></li>
                <li><a class="nav-link" href="features-tickets.html">Tickets</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-ellipsis-h"></i> <span>Utilities</span></a>
              <ul class="dropdown-menu">
                <li><a href="utilities-contact.html">Contact</a></li>
                <li><a class="nav-link" href="utilities-invoice.html">Invoice</a></li>
                <li><a href="utilities-subscribe.html">Subscribe</a></li>
              </ul>
            </li>
            <li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>Credits</span></a></li>
          </ul>
          <div class="p-3 mt-4 mb-4 hide-sidebar-mini">
            <a href="documentation.html" class="btn btn-primary btn-lg btn-icon-split btn-block">
              <i class="far fa-question-circle"></i> <div>Documentation</div>
            </a>
          </div>
        </aside>
      </div>

      <!-- Main Content -->
      <div class="main-content">
        <section class="section">
          <div class="section-header">
            <h1>Default Layout</h1>
            <div class="section-header-breadcrumb">
              <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
              <div class="breadcrumb-item"><a href="#">Layout</a></div>
              <div class="breadcrumb-item">Default Layout</div>
            </div>
          </div>

          <div class="section-body">
            <h2 class="section-title">This is Example Page</h2>
            <p class="section-lead">This page is just an example for you to create your own page.</p>
            <div class="card">
              <div class="card-header">
                <h4>Example Card</h4>
              </div>
              <div class="card-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
              <div class="card-footer bg-whitesmoke">
                This is card footer
              </div>
            </div>
          </div>
        </section>
      </div>
      <footer class="main-footer">
        <div class="footer-left">
          Copyright © 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
        </div>
        <div class="footer-right">
          v2.0.0
        </div>
      </footer>
    </div>
  </div>

  <!-- General JS Scripts -->
  <script src="../dist/modules/jquery.min.js"></script>
  <script src="../dist/modules/popper.js"></script>
  <script src="../dist/modules/tooltip.js"></script>
  <script src="../dist/modules/bootstrap/js/bootstrap.min.js"></script>
  <script src="../dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
  <script src="../dist/modules/moment.min.js"></script>
  <script src="../dist/js/stisla.js"></script>
  
  <!-- Plugins -->

  <!-- Page Specific JS File -->
  
  <!-- Template JS File -->
  <script src="../dist/js/scripts.js"></script>
  <script src="../dist/js/custom.js"></script>
</body>
</html>

The important things you need to remember are:

  • .main-wrapper - wrap all elements
  • .navbar - for your navbar
  • .main-sidebar - wrap sidebar content
  • .main-content - wrap the entrie content

For the other 2 layouts, you can get the following structure:

Content

For content we use the following structure.

<section class="section">
  <div class="section-header">
    <h1>Page</h1>
    <!-- Breadcrumb -->
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
      <div class="breadcrumb-item"><a href="#">Parent Page</a></div>
      <div class="breadcrumb-item">Page</div>
    </div>
  </div>

  <div class="section-body">
    <h2 class="section-title">Page</h2>
    <p class="section-lead">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </p>
    <!-- Your content goes here -->
  </div>
</section>

Card

This template is Bootstrap 4 based, so we use the card to make the grouping in the layout.

We also changed a little style on this Bootstrap built-in card. To create a card use the following structure.

<!-- card wrapper -->
<div class="card">
  <!-- card header -->
  <div class="card-header">
    <!-- card title -->
    <h4>Card title</h4>
  </div>
  <!-- card body -->
  <div class="card-body">
    Card content
  </div>
  <!-- card footer -->
  <div class="card-footer">
    Card footer
  </div>
</div>

You can also customize the border-top color of the card by adding additional classes as follows.

<div class="card card-primary">
  ...
  ..
</div>

Here are the colors supported on the card.

.card-primary
.card-secondary
.card-success
.card-danger
.card-warning
.card-info
.card-dark

In addition, you can also create a collapsable card.

<div class="card">
  <div class="card-header">
    <h4>Show/Hide</h4>
    <!-- card toggle -->
    <div class="card-header-action">
      <a data-collapse="#mycard-collapse" class="btn btn-icon"><i class="ion ion-minus"></i></a>
    </div>
  </div>
  <!-- card collapsable content -->
  <div class="collapse show" id="mycard-collapse">
    <div class="card-body">
      You can show or hide this card.
    </div>
    <div class="card-footer">
      Card Footer
    </div>
  </div>
</div>

Lastly, you can also create a dismissible card.

<div class="card" id="mycard-dimiss">
  <div class="card-header">
    <h4>Dismiss</h4>
    <!-- card dismiss toggle -->
    <div class="card-header-action">
      <a data-dismiss="#mycard-dimiss" class="btn btn-icon"><i class="ion ion-close"></i></a>
    </div>
  </div>
  <div class="card-body">
    You can dimiss this card.
  </div>
  <div class="card-footer">
    Card Footer
  </div>
</div>
More Information

You can see other examples of card usage in the file pages/bootstrap-card.html

JavaScript

Previously, we didn't discuss much about the component, just explained the key and important things you need to know about this template. Because of the rest you can see the code for each component on each component file.

In this section we will discuss about the JavaScript APIs available in this template. We create some JavaScript functions that will certainly allow you to interact with components.

JavaScript: Card

In the card component we have created a simple API to change the card mode into progress.

Of course, this will make it easier for you when you want to create a form with AJAX and when the form is submitted then the card will display loading on the card.

<div class="card" id="mycard-form">
  <div class="card-header">
    <h4>Card title</h4>
  </div>
  <div class="card-body">
    <button class="btn btn-primary" onclick="$.cardProgress('#mycard-form')">Progress</button>
  </div>
  <div class="card-footer">
    Card Footer
  </div>
</div>

Card title

And use $.cardProgressDismiss(selector, callback); to remove progress on card.

Usage
Syntax
$.cardProgress(selector, options)
Options
Options Type Default Description
dismiss
Boolean
false
Displaying the dismiss button
dismissText
String
Cancel
Text form dismiss button
onDismiss(card)
Function
null
Callback when the dismiss button is clicked

JavaScript: Modal

As we know, to create a modal in Bootstrap requires the HTML structure to be a modal. It might be easy if we just make some modals. But, if we want to make a lot of modals would require a lot of HTML structure as well.

In this template we have provided a simple plugin to create a reusable modal. So you no longer need the HTML structure for every time you want to create a modal.

Here is a simple modal example.

<button class="btn btn-primary" id="toggle-modal">Launch Modal</button>
<script>
  $('#toggle-modal').fireModal({
    title: 'My Modal',
    content: 'Hello!'
  });
</script>

Also, you can add buttons on modal.

<button class="btn btn-primary" id="toggle-modal-1">Launch Modal</button>
<script>
  $('#toggle-modal-1').fireModal({
    title: 'My Modal',
    body: 'Hello, dude!',
    buttons: [
      {
        text: 'Close',
        class: 'btn btn-secondary',
        handler: function(current_modal) {
        $.destroyModal(current_modal);
        }
      }
    ]
  });
</script>

In addition, you can also create a simple confirmation box by using this attribute on your button.

<button class="btn btn-danger" data-confirm="Are you sure?|This action can't be undone">Delete</button>

To close the current modal, you can use the function $.destroyModal(modal);.

Usage
Syntax
$('#toggle').fireModal(options);
Options
Name Type Default Description
size string modal-md Bootstrap modal size class
center boolean true Position the modal in the center of the screen
animation boolean true Provides animated effects on modal
title string Modal Title Title for your modal
closeButton boolean true Close button for modal
header boolean true Modal header
bodyClass string null Classes for modal body, for example my-modal body-class
footerClass string null Classes for modal footer, for example my-modal footer-class
body string null Content for your modal, can be string or selector, for example: #modal-login-part and add the modal-part class to the element.
buttons object [] Add some buttons to the modal footer, for example:
[{
submit: true | false,
class: 'custom-class',
id: 'my-id',
text: 'Submit',
handler: () => {
alert('Clicked');
}
}]
autoFocus boolean true Automatic focus on the first input element in the modal body (if any)
created function null Callback when a modal element has been created
appended function null Callback when a modal element has been appended to the document body
submit function null Callback when the form in the modal body is submitted
modal object {} Bootstrap modal options, click here for details

JavaScript: Chat

In this template we provide chat box components and also we have created a simple API for you to interact with the components of the chat box.

Create a chat box component with a structure like the following.

<div class="card chat-box" id="mychatbox">
  <div class="card-header">
    <h4>Chat with Dad</h4>
  </div>
  <div class="card-body chat-content">
  </div>
  <div class="card-footer chat-form">
    <form>
      <input type="text" class="form-control" placeholder="Type a message">
      <button class="btn btn-primary">
        <i class="far fa-paper-plane"></i>
      </button>
    </form>
  </div>
</div>

Chat with Dad

To add a new chat to the chat box above then use the following code.

$.chatCtrl('#mychatbox', {
  text: 'Halo',
  picture: '../dist/img/avatar/avatar-1.png'
});

And To make it on the left then use the position: 'chat-left' key.

$.chatCtrl('#mychatbox', {
  position: 'chat-left',
  text: 'Halo',
  picture: '../dist/img/avatar/avatar-1.png'
});

Here is an example of a chat box that will display when the form is submitted.

$("#chat-form").submit(function() {
  var me = $(this),
      this_text = me.find('input').val(),
      this_picture = '../dist/img/avatar/avatar-1.png';

  $.chatCtrl({
    text: this_text,
    picture: this_picture
  });
  return false;
});

Chat with Dad

Usage
Syntax
$.chatCtrl(selector, object);
Options
Options Type Default Description
position
String
chat-right
Class for chat position
text
String
null
Chat content
time
String
now
Chat time
picture
String
null
Chat user picture
type
String
text
Chat type, set to 'typing' to give 'typing' mode
timeout
Number
0
Delay displaying chat
onShow
Function
null
Callback when chat are displayed
Important

This component requires other libraries such as 'NiceScroll' and 'Moment.js'. So, do not forget to include those libraries.

JavaScript: Follow Button

Next is the JavaScript for follow button. We've created a simple function to make the 'follow button' running.

Here is an example of a follow button.

<a href="#" class="btn btn-primary mt-3 follow-btn" data-follow-action="alert('follow clicked');" data-unfollow-action="alert('unfollow clicked');">Follow</a>

Or like this.

<a href="#" class="btn btn-primary mt-3 follow-btn" data-follow-action="alert('follow clicked');" data-unfollow-action="alert('unfollow clicked');">Follow</a>

JavaScript: Custom Tab

In addition to Bootstrap's own tabs, we also create simple functions for creating tabs.

We create this function so you can create tabs on every element you want. Here is a sample code to create a custom tab.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-tab="mygroup-tab" href="#tab-home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-tab="mygroup-tab" href="#tab-profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-tab="mygroup-tab" href="#tab-contact">Contact</a>
  </li>
</ul>
<div id="tab-home" class="active" data-tab-group="mygroup-tab">
  Home
</div>
<div id="tab-profile" data-tab-group="mygroup-tab">
  Profile
</div>
<div id="tab-contact" data-tab-group="mygroup-tab">
  Contact
</div>
Home
Profile
Contact

JavaScript: Utilities

Finally, you can also use the following JavaScript functions.

Sidebar Toggler

To create a sidebar toggle use the attribute data-toggle="sidebar" on your button.

<a href="#" data-toggle="sidebar">Toggle Sidebar</a>
Search Toggler

To create a search toggle use the attribute data-toggle="search" on your button. This function only applies to mobile view.

<a href="#" data-toggle="search">Toggle Search</a>
Tooltip

Here is an example of using tooltip.

<a href="#" data-toggle="tooltip" title="Hello">Tooltip</a>
Popover

Here is an example of using a popover.

<a href="#" data-toggle="popover" title="Hello">Popover</a>
Selectric

Here is an example of using selectric. Use the selectric class on your select element.

<select class="form-control selectric">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
</select>
Select2

Here is an example of using select2. Use the class select2 on your select element.

<select class="form-control select2">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
</select>
Summernote

The following is an example of summernote usage. Use the summernote or summernote-simple class on your textarea element.

<textarea class="form-control summernote"></textarea>
Code Editor / CodeMirror

Here is an example of using a code editor. Use the class codeeditor on your textarea element.

<textarea class="form-control codeeditor"></textarea>
Other

For how to use other libraries, you can read the official documentation from the library because that's better.

Wait... wait... wait...

For others, you can explore the component pages in the template, and you can get the code structure of the component.

Also, you can make component requests or new features and we will consider them.

If you need help, please send an email to nauvalazhar2@gmail.com with the subject "Stisla Support - Your Subject".