#### starlight

###### Introduction

###### Stylesheet

###### HTML Structure

###### Javascript

###### Other Information

# Starlight Documentation v2.0

Thank you so much for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us at themepixels@gmail.com or submit a comment here. Thanks so much!

## Introduction

Starlight, a Bootstrap 4 dashboard template using flat 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.

## Getting Started

This part of the doc will help you to quick start your project and will give you a basic idea about how starlight work. For you to get start open the "themes" folder in templates/ of your download package.

## What's In The Box

Once you have download the package you will see the following folder structure inside templates/ folder.

Folder | Description
--- | ---
app/ | The html files for ui elements and pages like charts, mailbox, etc.
css/ | The css files used in this template. You can use minified version for production.
img/ | The images used in demo and preview pages.
js/ | main js files used in template demo and other pages.
lib/ | This is where all the third parts assets and plugins used in the theme.
scss/ | All the style code in sass format used in this template.

## The Tool

Once you have download the package you will see files that you might not familiar along with the folders listed above.

Filename | Description
--- | ---
.gitignore | A file that specifies intentionally untracked files that Git should ignore.
bower.json | A manifest file that define packages.
Gruntfile.js | A code used to configure or define tasks and load Grunt plugins.
index.html | The index page that redirect user to app/index.html. Use for in a live preview of this template.
package.json | Grunt will use this file to install dependencies and plugins of grunt.

Note: If you are still unsure of what's the use of this files, you may want to proceed to the next topic:

- NodeJS
- Bower
- Grunt

# NodeJS

Before installing bower and grunt 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.

If you want to download the package with bash:

    curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

Using Homebrew:

    brew install node

## Installing in Windows

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

# Bower

Before installing bower first you must have NodeJs installed, NodeJS will have npm (node packaged modules). Once you finished installing nodejs you can now install bower through npm command.

Keeping track of all these packages and making sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue!

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.

Online Reference: https://bower.io/

## Installing Bower

Bower is a command line utility. Install it with npm.

    $ npm install -g bower

Verify that bower in successfully installed, and version of installed bower will appear.

    $ bower --version

# Grunt JS

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

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

Online Reference: https://gruntjs.com/

## Installing the CLI

In order to get started, you'll want to install Grunt's command line interface (CLI) globally. You may need to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to do this.

    $ npm install -g grunt-cli

Verify that grunt is successfully installed, and version of installed bower will appear.

    $ grunt --version

# SASS

Before running grunt first you must check if you have sass installed in your machine. You can verify that sass is already installed by running the command.

    $ sass --version

If version appear, it means sass already installed in your machine and proceed to the next topic, otherwise follow the instructions below on installing sass.

## Installing SASS

#### Windows

Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. It's a single-click installer that will get everything set up for you super fast.

#### Mac

If you prefer the command line over an application then getting Sass set up is a fairly quick process. Sass has a Ruby dependency but if you're using a Mac, congratulations, Ruby comes pre-installed.

#### Install SASS

Ruby uses Gems to manage its various packages of code like Sass. In your open terminal or cmd window:

    $ gem install sass

You should now have Sass installed, but it never hurts to double-check.

    $ sass --version

Online Reference: http://sass-lang.com/install

# Running Starlight

You're moments away to see the starlight dashboard template up and running in your local machine. First, go to the root folder where the bower.json and package.json located. In your download package it should be in the template/ folder. Please run the following command below.

    $ bower install

This will download all dependencies defined in bower.json file. Once it finished running the command, it will generate a folder name bower_components/ where you see downloaded files.Next, run another command below

    $ npm install

This will download all tools defined in package.json file. Once it finished running the command, it will generate a folder name node_modules/ where you see downloaded tools.Next, run another command below.

    $ grunt build

This will compile sass file into css with minified version of it into the css/ folder. On the other hand, it will generate a lib/ folder to extract all needed third party plugins and other resources like fonts to be use in the template.

#### Running in Browser

Now you're good to go in running the template and preview it in browser by running the command below.

    $ grunt

The template is now up and running in your browser. Feel free to visit each page and familiarize the flow of it.

# Stylesheet

We use SASS in creating styles in this template logically grouping into sections. Below are the structure of sass files and folders

Folder/File | Description
--- | ---
bootstrap/ | Contains override styles from Bootstrap core framework for custom design and enhancement
lib/ | Contains a custom styles from plugins that override the current design for improvements
util/ | Contain a helper and very reusable classes.
app.scss | a core style for the starlight template.
starlight.scss | Imports all scss file into one file for compiling into css

# Bootstrap

All of the files organized into a name of element are override styles of Bootstrap core framework styles. It is overriden for performance and design quality improvement purposes.

To learn more about Bootstrap, visit their site at https://getbootstrap.com/

# Plugins

All files organized into a name of plugin are override styles from some of the plugins used in this template and can be found in lib/ folder. It is also overriden for performance and design quality improvement purposes.

# Utilities

Utilities classes are very reusable classes with a single purpose to reduce the frequency of highly repetitive declarations.

Note: Below are some of the classes that we think are more reusable. If you did not find any classes on the list be sure to check the scss files under scss/utilities/ folder if there are any existing classes you need before you can create a new style.

#### Background Color

Class | Value
--- | ---
.bg-transparent | Sets a transparent background to an element with already have a background color.
.bg-gray-[value] | 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100
.bg-[value] | primary | success | warning | danger | info | indigo | purple | teal | pink | orange
.bg-white-[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
.bg-black-[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
.bg-[value] | mantle | reef | transfile | neon | delicate | emerald | mojito | dance | teal-love | crystal-clear | grandeur | flickr | royal | firewatch

#### Borders

Class | Value / Description
--- | ---
.bd | Add border in all sides of an element with default color gray and default width of 1px.
.bd-t | Add border to top side of element.
.bd-r | Add border to right side of element.
.bd-b | Add border to bottom side of element.
.bd-l | Add border to left side of element.
.bd-x | Add border to left and right side of element.
.bd-y | Add border to top and bottom side of element.
.bd | Set 1px (default) border to element.
.bd-2 | Set 2px border to element.
.bd-3 | Set 3px border to element.
.bd-4 | Set 4px border to element.
.bd-5 | Set 5px border to element.
.bd-t-0 | Remove top border of an element
.bd-r-0 | Remove right border of an element
.bd-b-0 | Remove bottom border of an element
.bd-l-0 | Remove left border of an element
.bd-x-0 | Remove left and right border of an element
.bd-y-0 | Remove top and bottom border of an element
.bd-[t||r|bl|x|y]-0-force | Force remove border of any side of an element.
.bd-[value] | primary | success | warning | danger | info | indigo | purple | pink | teal | orange
.bd-gray-[value] | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
.rounded | Set a border radius of 3px (default) to an element.
.rounded-[value] | 5 | 10 | 20 | 30 | 40 | 50 | circle
.rounded-[value] | top | right | bottom | left

#### Height

Class | Value
--- | ---
.ht-[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
.ht-[value] | 15 | 20 | 25 | 30 | ... | 100 (step of 5)
.ht-[value] | 150 | 200 | 250 | 300 | ... | 850 (step of 50)
.ht-[value]p | 10 | 20 | 30 | 40 | ... | 100 (step of 10)
.ht-[size]-[value] | size: xs | sm | md | lg | xl value: the height value (refer to code above)
.ht-[size]-[value]p
.ht-100v | Set a height to an element based on viewport height.
.ht-auto | Set an auto height to an element.

#### Width

Class | Value
--- | ---
.wd-[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
.wd-[value] | 15 | 20 | 25 | 30 | ... | 100 (step of 5)
.wd-[value] | 150 | 200 | 250 | 300 | ... | 1000 (step of 50)
.wd-[value]p | 10 | 20 | 30 | 40 | ... | 100 (step of 10)
.wd-[size]-[value] | size: xs | sm | md | lg | xl value: the width value (refer to code above)
.wd-[size]-[value]p
.wd-100v | Set a width to an element based on viewport width.
.wd-auto | Set an auto width to an element.

#### Margins

Class | Value
--- | ---
.mg-t-[value] .mg-r-[value] .mg-b-[value] .mg-l-[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
.mg-t-[value] .mg-r-[value] .mg-b-[value] .mg-l-[value] | 15 | 20 | 25 | 30 | ... | 120 (step of 5)
.mg-[size]-t-[value] .mg-[size]-r-[value] .mg-[size]-b-[value] .mg-[size]-l-[value] | size: xs | sm | md | lg | xl value: the margin value (refer to code above)
.mg-t-auto | Set a top margin to auto
.mg-r-auto | Set a right margin to auto
.mg-b-auto | Set a bottom margin to auto
.mg-l-auto | Set a left margin to auto

#### Padding

Class | Value
--- | ---
.pd-t-[value] .pd-r-[value] .pd-b-[value] .pd-l-[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
.pd-t-[value] .pd-r-[value] .pd-b-[value] .pd-l-[value] | 15 | 20 | 25 | 30 | ... | 120 (step of 5)
.pd-t-[value] .pd-r-[value] .pd-b-[value] .pd-l-[value] | 110 | 120 | 130 | 140 | ... | 200 (step of 10)
.pd-[size]-t-[value] .pd-[size]-r-[value] .pd-[size]-b-[value] .pd-[size]-l-[value] | size: xs | sm | md | lg | xl value: the padding value (refer to code above)

#### Position

Class | Value
--- | ---
.pos-relative | Set a relative position to an element.
.pos-absolute | Set an absolute position to an element.
.pos-fixed | Set a fixed position to an element.
.pos-static | Set a static position to an element.
.t-[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.r-[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.b-[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.l-[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.x-[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.y-[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.a-[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.t--[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.r--[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.b--[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.l--[value] | 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.z-index-[value] | 10 | 50 | 100 | 150 | 200

#### Typography

Class | Value
--- | ---
.tx-[size] | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16
.tx-[size] | 18 | 20 | 22 | 24 | ... | 140 (step of 2)
.tx-[viewport]-[size] | viewport: xs | sm | md | lg | xl size: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16
.tx-[viewport]-[size] | viewport: xs | sm | md | lg | xl size: 18 | 20 | 22 | 24 | ... | 140 (step of 2)
.tx-[weight] | bold | semibold | medium | normal | light | thin | xthin
.tx-[viewport]-[weight] | viewport: xs | sm | md | lg | xl weight: bold | semibold | medium | normal | light | thin | xthin
.tx-[family] | poppins | hind | firasans (default) | roboto | source
.tx-[color] | primary | success | warning | danger | info | indigo | purple | orange | teal | pink | black | white | inverse
.tx-gray-[num] | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
.tx-white-[transparency] | 2 | 3 | 4 | 5 | 6 | 7 | 8
.tx-spacing-[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
.tx-spacing--[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 (negative spacing result)
.lh-[value] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
.lh-[viewport]-[value] | viewport: xs | sm | md | lg | xl value: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15

If you have any questions that are beyond the scope of this class reference, please feel free to email us at themepixels@gmail.com. Thanks so much!

# HTML Structure

## Header Panel

    <!-- ########## START: HEAD PANEL ########## -->
    <div class="sl-header">
      <div class="sl-header-left">
        <div class="navicon-left hidden-md-down">
          <a id="btnLeftMenu" href=""><i class="icon ion-navicon-round"></i></a>
        </div>
        <div class="navicon-left hidden-lg-up">
          <a id="btnLeftMenuMobile" href=""><i class="icon ion-navicon-round"></i></a>
        </div>
      </div><!-- sl-header-left -->
      <div class="sl-header-right">
        <nav class="nav"> ... </nav>
        <div class="navicon-right">
          <a id="btnRightMenu" href="" class="pos-relative"> ... </a>
        </div><!-- navicon-right -->
      </div><!-- sl-header-right -->
    </div><!-- sl-header -->
    <!-- ########## END: HEAD PANEL ########## -->

Class Reference | Description
--- | ---
.sl-header-left | The wrapper class of all elements found in left side of the header.
.sl-header-right | The wrapper class of all elements found in right side of the header.
.navicon-left | The icon menu on left that will toggle the left sidebar of page when clicked. There are two navicon-left used with different purpose, one will collapsed the left sidebar into an icon only menu and the other one which will hide and show the left sidebar entirely when clicked.

ID Reference | Description
--- | ---
#btnLeftMenu | This will collapsed the left sidebar into an icon only menu sidebar.
#btnLeftMenuMobile | This will hide and show the left sidebar by pushing the content showing the left sidebar.
#btnRightMenu | This will toggle the right sidebar of the page when clicked.

## Left Sidebar

Below is the html structure of the left sidebar of Starlight admin template that includes menu and icon menu. Some of the class found in left sidebar are explained below.

    <!-- ########## START: LEFT PANEL ########## -->
    <div class="sl-logo"><a href=""><i class="icon ion-android-star-outline"></i> starlight</a></div>
    <div class="sl-sideleft">
      <div class="input-group input-group-search"> ... </div>

      <label class="sidebar-label">Navigation</label>
      <div class="sl-sideleft-menu">
        <a href="index.html" class="sl-menu-link">
          <div class="sl-menu-item">
            <i class="menu-item-icon icon ion-ios-home-outline tx-22"></i>
            <span class="menu-item-label">Dashboard</span>
          </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <a href="#" class="sl-menu-link">
          <div class="sl-menu-item">
            <i class="menu-item-icon ion-ios-pie-outline tx-20"></i>
            <span class="menu-item-label">Charts</span>
            <i class="menu-item-arrow fa fa-angle-down"></i>
          </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <ul class="sl-menu-sub nav flex-column">
          <li class="nav-item"><a href="chart-morris.html" class="nav-link">Morris Charts</a></li>
          ...
        </ul>
      </div><!-- sl-sideleft-menu -->
    </div><!-- sl-sideleft -->
    <!-- ########## END: LEFT PANEL ########## -->

Class Reference | Description
--- | ---
.sl-sideleft | The left sidebar navigation of the template.
.sl-menu-link | The top level menu of left sidebar.
.sl-menu-link.active | The will highlight a top level menu
.sl-menu-link.active.show-sub | Not only this will highlight the top level menu, it will also show the sub menu next to it.
.sl-menu-sub | The sub navigation of menu using <ul> tag element.

## Right Sidebar

Below is the html structure of the right sidebar of Starlight admin template that includes a list of users and files, dates and some settings. Some of the class found in right sidebar are explained below.

    <!-- ########## START: RIGHT PANEL ########## -->
    <div class="sl-sideright">
      <ul class="nav nav-tabs nav-fill sidebar-tabs" role="tablist">
        ...
      </ul><!-- sidebar-tabs -->

      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane pos-absolute a-0 mg-t-60 active" id="messages" role="tabpanel">
          <div class="media-list">
            <!-- loop starts here -->
            <a href="" class="media-list-link">
              <div class="media"> ... </div>
            </a>
            <!-- loop ends here -->
          </div><!-- media-list -->
          <div class="pd-15">
            <a href="" class="btn btn-secondary">View More Messages</a>
          </div>
        </div><!-- #messages -->

        <div class="tab-pane pos-absolute a-0 mg-t-60" id="notifications" role="tabpanel">
          <div class="media-list">
            <!-- loop starts here -->
            <a href="" class="media-list-link">
              <div class="media pd-x-20 pd-y-15">
                ...
              </div><!-- media -->
            </a>
            <!-- loop ends here -->
          </div><!-- media-list -->
        </div><!-- #notifications -->

      </div><!-- tab-content -->
    </div><!-- sl-sideright -->
    <!-- ########## END: RIGHT PANEL ########## --->

Class Reference | Description
--- | ---
.sl-sideright | The right sidebar menu of the template.
.sidebar-tabs | The right sidebar tabs navigation of the template.

## Main Panel

Below is the html structure of the main panel of Starlight admin template that wraps the contents of the page.

    <!-- ########## START: MAIN PANEL ########## -->
    <div class="sl-mainpanel">
      <nav class="breadcrumb sl-breadcrumb">
        ...
      </nav>

      <div class="sl-pagebody">
        <div class="sl-page-title">
          <h5>Page Title</h5>
          <p>Some page description</p>
        </div><!-- sl-page-title -->

      </div><!-- sl-pagebody -->
    </div><!-- sl-mainpanel -->
    <!-- ########## END: MAIN PANEL ########## -->

Class Reference | Description
--- | ---
.sl-mainpanel | The main panel of the template.
.sl-pagebody | The wrapper of all the contents that will be added in the page.

## Elements

The HTML Markup of alerts, buttons, etc. are explained in the live preview of this template. Feel free to use it in your page. Any components that are beyond of this template, may submit a request and suggestion to our email at themepixels@gmail.com

# Javascipt

## Collapsed (Icon) Menu

The collapsed menu is the left sidebar menu being collapsed and showing only the icons after clicking the navicon menu on left side of the header of the template.

HTML Markup

    <a id="btnLeftMenu" href=""><i class="icon ion-navicon-round"></i></a>

Javascript Code:

    // This will collapsed sidebar menu on left into a mini icon menu
    $('#btnLeftMenu').on('click', function(){
      var menuText = $('.menu-item-label,.menu-item-arrow');

      if($('body').hasClass('collapsed-menu')) {
        $('body').removeClass('collapsed-menu');

        // show current sub menu when reverting back from collapsed menu
        $('.show-sub + .sl-menu-sub').slideDown();

        $('.sl-sideleft').one('transitionend', function(e) {
          menuText.removeClass('op-lg-0-force');
          menuText.removeClass('d-lg-none');
        });

      } else {
        $('body').addClass('collapsed-menu');

        // hide toggled sub menu
        $('.show-sub + .sl-menu-sub').slideUp();

        menuText.addClass('op-lg-0-force');
        $('.sl-sideleft').one('transitionend', function(e) {
          menuText.addClass('d-lg-none');
        });
      }
      return false;
    });

## Expand Menu

The expand menu is the left sidebar menu being expanded from collapsed showing not only just the icon but also its label when the left sidebar is hovered.

    // This will expand the icon menu when mouse cursor points anywhere
    // inside the sidebar menu on left. This will only trigget to left sidebar
    // when it's in collapsed mode (the icon only menu)
    $(document).on('mouseover', function(e){
      e.stopPropagation();

      if($('body').hasClass('collapsed-menu') && $('#btnLeftMenu').is(':visible')) {
        var targ = $(e.target).closest('.sl-sideleft').length;
        if(targ) {
          $('body').addClass('expand-menu');

          // show current shown sub menu that was hidden from collapsed
          $('.show-sub + .sl-menu-sub').slideDown();

          var menuText = $('.menu-item-label,.menu-item-arrow');
          menuText.removeClass('d-lg-none');
          menuText.removeClass('op-lg-0-force');

        } else {
          $('body').removeClass('expand-menu');

          // hide current shown menu
          $('.show-sub + .sl-menu-sub').slideUp();

          var menuText = $('.menu-item-label,.menu-item-arrow');
          menuText.addClass('op-lg-0-force');
          menuText.addClass('d-lg-none');
        }
      }
    });

## Showing of Sub Menu

The sub menu are hidden by default and can only be shown when its parent menu is active or clicked. If the parent menu is active during page load, its sub menu will also displayed.

    // This will auto show sub menu using the slideDown()
    // when top level menu have a class of .show-sub
    $('.show-sub + .sl-menu-sub').slideDown();

    // This will show sub navigation menu on left sidebar
    // only when that top level menu have a sub menu on it.
    $('.sl-menu-link').on('click', function(){
      var nextElem = $(this).next();
      var thisLink = $(this);

      if(nextElem.hasClass('sl-menu-sub')) {

        if(nextElem.is(':visible')) {
          thisLink.removeClass('show-sub');
          nextElem.slideUp();
        } else {
          $('.sl-menu-link').each(function(){
            $(this).removeClass('show-sub');
          });

          $('.sl-menu-sub').each(function(){
            $(this).slideUp();
          });

          thisLink.addClass('show-sub');
          nextElem.slideDown();
        }
        return false;
      }
    });

## Show Left Sidebar

The left sidebar is hidden when using smaller screen devices and shows up only when user click on the left navicon of the header. When clicked, the content will be pushed to the right along with the left sidebar that slides from the left to the right.

    // This will trigger only when viewed in small devices
    // #btnLeftMenuMobile element is hidden in desktop but
    // visible in mobile. When clicked the left sidebar menu
    // will appear pushing the main content.
    $('#btnLeftMenuMobile').on('click', function(){
      $('body').addClass('show-left');
      return false;
    });

## Show Right Sidebar

The right sidebar is hidden all the time and will only show up when user clicked on the icon located on the right side of the header of the template. The right sidebar consists of 4 tabs that will switch you between their contents.

    // This is the right menu icon when it's clicked, the
    // right sidebar will appear that contains the four tab menu
    $('#btnRightMenu').on('click', function(){
      $('body').addClass('show-right');
      return false;
    });

## Hiding Sidebar

There is no menu that will let you hide both the left and right sidebar. For you to hide it you only need to click anywhere outside of it. This is applicable for both left sidebar and right sidebar.

    // This will hide sidebar when it's clicked outside of it
    $(document).on('click', function(e){
      e.stopPropagation();

      // closing left sidebar
      if($('body').hasClass('show-left')) {
        var targ = $(e.target).closest('.sl-sideleft').length;
        if(!targ) {
          $('body').removeClass('show-left');
        }
      }

      // closing right sidebar
      if($('body').hasClass('show-right')) {
        var targ = $(e.target).closest('.sl-sideright').length;
        if(!targ) {
          $('body').removeClass('show-right');
        }
      }
    });

## Popover

By default, Bootstrap doesn't auto close popover after appearing in the page resulting other popover overlap each other. By adding the code below it will auto dismiss a popover when clicking anywhere outside of it.

    $(document).on('click', function (e) {
      $('[data-toggle="popover"],[data-original-title]').each(function () {
          //the 'is' for buttons that trigger popups
          //the 'has' for icons within a button that triggers a popup
          if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
              (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
          }
      });
    });

# Known Issue

- Not displaying font icons in opening the html files directly in a browser.

  A page loaded from a file:// URI, only files in (or below) the same directory of the filesystem are considered to be "same origin", and so putting the font in a different subtree (../font/) means it will be blocked by security policy restrictions. Most browser disables cross-domain fonts "by default. By fixing this, you need to put the file in a remote or local server. Anyway, that what where we're going.

# Changelog

## v1.0

- Initial Release

# References

Plugins | Link
--- | ---
Bootstrap | https://getbootstrap.com/
animate.css | http://daneden.me/animate
Chart JS | http://www.chartjs.org/
DataTables | https://datatables.net/
Flot | http://www.flotcharts.org/
FontAwesome | http://fontawesome.io/
Ionicons | http://ionicons.com/
Highlight JS | https://highlightjs.org/
Perfect Scrollbar | http://utatti.github.io/perfect-scrollbar/
Select2 | https://select2.org/
GMaps | http://hpneo.github.io/gmaps/
Moment JS | https://momentjs.com/
Morris JS | http://morrisjs.github.io/morris.js/
Sparkline | http://digitalbush.com/projects/masked-input-plugin/
jQuery Steps | http://www.jquery-steps.com/
jQVMap | https://jqvmap.com/
Medium Editor | https://github.com/yabwe/medium-editor
Parsley | http://parsleyjs.org/
Rickshaw | http://code.shutterstock.com/rickshaw/
Spectrum | https://bgrins.github.io/spectrum/
SpinKit | http://tobiasahlin.com/spinkit/
Summernote | https://summernote.org/

# Customer Support

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

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

Email: themepixels@gmail.com

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.

© 2017. Starlight Documentation v2.0. All Rights Reserved. Created by: ThemePixels