Able Pro - v5.0 Documentation by Phoenixcoded

Getting started

Able pro is fully responsive bootstrap 4 admin template for your complete need.

Features

Bootstrap 4 Framework

Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

Easily customizable

The internet is society’s true equalizer. It gives voices to the masses, as people from across the world can now express their opinions and ideals. Not since the industrial revolution, has humanity experienced such a game-changing invention.

HTML5/CSS3

HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web.

Responsive layout

Let this collection of responsive designed websites across a variety of website types help get your creative and developer juices flowing. Each site features a screenshot across 4 device widths and you can see the media queries.

Integrated plugins

You can enable one or more of the integrated Apache Cordova plugins to extend the functionality of your app. The integrated plugins are custom Apache Cordova plugins that the AppBuilder team modifies, configures and updates regularly.

Most advanced

Earum dignissimos odit, cumque impedit magnam nemo sint. Officiis iste expedita ad ipsum est dicta ut ex, ab quidem nobis.

What's included

assets/
- css/
  - bootstrap.min.css
  - bootstrap-combined.min.css
  - bootstrap-editable.css
  - responsive.css
  - samples.css
  - tm_validator.css
  - tm_editable.css
  - swiper.min.css
  - slick-theme.css
  - ...- More
- icon/
  - flag-icon.min.css
  - icofont.css
  - icofont.css
  - ionicons.min.css
  - material-design-iconic-font.min.css
  - simple-line-icons.css
  - typicons.min.css
  - weather-icons-wind.min.css
  - ...- More
- images/
  - footer-fixed-a.png
  - header-fixed-a.png
  - other-a.png
  - sidebar-sticky-a.png
  - ...-More
- js/
  - bootstrap.min.js
  - jarallax.js
  - modernizr.js
  - slick.min.js
  - swiper.min.js
  - owl.carousel.min.js
  - jquery.easypiechart.min.js
  - ...- More
- custom Page Js/
  - accordion.js
  - advance-form.js
  - animation.js
  - button-fab.js
  - ...-More
- dashboard.html
- dashboard2.html
- dashboard3.html
- dashboard4.html

File structure

Let's talk about what's inside the package.

Docs file hierarchy

Expand all
Collapse all

assets/css - All plugins stylesheet cover under css/ folder
- main.css - able pro custom made css must required for all the files
- responsive.css - responsive layout included media queries
- ...more - more css files listed under css folder
assets/icon - Internal Icon font's required stylesheet and font cover under icon/ folder
- flag-icon.css
- icofont.css
- ico-fonts.css
- ion-icon.css
- material-design.css
- simple-line-icons.css
- ....more
assets/images - Required images cover under images/ folder
- footer-fixed-a.png
- header-fixed-a.png
- ...more
assets/js - Able pro's required javascript files cover under js/ folder
- jarallax.js
- owl.carousel.min.js
- slick.min.js
- jquery.easypiechart.min.js
- carousel.js
- ...more
assets/pages Page wise custom javascript cover under pages/ folder.
- accordion.js
- advance-form.js
- animation.js
- ...more
assets/plugins - Able pro's custom plugins javascript cover under plugins/ folder
- ace-editor.css
- ...more
dashboard.html - quis cum ratione laboriosam ducimus iure voluptates quaerat si
dashboard2.html - omnis ipsa quas vel alias illum nostrum deleniti officiis
dashboard3.html - libero et id laborum laboriosam dignissimos a! cum molestia
dashboard4.html - libero et id laborum laboriosam dignissimos a! cum molestia
... - Entire files comes under root/ folder

Basic Page Layout

Able pro - Comman page layout structure

Able pro comes with 11+ different pages layout where template's sidebar menu change everytime. Below is the basic page layout of able pro admin template.

Install-template

Yep, as simple as that.

CSS & jQuery required

Please note that all CSS and JavaScript plugins require to be included, as shown in the sample.html page.

Css files

copy


	<!-- Google font-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

    <!-- iconfont -->
    <link rel="stylesheet" type="text/css" href="assets/icon/icofont/css/icofont.css">

    <!-- simple line icon -->
    <link rel="stylesheet" type="text/css" href="assets/icon/simple-line-icons/css/simple-line-icons.css">

    <!-- Required Fremwork -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

    <!-- Chartlist chart css -->
    <link rel="stylesheet" href="assets/plugins/charts/chartlist/css/chartlist.css" type="text/css" media="all">

    <!-- Weather css -->
    <link href="assets/css/svg-weather.css" rel="stylesheet">

    <!-- Echart js -->
    <script src="assets/plugins/charts/echarts/js/echarts-all.js"></script>

    <!-- Style.css -->
    <link rel="stylesheet" type="text/css" href="assets/css/main.css">

    <!--color css-->
    <link rel="stylesheet" type="text/css" href="assets/css/color/color-1.css" id="color"/>

Js files

copy


	<!-- Required Jqurey -->
	<script src="assets/js/jquery-3.1.1.min.js"></script>
	<script src="assets/js/jquery-ui.min.js"></script>
	<script src="assets/js/tether.min.js"></script>

	<!-- Required Fremwork -->
	<script src="assets/js/bootstrap.min.js"></script>

	<!-- waves effects.js -->
	<script src="assets/plugins/waves/js/waves.min.js"></script>

	<!-- Scrollbar JS-->
	<script src="assets/plugins/slimscroll/js/jquery.slimscroll.js"></script>
	<script src="assets/plugins/slimscroll/js/jquery.nicescroll.min.js"></script>

	<!--classic JS-->
	<script src="assets/plugins/search/js/classie.js"></script>

	<!-- notification -->
	<script src="assets/plugins/notification/js/bootstrap-growl.min.js"></script>

	<!-- Sparkline charts -->
	<script src="assets/plugins/charts/sparkline/js/jquery.sparkline.js"></script>

	<!-- Counter js  -->
	<script src="assets/plugins/countdown/js/waypoints.min.js"></script>
	<script src="assets/plugins/countdown/js/jquery.counterup.js"></script>

	<!-- custom js -->
	<script type="text/javascript" src="assets/js/main.js"></script>
	<script type="text/javascript" src="assets/pages/elements.js"></script>
	<script src="assets/js/menu.js"></script>

HTML Structure


<!DOCTYPE html>
<html lang="en">

<head>
    <title>Able Pro Admin</title>
   
   <!-- Favicon icon -->
	
   <!-- CSS -->
    
</head>
<body class="sidebar-mini fixed">
<div class="wrapper">

    <!-- Pre-Loader-->
    <div id="pre-loader"></div>
	
    <!-- Header Top Menu-->
    <header class="main-header-top hidden-print">
    </header>
	
    <!-- Side-Nav-->
    <aside class="main-sidebar hidden-print " >
        <!-- Main Menu Part -->
    </aside>
	
    <!-- Sidebar chat start -->
    <div id="sidebar" class="p-fixed users showChat">
        <!-- Rightside Menu item -->
    </div>
	
	<!-- Sidebar chat Window -->
    <div class="showChat_inner">
    </div>
  
	<!-- Main Content container -->
    <div class="content-wrapper">

        <!-- Container-fluid starts -->
        <div class="container-fluid">
        </div>
    </div>
</div>

<!-- Required Jqurey files-->

</body>

</html>

Important info

Above mention details helps you to quick start installation but for more detailed info about Plugins, CSS class references follow below details carefully.

Bower Install

Bower Information

Please note that all Detail main Web Site.. Click Here..

Bower Install

copy


<!-- Bower Install -->

$ npm install -g bower

Getting started

 <!-- Install packages -->

$ bower install <package>
# installs the project dependencies listed in bower.json
$ bower install
# registered package
$ bower install jquery
# GitHub shorthand
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# URL
$ bower install http://example.com/script.js

Search packages

Search Bower packages and find the registered package names for your favorite projects.

Save packages

Create a bower.json file for your package with bower init.

Then save new dependencies to your bower.json with bower install PACKAGE --save

Use packages

copy


<script src="bower_components/jquery/dist/jquery.min.js"></script>

Grunt

runt Information

Please note that all Detail main Web Site.. Click Here..

Installing the CLI

copy


npm install -g grunt-cli

<!-- package.json -->
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

 <!--Installing Grunt and gruntplugins -->

  npm install grunt --save-dev
  npm install grunt-contrib-jshint --save-dev

 <!--Installing Grunt and gruntplugins -->

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

SCSS

SCSS Basics

Please note that all Detail main Web Site.. Click Here..

SCSS files

copy



    <!-- Variables SCSS Syntax -->

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}


   <!-- Nesting SCSS Syntax -->
   nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Css files

copy



<!-- Nesting CSS Syntax -->
body {
font: 100% Helvetica, sans-serif;
color: #333;
}

<!-- Nesting CSS Syntax -->

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

CSS Classes Reference

	Extra small devices Portrait phones (<544px)	Small devices Landscape phones (≥544px - <768px)	Medium devices Tablets (≥768px - <992px)	Large devices Desktops (≥992px - <1200px)	Extra large devices Desktops (≥1200px)
`.hidden-xs-down`	Hidden	Visible	Visible	Visible	Visible
`.hidden-sm-down`	Hidden	Hidden	Visible	Visible	Visible
`.hidden-md-down`	Hidden	Hidden	Hidden	Visible	Visible
`.hidden-lg-down`	Hidden	Hidden	Hidden	Hidden	Visible
`.hidden-xl-down`	Hidden	Hidden	Hidden	Hidden	Hidden
`.hidden-xs-up`	Hidden	Hidden	Hidden	Hidden	Hidden
`.hidden-sm-up`	Visible	Hidden	Hidden	Hidden	Hidden
`.hidden-md-up`	Visible	Visible	Hidden	Hidden	Hidden
`.hidden-lg-up`	Visible	Visible	Visible	Hidden	Hidden
`.hidden-xl-up`	Visible	Visible	Visible	Visible	Hidden

Plugins

Plugins Name	Plugins page use	Plugins css	customize js	Link
Ace-editor	ace-editor.html	____	____	View Resource
Animation	animation.html	style.css	assets/pages/animation.js	View Resource
Calender	full-calender.html	fullcalendar.css	assets/pages/animation.js	View Resource
Charts	chartjs.html	c3.css	chart-chartjs.js	View Resource
Ck-Editor	ck-editor.html	editor.css	assets/pages/ckeditor-custom.js	View Resource
Color-Picker	form-elements-advance.html	spectrum.css	assets/pages/advance-form.js	View Resource
Count Down	coming-soon.html	___	assets/pages/countdown.js	View Resource
Data-Table	data-table.html	buttons.dataTables.min.css	assets/pages/data-table.js	View Resource
Date Picker	form-elements-advance.html	bootstrap-material-datetimepicker.css	assets/pages/advance-form.js	View Resource
E-Charts	echart.html		assets/pages/echart.js	View Resource
Edit-Table	editable-table.html	____	assets/pages/editable.js	View Resource
File-Upload	file-upload.html	dropzone.css	__	View Resource
Foo-Table	foo-table.html	footable.standalone.min.css	assets/pages/foo-table.js	View Resource
Form-Mask	form-mask.html	__	assets/pages/form-mask.js	View Resource
Forms-Wizard-Validation	forms-validation.html	jquery.steps.css	assets/pages/form-validation.js	View Resource
Gallery	gallery.html	lightgallery.css	assets/pages/gallery.js	View Resource
Grid Stack	gridstack.html	__	assets/pages/gridstack.js	View Resource
High lighter	All Pages	shThemeDefault.css	assets/pages/gridstack.js	View Resource
Image-Crop	image-cropper.html	cropper.css	assets/pages/croper.js	View Resource
Isotope	landing-page.html	__	assets/pages/landing-page.js	View Resource
Jq Pagination	other.html	jqpagination.css	assets/pages/other.js	View Resource
Jquery-Fab	button-fab.html	jquery-fab.css	assets/pages/button-fab.js	View Resource
Light-Box	gallery.html	lightbox.css	assets/pages/gallery.js	View Resource
Light-Box2	gallery.html	lightbox.css	assets/pages/gallery.js	View Resource
list	list.html	__	assets/pages/list-custom.js	View Resource
List-Scroll	list.html	stroll.css	assets/pages/list-custom.js	View Resource
Map-Google	map-google.html	__	assets/pages/google-maps.js	View Resource
Map-Vector	map-vector.html	jquery-jvectormap.css	assets/pages/map-vector.js	View Resource
Max-length	form-elements-advance.html	__	assets/pages/advance-form.js	View Resource
Modal	modal.html	component.css	assets/pages/modal.js	View Resource
Multi-select	form-elements-advance.html	bootstrap-multiselect.css	assets/pages/advance-form.js	View Resource
Nestable	nestable.html	nestable.css	assets/pages/nestable.js	View Resource
Notification	notification.html	notification.css	assets/pages/notification.js	View Resource
Pricing	pricing.html	style.css	__	View Resource
Radial	pricing.html	style.css	__	View Resource
Range-Slider	range-slider.html	bootstrap-slider.css	assets/pages/range-slider.js	View Resource
Rating	rating.html	rating.css	__	View Resource
Responsive-Table	responsive-table.html	rwd-table.min.css	__	View Resource
Search	responsive-table.html	rwd-table.min.css	assets/js/main.js	View Resource
Select2	form-elements-advance.html	select2.min.css	assets/pages/advance-form.js	View Resource
Slim Scroll	menu.html	__	assets/js/menu.js	View Resource
Sortable	draggable.html	__	assets/js/menu.js	View Resource
Sticky	sticky.html	jquery.postitall.css	assets/pages/sticky.js	View Resource
Summer Note	email.html	summernote.css	__	View Resource
Summer Note	email.html	summernote.css	__	View Resource
Sweet Alert	modal.html	sweetalert.css	assets/pages/modal.js	View Resource
Switchery	form-elements-advance.html	switchery.min.css	assets/pages/advance-form.js	View Resource
Tags	form-elements-advanc.html	bootstrap-tagsinput.css	assets/pages/advance-form.js	View Resource
Task-Detail	task-detailed.html	__	assets/pages/task-detail.js	View Resource
TimeLine	timeline.html	style.css	__	View Resource
Todo	todo.html	__	assets/plugins/todo/js/todo.js	View Resource
Tour	tour.html	enjoyhint.css	assets/pages/tour.js	View Resource
Tree-View	treeview.html	treeview.css	__	View Resource
Waves	button.html	waves.min.css	__	View Resource
Wysiwyg-Editor	wysiwyg-editor.html	__	assets/pages/wysiwyg-editor.js	View Resource
X-Editable	x-editable.html	__	assets/pages/xeditable.js	View Resource

Browser support

Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 9+. More specific support information is provided below.

Chrome
Safari
Opera
FireFox
IE 9+

FAQ

Begin typing your question. If we don't have an answer for it in our FAQ, please leave us a message on our contact page.

What is Able pro?

Able pro is responsive admin template/dashboard which useful for your complete entire projects like CRM system - Task System - User Management System - Social Dashboard etc. Without any trouble Able pro gives the perfect outcome with tons of ready made plugins which helps you at every step while creating any project.
Why choose Able pro?

Able pro built using bootstrap's latest version 4 which have complete compatibility on bootstrap4. It is fully crafted for every one's need and its fullfilled those need too. Tons of Plugins, Forms, Charts, Tables, Custom Pages gives extra smoothness in project.
Licence terms?

Able pro comes with single license usage and support for every single purchase from Envato marketplace [i.e.Themeforest]. If you want to use Able pro for multiple project you must buy the extra licence for that.
Can i use Able pro on Envato marketplaces ?

Yes you can BUT most importantly you must buy the single extended licence every time if you choose the Able pro in your project and sell it any where on Envato market.
What about Item Support?

We only support those purchaser who purchased Able pro from Envato marketplace [i.e Themeforest]. 6 months included support comes with every single purchase of Able pro. If you still want support then you must buy extra 6 months support from themeforest.
What is Support Turnaround time ?

When you comment or submit the ticket for support. Our team takes it very seriously and respond it within a Half or Full day.
How i rate the Able pro ?

It just a simple. Go to your themeforest account. Then check your download section where you found Able Pro template. Click on start ratings. Simple !!!

Version Change Log

Detailed version change log describe below.

01/05/2017 - Release v5.0
------------------------------------
- Bug fixes

							
03/04/2017 - Release v4.0
------------------------------------
- Angular version included in package with Bower, Grunt compatible

v3.0
-----------
09-02-2017

- RTL Demo - Boxed Layout included
- PHP version - Horizontal mobile menu issue fixed [You must replace main.css, menu.css, responsive.css if you are in older version]
- Lots of Performance issue solved in v3.0
- Major changes in all the .html files for better performance.

=================================================================							

v2.0
-----------
23-01-2017
New demos for Light/Dark version in HTML and PHP version included in package.

=================================================================

v1.0
-----------
Initial release 21-01-2017

Getting started

Features

Bootstrap 4 Framework

Easily customizable

HTML5/CSS3

Responsive layout

Integrated plugins

Most advanced

What's included

File structure

Let's talk about what's inside the package.

Basic Page Layout

Able pro - Comman page layout structure

Install-template

Yep, as simple as that.

CSS & jQuery required

Css files

Js files

HTML Structure

Important info

Above mention details helps you to quick start installation but for more detailed info about Plugins, CSS class references follow below details carefully.

Bower Install

Bower Information

Bower Install

Search packages

Save packages

Use packages

Grunt

runt Information

Installing the CLI

SCSS

SCSS Basics

SCSS files

Css files

CSS Classes Reference

Plugins

Browser support

Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 9+. More specific support information is provided below.

Chrome

Safari

Opera

FireFox

IE 9+

FAQ

Begin typing your question. If we don't have an answer for it in our FAQ, please leave us a message on our contact page.

What is Able pro?

Why choose Able pro?

Licence terms?

Can i use Able pro on Envato marketplaces ?

What about Item Support?

What is Support Turnaround time ?

How i rate the Able pro ?

Version Change Log

Detailed version change log describe below.