Buy this item View Portfolio

Hi, Welcomeback!

JustDo Documentation,
Buy this item

Introduction

Mooli, a premium quality modern and clean Bootstrap 4x dashboard template using simplicity and minimal design. It is fully responsive built using SASS preprocessor, HTML5, CSS3 and jQuery plugins. It uses most of the helper/utilities classes which are reusable class that makes the page faster and increases the speed of page time load. It can be used for most type of dashboard and app templates like analytics, admin or messenger app for your desktpo or mobile applications. Amazing flexibility and reusability. See the demo.

This part of the doc will help you to quick start your project and will give you a basic idea about how this template work. For you to get start open the template download package.

What's Included

  • Mooli /
    • dist /
      • assets /
        • bundles /
        • css /
          • mooli.min.css
        • images /
        • vendor /
      • index.html
    • docs /
    • fonts /
    • js /
      • pages
      • widgets
      • common.js
      • index.js
    • scss /
      • base /
      • font /
      • metisMenu /
      • mixins /
      • pages /
      • partials /
      • _main.scss
    • Gruntfile.js
    • .gitignore
    • package.json
    • package-lock.json
    • README.md
File Reference
docs.html Online documentation
index.html Landing page
_variables.scss All variables
_core.scss Create scss variables color code
Gruntfile.js Compile scss to css and create js bundles

Node JS

Before installing gulp and sass first you must have NodeJs installed, NodeJS will have npm (node packaged modules).

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Online Reference: https://nodejs.org/en/

Installing in Mac

Simply download the Macintosh Installer direct from the nodejs.org web site.

Installing in Windows

Simply download the Windows Installer direct from the nodejs.org web site.

Grunt File & Installation The JavaScript Task Runner.

Installing Grunt: Run npm install grunt --save-dev command from your teminal to install grunt within your project.

Grunt Sass: Run grunt sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `assets/scss/filename.scss` and output a plain-css file to `/assets/css/filename.css`.

Grunt JSHint: Run grunt jshint command from your project directory. It will checks all *.js files under `assetsjs/filename` for common syntax or coding errors using the JSHint utility.

Grunt Sprite: Run grunt sprite command from your project directory.

Further help: To get more help on the grunt checkout Grunt

Note: However, any SASS code you write must be able compile via Grunt as well.It will generate pre-compiled javascript templates. Reads all the *.html files from `../js/filename` and outputs `../js/filename.templates.js`. Template.js will contains code of UI design and will be change each time you build solution through above command.

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

Main Content


<!doctype html>
<html lang="en">
    <head>
    <title>Mooli | Home</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <!-- VENDOR CSS -->
    <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.min.css">
    
    <!-- MAIN CSS -->
    <link rel="stylesheet" href="assets/css/mooli.min.css">
    
    </head>
    <body>

        <div class="theme-cyan">
    
            <!-- Page Loader -->
            <div class="page-loader-wrapper"></div>
            
            <!-- Theme Setting -->
            <div class="themesetting"></div>
            
            <!-- Overlay For Sidebars -->
            <div class="overlay"></div>
            
            <div id="wrapper">
            
                <!-- Page top navbar -->
                <nav class="navbar navbar-fixed-top"></nav>
            
                <!-- Main left sidebar menu -->
                <div id="left-sidebar" class="sidebar"></div>
                
                <!-- Right bar chat  -->
                <div id="rightbar" class="rightbar"></div>
            
                <!-- Stiky note div  -->
                <div class="sticky-note"></div>
            
                <!-- Main body part  -->
                <div id="main-content">
                    <div class="container-fluid">
                        <!-- Page header section  -->
                        <div class="block-header"></div>
                        <div class="row clearfix"></div>
                    </div>
                </div>
                
            </div>
        </div>
        
        
        <!-- Javascript -->
        <script src="assets/bundles/libscripts.bundle.js"></script>    
        <script src="assets/bundles/vendorscripts.bundle.js"></script>
        
        <!-- Project core js file minify with grunt --> 
        <script src="assets/bundles/mainscripts.bundle.js"></script>
        <script src="../js/index.js"></script>
    </body>
</html>

SCSS Structure

Please note that all Detail main Web Site, you need to set it up on your project Click Here..

main.css is the main CSS file located in assets/css/ folder of the package. Whole CSS file is well indexed with topic and its related code.


<!-- START CONTENT -->
body {
    @include transition(all .3s ease-in-out);
    background-color: $body-color;
    font-weight: $font-weight-400;
    font-family: $font-family;
    font-size: $font-size;
    color: $font-color;    
}
a {
    &:hover,
    &:focus {
        color: $link-color-hover;
        text-decoration: none;
    }
}
<!-- END CONTENT -->

Java Script

Mooli common.js is the mail javascript file having all the js code. File is located in ../js/ folder. This file code is also well formatted and section in different respective function names.

Along with this chart library based js code and dashboard based js code are added in separate files for ease of use of user.

<!-- START CONTENT -->
function initSparkline() {
    $(".sparkline").each(function() {
        var $this = $(this);
        $this.sparkline('html', $this.data());
    });

    // Bar charts using inline values
    $('.sparkbar').sparkline('html', { type: 'bar' });	
}
<!-- END CONTENT -->

Main Features

  • Bootstrap 4x
  • Latest jQuery v3.5.1
  • Built in SASS
  • Light & Dark Version
  • RTL Full support
  • Fully Responsive
  • Ready to used widget
  • Detailed Documentation
  • Invoice
  • User Profile
  • Image Gallery
  • Timeline
  • Summernote
  • Markdown
  • Many Charts Options
  • Form Examples
  • Form Validation
  • Advanced Form Elements
  • Form Wizard
  • Drag & Drop Upload
  • Social
  • Input Slider
  • Date Picker
  • Drag & Drop Upload
  • Image Cropping
  • Sortable & Nestable
  • CKEditor

Customer Support

You can request for support via email or themeforest item comments.

We will assist you any problem you encounter while buidling your dashboard via this template

We use request help form in comments and email to manage customer support. Soon, as we grow, we will invest and find the best customer support system we can use to serve you better. For the meantime, submit a help request to the link given for any issues and concerns that you have. Don't worry, we will respond to you as quickly as we can. Thank you.

© 2020. Mooli Documentation v1.0.0. All Rights Reserved. Created by: PuffinTheme