# Introduction

Thank you for support our work, Beagle is an HTML/CSS/Js admin template based on the famous Bootstrap framework, made it with love in every pixel.

In this document you will find a complete guide which covers topics about the product functionality, components, structure, workflow and the initial setup.

## Folder Structure

Once you downloaded this product, extract the zip file and you will find these directories:

beagle.zip

    beagle
    ├── dist
    ├──── html
    ├──── light
    ├── docs
    ├── src
    ├── grunt
    ├── Gruntfile.js
    ├── bower.json
    └── package.json

### dist

This folder contains the final production-ready compiled files

#### html

This folder contains the complete distribution version with all demo content included as seen in the live preview version.

#### light

This folder contains the essentials components, this version does not include any of the live preview examples. This is especially designed to get started with only the needed elements.

### docs

The current documentation is located inside this folder.

### src

In this folder you'll find the template's source code, if you want to customize the template to fit your specific needs, this is the right place to start with.

### grunt

Inside this directory you'll find the grunt tasks that are part of the built-in workflow.

### Grunfile.js

This is the main workflow JavaScript file that runs with Grunt.js, if you haven't used Grunt before, be sure to check out the Getting Started guide.

### bower.json

This is the bower manifest file in which we define all admin dependencies like jQuery, Bootstrap and more.

### package.json

This is the npm manifest file in which we define what are going to be our workflow dependencies.

# HTML Structure

The tamplate main structure is divided in four sections: Top bar, Left sidebar, Right sidebar and Main content.

Main Structure

    <!DOCTYPE html>
    <html lang="en">
      <body>
        <div class="be-wrapper">
          <nav class="navbar navbar-default navbar-fixed-top be-top-header">
            <!-- Top bar -->
          </nav>
          <div class="be-left-sidebar">
            <!-- Left sidebar -->
          </div>
          <div class="be-content">
            <!-- Main Content -->
          </div>
          <nav class="be-right-sidebar">
            <!-- Right sidebar -->
          </nav>
        </div>
      </body>
    </html>

### Required Dependencies

This template require four libraries to work:

- jQuery 1.9.1 (or later)
- Bootstrap 3
- Perfect Scrollbar 0.6.11
- Material Design Iconic Font (latest)

In addition to these libs, the main structure needs a basic modular js core to provide the template interaction like sidebars functionality. This file is located in `"assets/js/main.js"`

There are some dependencies embedded in the `main.js` file that adds extra functionality to the template:

- Fast Click 1.0.3
- Tiny Color 1.2.1
- jQuery Touch Swipe 1.6.12
- Bootstrap Break Point Check 1.0.0

Note: You don't need to add these last dependencies because they are already included in the main.js file

### Include the dependencies

Be sure to include the essentials scripts in your pages, for example inside your `head` tag should be like this:

Head Links

    <link rel="stylesheet" type="text/css" href="assets/lib/material-design-icons/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" type="text/css" href="assets/lib/perfect-scrollbar/css/perfect-scrollbar.min.css">

    <!--[if lt IE 9]>
    	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="assets/css/style.css" type="text/css">

And just before the `body` tag ends, please add these JavaScript libs:

Footer Scripts

    <script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
    <script src="assets/js/main.js" type="text/javascript"></script>
    <script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function(){
        //initialize the javascript
        App.init();
      });
    </script>

## Top bar

We are extending the Bootstrap Navbar component using the fixed version by default, we also added some custom elements:

Top bar structure

    <nav class="navbar navbar-default navbar-fixed-top be-top-header">
      <div class="container-fluid">

        <!-- Navbar Header -->
        <div class="navbar-header">

          <!-- Brand Logo -->
          <a href="#" class="navbar-brand"></a>
        </div>

        <!-- Main topbar elements -->
        <div class="be-right-navbar">
          <ul class="nav navbar-nav navbar-right be-user-nav">
            <!-- User Menu -->
          </ul>

          <!-- Page title -->
          <div class="page-title"><span>Dashboard</span></div>

          <ul class="nav navbar-nav navbar-right be-icons-nav">
            <!-- Icons Menu -->
          </ul>
        </div>

        <!-- Left navbar (Used only when there is no left sidebar) -->
        <a href="#" data-toggle="collapse" data-target="#be-navbar-collapse" class="be-toggle-top-header-menu collapsed">No Sidebar Left</a>
        <div id="be-navbar-collapse" class="navbar-collapse collapse">
          <!-- Default bootstrap navbar -->
        </div>

      </div>
    </nav>

### Navbar Header

In this element you'll find the app logo, located in the top left corner (`"navbar-brand"`), it will be shown on large devices and hidden on small resolutions:

### Main topbar elements

Is composed by a group of elements which one of them is going to be hidden(`"page-title"`) on small devices.

Desktop View

Small View

# JavaScript

In every page, we are calling an object method which handles the basic template interaction. It's written with "The Module Pattern" which encapsulates certain code, and allows you to use it when it's needed.

We use a global javascript object called "App", it provides a modular structure that we use to initialize the demo Js plugins on each demo page. You can find several modules in `"assets/js"` inside the html folder.

Said that you'll notice that there are different Js modules for some of the demo pages, all of them are optional, exept the `"main.js"` or `"main.min.js"` in case you want to use the minified version.

Important!
Please don't add any custom Js code inside this file because you'll lose it when you update the template.

### init() Method

This method is responsible for some of the bootstrap plugins initializing, both sidebars functionality and other responsive tasks. That's why this is the core method of this template.

You can add it at the end of the page like this:

Footer Scripts

    <script type="text/javascript">
      $(document).ready(function(){
        App.init();
      });
    </script>

### Demo modules & methods

In order to call the following methods you'll need to include the script reference of the JavaScript file, after that you can call it after the init method this way: `App.methodName();`

Each of these modules contain the JS init for the demo plugins, feel free to copy and modify according to your needs.

File Name | Method | Page
--- | --- | ---
app-dashboard.js | dashboard | index.html
app-ui-notifications.js | uiNotifications | ui-notifications.html
app-ui-nestable-lists.js | uiNestableLists | ui-nestable-lists.html
app-charts.js | charts | charts.html
app-charts-morris.js | chartsMorris | charts-morris.html
app-charts-sparkline.js | chartsSparklines | charts-sparkline.html
app-form-elements.js | formElements | form-elements.html
app-form-wizard.js | wizard | form-wizard.html
app-form-masks.js | masks | form-masks.html
app-form-wysiwyg.js | textEditors | form-wysiwyg.html
app-icons.js | IconsFilter | ui-icons.html
app-mail-inbox.js | mailInbox | email-inbox.html
app-mail-compose.js | mailCompose | email-compose.html
app-tables-datatables.js | dataTables | tables-datatables.html
app-pages-profile.js | pageProfile | pages-profile.html
app-pages-calendar.js | pageCalendar | pages-calendar.html
app-pages-gallery.js | pageGallery | pages-gallery.html
app-maps-google.js | mapsGoogle | maps-google.html
app-maps-vector.js | mapsVector | maps-vector.html

### Create an App module

You can extend the App modular structure easily by creating your own modules like this:

Footer Scripts

    var App = (function () {

      App.moduleName = function( ){
        'use strict'

        //Js Code

      };

      return App;
    })(App || {});

# Getting Started

There are three different ways to use this template in your next project:

- Basic Setup
- Using LESS files
- Using Grunt.js

## Basic Setup

This is the quickest way to setup the template, you just have to copy the "light" folder content into your project root folder and start working on the `index.html` file.

Important!
Using this method you'll need to add your custom styles in a different css file, to avoid losing changes when you update the template.

Be sure to include the essentials scripts in your document to get things work properly. After that you're ready to start building.

### Cons

This method is perfect if you think you are not going to make several changes to the original version and use it "as is", otherwise we suggest to use one of the following methods.

## Using Grunt

Grunt is a task runner which allows to build a complete and automatic workflow.

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

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins.

Supposing that you already are familiar with Grunt, we are going to explain step by step how to get started with the built-in workflow.

### Install Node & Grunt

If you already have Node.js and Grunt.js installed you can skip this step.

1. Be sure to have the latest version of Node.js installed & running in your computer. We are going to use npm that comes with Node.js installation.
2. Now open your terminal and enter `npm install -g grunt-cli` to install Grunt globally.

### Install npm dependencies

In your terminal go to the root folder with `cd` command and then enter the following command to install the project dependencies: `npm install`

### Install bower dependencies

In your root folder enter the following command to install the project dependencies: `grunt install`, this command will install all the template libraries inside the source folder: `src/assets/libs`, you need to run this command before you run `grunt dist` tasks in order to include dependencies in distribution.

### Setup LESS development environment

In case you don't know nothing about css pre-processors, this is a brief description about what it is:

> Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

In other words with css-preprocessors you can change the full color theme of this template by just changing a few lines of code.

### Setting up your css file

1. In the less folder `src/less/` you'll find a file called `style.less`.
2. Rename it to a different name, for example `style.less` => `beagle.less`.
3. Then create a new file called `style.less` which you are going to use it to modify variables and create your custom code.

4. After that, you'll need to include the original main less file into the new file like this:

   style.less

       //Import the template source code
       @import "beagle.less";

       //Your custom code goes here

   Inside this file you can modify the bootstrap and template variables values for example to change the color palette:

   style.less

       //Import the template source code
       @import "beagle.less";

       //Modify template colors
       @primary-color: 	#595BD4;
       @danger-color: 		#FD3D39;
       @warning-color: 	#FFCB2F;
       @success-color: 	#53D86A;

### Variables

The template comes with several veriables that you can use to customize and create your own version, alongside with the Bootstrap default variables.

To see what variables are available go to `"src/less/includes/config.less"` and Bootstrap variables are located in `"src/assets/lib/bootstrap/less/variables.less"`.

### Available Tasks

After install dependencies now you can run the automated taks, here are the available commands:

#### Custom tasks

Command | Description
--- | ---
grunt install | Install and move bower dependencies into `src/assets/lib` using the bowercopy task.
grunt | It runs the watch command and an express development server in `'http://localhost:8080/index.html'`, this way you can modify your less files and it automatically runs the less compiler task designed for development.
grunt dist | Generate the end-compiled-ready-to-use distribution folder in your project root.
grunt dist --sass | Generate the end-compiled-ready-to-use distribution folder in your project root, compiling using the sass files.

### Adding new dependencies

You can add new dependencies easily using bower, just open your terminal in your root path and install the dependency as usual using `bower install dependency-name --save`, then you'll need to add a bowercopy entry.

#### Adding a bowercopy entry

We use bowercopy to filter which files do we really want to be copied to our development/production environment reducing the unnecessary load of unused files.

Open the `src/grunt/tasks/bowercopy.js` file and add a new json entry like this:

bowercopy.js

    "bower-dependency-name": {
      "files":{
        "bower-dependency-destination/css" : "bower-dependency-name/css",
        "bower-dependency-destination/js" : "bootstrap/dist"
      }
    }

This way the new dependency will be moved from `bower_components/bower-dependency-name/` to `src/assets/lib/bower-dependency-destination/` and only the files you specified in the new bowercopy entry will be moved to the lib folder.

For more information about how bowercopy works you can go to the official documentation.

# Plugins

This template comes with four main dependencies, and several plugins for the demo pages, here is the plugin list with the official documentation for each one.

Name | Documentation | Version
--- | --- | ---
jQuery | https://jquery.com/ | >= 1.9.1
Bootstrap | http://getbootstrap.com/ | 3.3.5
perfect-scrollbar | https://github.com/noraesae/perfect-scrollbar | 0.6.11
Bootstrap Markdown | http://toopay.github.io/bootstrap-markdown/ | 2.10.0
Google Prettify | https://github.com/google/code-prettify | latest
countUp.js | https://inorganik.github.io/countUp.js/ | 1.5.3
dataTables | http://datatables.net/ | 1.10.12
dataTables Buttons | https://github.com/DataTables/Buttons | 1.0.3
Dropzone | http://www.dropzonejs.com | 4.3.0
FastClick | https://github.com/ftlabs/fastclick | 4.0.1
CurvedLines | http://curvedlines.michaelzinsmaier.de/ | 1.1.1
Bootstrap DateTime Picker | http://www.malot.fr/bootstrap-datetimepicker/ | 2.3.5
Gritter | https://github.com/jboesch/Gritter | 1.7.4
Fuel UX | http://getfuelux.com/ | 3.15.4
FullCalendar | http://arshaw.com/fullcalendar/ | 2.9.0
jQuery Breakpoint Check | https://github.com/cakebake/jquery-breakpoint-check | 1.0.0
jQuery Nestable | https://github.com/thesabbir/jquery-nestable | 1.0
jQuery Nifty Modals | https://github.com/foxythemes/jquery-niftymodals | 1.2.0
jQuery UI | https://jqueryui.com/ | 1.11.4
jQuery Masked Input | https://github.com/digitalBush/jquery.maskedinput | 1.4.1
jVectorMap | https://github.com/bjornd/jvectormap/ | 1.2.2
jQuery Vector Map | https://github.com/manifestinteractive/jqvmap | 1.5.1
jQuery Sparkline | https://github.com/kapusta/jquery.sparkline | 2.1.3
Magnific Popup | http://dimsemenov.com/plugins/magnific-popup/ | 1.0.0
Markdown.js | https://github.com/evilstreak/markdown-js | 0.5.0
Masonry | http://masonry.desandro.com/ | 4.1.0
Moment | http://momentjs.com/ | 2.14.1
Parsley | http://parsleyjs.org/ | 2.4.3
Bootstrap Slider | http://seiyria.github.io/bootstrap-slider/ | 4.8.3
Select2 | https://select2.github.io/ | 4.0.3
Summernote | http://summernote.org/ | 0.8.1
Tiny Color | http://bgrins.github.io/TinyColor/ | 1.2.1
Flot Charts | http://www.flotcharts.org/ | 0.8.3
jQuery Touch Swipe | https://github.com/mattbryson/TouchSwipe-Jquery-Plugin | 1.6.12
Morris.js | https://github.com/morrisjs/morris.jsTouchSwipe-Jquery-Plugin | 0.5.1
Chart.js | https://github.com/chartjs/Chart.js | 2.2.1

# Support

We are here to assist you, thank you for report any bug/issue to our email support@foxythemes.net.

What support includes?

- Availability to answer questions
- Answering technical questions about item's features
- Assistance with reported bugs and issues
- Help with included 3rd party assets

What support doesn't include:

- Customization services
- Installation services

If you already read the documentation and you still need assistance, please send us your purchase data to support@foxythemes.net in order to give you access to our support forum.

# Changelog

Version 1.3.0 - 2 Jun 2017
Added: Sub navigation layout
Added: Loaders page
Added: Code editor page
Added: Booking page
Added: Table filters page
Added: Add dropdown menus panel icon
Added: Add support for SASS
Fixed: Text overflow ellipsis in collapsed sidebar

Version 1.2.1 - 18 Apr 2017
Fixed: Wrong position in date range picker caret
Fixed: Wrong wizard complete hover color
Fixed: Wrong margin left in colllapsible sidebar
Fixed: Dropzone upload not working on mobile

Version 1.2.0 - 29 Dec 2016
Added: Collapsible left sidebar support
Added: Multilevel support in left sidebar menu
Added: Left sidebar perfect scrollbar window resize sync
Added: Integrate Multiselect plugin
Added: Bootstrap X Editable form
Added: Bootstrap date range picker
Added: Bootstrap file input
Added: Off-canvas menu layout
Added: Panel full width style
Added: Search input in top header
Added: Include development workflow in dist(src) folder
Fixed: Missing table-responsive class in responsive table
Fixed: Missing horizontal padding in datetime picker
Fixed: Fixed left sidebar perfect scrollbar window resize sync

Version 1.1.1 - 27 Oct 2016
Fixed: Open right sidebar on swipe left not working
Fixed: Right sidebar toggle button problem on close

Version 1.1 - 25 Oct 2016
Added: Option to disable close right sidebar on click outside
Added: Timeline page
Added: Timeline page version 2
Added: Typography page
Added: Invoice page
Fixed: Content overflow problem

Version 1.0 - 28 Sep 2016
Initial Release