Reactive Admin Template Documentation

Overview

Reactive is a multipurpose admin template designed to be simple, responsive, highly flexible and targeted to any monitor sizes. It has been developed to address users best experience and simplicity of the user interface. Every single component is written with best practices in mind, well tested and actively supported. We are doing our best to provide you rapid and qualitative support. If you think there is something which is not understandable, find a drawback, have suggestions about new functionality or any other question about the template don't hesitate to send a message by our support service or by a private email. All messages will be carefully considered and problems will be solved.

Reactive comes with two html/javascript/css and handlebars/scss/typescript versions. Use the former version if you want to work with a plain html template. You could find the html/javascript/css code in the html folder of the root directory.

First of all you need to build the template to start editing:

Build

You should already have Node.js installed in your machine to build the project.

Install Node.js

The template is using Gulp to automate the development and build processes and Jspm to manage modules and plugins. All you should do to start your project is to open the terminal/console in the root directory (where the project.json file is located) and enter fallowing commands based on which version you choose:

  1. npm install to install all dependencies/plugins
  2. npm run serve.dev to start the server in development mode
  3. Open you favorite browser and enter http://localhost:5555 in the browser address bar

Take a look into the src/ folder to make your changes. Enter npm run lint to find all syntax errors in your typescript and scss files. At the end enter npm start to compile the code, create css/js bundles, minify the code and start the server in production mode. New reactive_html/prod folder will be generated with all template files. Please note:

The command will remove already existing reactive_html/prod folder
  1. npm install to install all dependencies/plugins
  2. npm run build.html to build html/js/css files. ( reactive_html/dev folder will be recreated)
  3. npm run serve.html to start the server in development mode
  4. Open you favorite browser and enter http://localhost:5555 in the browser address bar

Take a look into the reactive_html/dev folder to make your changes. At the end enter npm run serve.html.prod to create css/js bundles, minify the code and start the server in production mode. New reactive_html/prod folder will be generated with all template files. Please note:

The command will remove already existing reactive_html/prod folder

The template has built in server which will reload the browser automatically and is good for development purposes. In production you should be using a fully featured web server such as nginx, Apache, lighttpd, etc. Template code for production is located in the /reactive_html/prod folder.

File Structure

reactive-admin-template
Root Folder
src
Template source files for hbs/ts/scss version
assets
fonts
Template fonts
img
All images used in the template
scss
Scss styles
style.scss
Main scss file
...
Other scss files which are imported into style.scss
router
index.json
Used by handlebars to generate sidebar navigation and pages titles
partials
Handlebars partial blocks
scripts
Typescript code
modules
Modules imported into entry points
app.ts
Default entry point
...
Other entry points
...
Handlebars files which will be compiled into html pages by Gulp
reactive_html
html/js/css version
dev
html/js/css files for development
assets
fonts
Template fonts
img
All images used in the template
css
Css styles
style.css
Main css styles
plugin.css
Plugins css styles
scripts
Javascript code
modules
Modules imported into entry points
app.js
Default entry point
...
Other entry points
...
Html pages
prod
Compiled html/js/css files generated in production mode

HTML Structure

Scripts

Each feature or component has been written as a separate module and located in a separate file. The modules are imported into entry points. app.ts file ( app.js for html version) is the default entry point. Each page could have more than one entry points. You could control what modules to use and in which order from these files. Entry points should be placed in src/scripts ( reactive-html/dev/scripts for html version) folder. These entry points will be bundled as separate files in production. Consider checking the seed project to see how it works.

Reactive comes with several plugins written especially for this template from scratch. Here will be described the API documentation.
Please write to Our support if you want the other plugins to be documented too.

SidebarOptions
Option Name Type Default Description
animationSpeed number 400 Open/Close animation duration
defaultState string 'open' Sidebar default state
draggable boolean true If sidebar should be draggable with `touch` gestures
easingClose string 'easeOutCubic' Sidebar close easing
easingOpen string 'easeOutQuad' Sidebar open easing
position string 'left' Sidebar position (only left)
scroll boolean true If scroll should be enabled
scrollOptions PerfectScrollbarSettings {} Perfect Scrollbar Options
triggerState string 'compact' (open | compact | close) Sidebar trigger state
triggerStateIcon any {open: 'm-icon-arrow-right', close: 'm-icon-arrow-left', normal: 'm-icon-arrow' } Sidebar trigger button icon classes
type string 'push' - (push | slide) Sidebar type \
Events

All events are fired on 'sidebar' element

Event Name Description
sidebar-before-state-change Fires before sidebar changes state
sidebar-attach-handles Fires after sidebar init and after sidebar changes state
sidebar-after-scroll-init Fires after sidebar scroll is initialized
sidebar-state-changed Fires after sidebar state is changed
Methods
Sidebar public methods Params Description
Constructor sidebar: DOM Element or Selector
_options?: SidebarOptions
let sidebar = new Sidebar(sidebar: Element | string, _options?: SidebarOptions)
Create new sidebar
sidebar.init Initializes the sidebar instance
sidebar.setSidebarState change: boolean = false Change sidebar state if parameter is true or corrects it otherwise
sidebar.destroy Destroy sidebar and detach events
sidebar.state Getter - get state
sidebar.width Getter - get width
sidebar.type Getter - get type
MenuOptions
Option Name Type Default Description
animationSpeed number 400 SubMenu open/close animation duration
closeEasnig string 'easeOutQuad' SubMenu close easing
openEasnig string 'easeOutQuad' SubMenu open easing
triggerDelay number 2000 Scroll sidebar to the current link after specified milliseconds
triggerDuration number 800 Scroll animation duration
triggerScroll boolean true If sidebar should be scrolled to the current link
triggerScrollEasing string 'easeInOutQuad' Scroll easing to the current link
Methods

Menu Class Methods

Menu public methods Params Description
Constructor menu: string - Element Selector
_sidebar: Sidebar class instance
_options?: MenuOptions
let menu = new Menu(menu: string, _sidebar: Sidebar, _options?: MenuOptions)
Create new menu
menu.init Initializes the menu instance
Aside Class
let aside = new Aside(aside: Element | string, _options:AsideOptions).init();

Creates new Aside instance and manages it

# Please write to Our support if you want this to be documented too. Will be added within a day

Grid Class
let grid = new Grid(grid: HTMLElement, gridItems: GridItems[], gridStore: GridStore).init();

Creates Grid based on responsive grid structure

# Please write to Our support if you want this to be documented too. Will be added within a day

GridItem Class
let gridItem = new GridItem(gridItem: HTMLElement, id: number, panel: Panel).init()

Creates single Grid Item

# Please write to Our support if you want this to be documented too. Will be added within a day

GridStore Class
let gridStore = new GridStore(storageName: string, storage: Storage = window.loacalStorage).init()

Creates Grid Store where the grid items positions and sizes is saved and could be restored

# Please write to Our support if you want this to be documented too. Will be added within a day

Store Class

Manages Storage

# Please write to Our support if you want this to be documented too. Will be added within a day

Panel Class

let panel = new Panel(panel: HTMLElement).init();

Creates new panel

# Please write to Our support if you want this to be documented too. Will be added within a day

Picture Crop

Picture Crop functionality

# Please write to Our support if you want this to be documented too. Will be added within a day

Styles

For handlebars/scss/typescript version:

All styles in the template is written in Scss with a lot of variables. Each module/component has its own Scss file. All modules are imported into main style.scss file. Add your variables or change existing ones in custom.scss file which you could find in the src/assets/scss folder.

For html/css/js version:

Plugins and theme styles located in separate files during development. In production mode they will be concatenated and minified into one css file.

Handlebars

For handlebars/scss/typescript version:

The template is using Handlebar template engine to import/export/extend main blocks of html code, such as header, footer, aside, etc. There are several main layout blocks. Pages extend these layouts and import their content into them. You could find these layouts and other partials in the src/partials directory. The code is well documented but you can read more about how its is working under the hood here and here

Css Helpers

Class Name Style
Borders
.bw-* Border width. Available values: 1, 2, 3, 4.
.bw-1 (1px), .bw-2 (2px), .bw-3 (3px), .bw-4 (4px)
.blw-* Border left width. Available values: 1, 2, 3, 4
.brw-* Border right width. Available values: 1, 2, 3, 4
.btw-* Border top width. Available values: 1, 2, 3, 4
.bbw-* Border bottom width. Available values: 1, 2, 3, 4
.br-* Border Radius. Available values: 0, xs, sm, md, lg, xl, circle
.bs-solid Border style solid.
.bs-dashed Border style dashed.
.bs-dotted Border style dotted.
.bc-* Border Colors. Available values: See color palette
Clearfix
Close icon
Colors
.bgc-* Background and text color. Available values: See color palette
.c-* Text color. Available values: See color palette
Flexbox
Display property
Image replacement
Invisible content
Position
.pos-s Position static
.pos-a Position absolute
.pos-r Position relative
.pos-f Position fixed
Responsive helpers
Screenreaders
Sizing
.h-* Block Height. Available values: sm(6rem), md, lg
.mxw-* Block max width. Available values: 50(50px), 100, 150, 200, 300, 400, 500, 600
Spacing
Typography
.fs-1 Font Size 36px
.fs-2 Font Size 30px
.fs-3 Font Size 24px
.fs-4-plus Font Size 20px
.fs-4 Font Size 18px
.fs-5 Font Size 16px
.fs-6 Font Size 14px
.fs-6-plus Font Size 13px
.fs-7 Font Size 12px
.fs-7 Font Size 10px
.lh-* Line Height. Available values: 0, 1, 2, 3, 4, 5, 6, 7, 8
.text-indent Add text indent to a text block
.nowrap White space nowrap
.fw-* Font weight. Available values: light, normal, semibold, bold
Vertical align

Plugins

Name Description
Bootstrap Most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web
Bootstrap Table An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features
Bootstrap Timepicker Easily select a time for a text input using your mouse or keyboards arrow keys.
Bootstrap Touchspin A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.
Chart Js Simple yet flexible JavaScript charting for designers & developers
Checkbox A checkbox allows a user to select a value from a small set of options, often binary
Cropperjs JavaScript image cropper.
Dropdown A dropdown allows a user to select a value from a series of options
Dropzone Open source library that provides drag’n’drop file uploads with image previews.
Easy Pie Chart Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element
Font Awesome The iconic font and CSS toolkit
Fullcalendar A JavaScript event calendar. Customizable and open source.
Gridstack jQuery plugin for widget layout.
Hummerjs A javascript library for multi-touch gestures
Inputmask jQuery Input Mask plugin
Ion Rangeslider jQuery-pluginEasy, flexible and responsive range slider with skin support
Ionicons The premium icon font for Ionic Framework.
Jquery Fast, small, and feature-rich JavaScript library
Jquery Mapael Ease the build of pretty data visualizations on dynamic vector maps
Jquery Sparkline jQuery plugin to generate sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
Jqueryui A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
Moment Parse, validate, manipulate, and display dates and times in JavaScript.
Perfect Scrollbar Minimalistic but perfect custom scrollbar plugin
Simple Line Icons Simple and Minimal Line Icons
Spectrum Colorpicker The No Hassle JavaScript Colorpicker
Velocity An animation engine with the same API as jQuery's $.animate().
Waypoints Easiest way to trigger a function when you scroll to an element.
Weather Icons 215 Weather Themed Icons and CSS
X Editable This library allows you to create editable elements on your page

Support

Our support team is always ready and will kindly answer your questions.

Support Team
Our Contacts

License

Reactive Admin Template comes with two Standard licenses

Regular License Info

Regular license can be used for end products that do not charge users for access or service(access is free and there will be no monthly subscription fee).

Single regular license can be used for single end product and end product can be used by you or your client. If you want to sell end product to multiple clients then you will need to purchase separate license for each client. The same rule applies if you want to use the same end product on multiple domains(unique setup).

For more info on Themeforest Regular license you can check https://themeforest.net/licenses/terms/regular

Extended license Info

Extended license can be used for end products(web service or SAAS) that charges users for access or service(e.g: monthly subscription fee).

Single extended license can be used for single end product and end product can be used by you or your client. If you want to sell end product to multiple clients then you will need to purchase separate extended license for each client. The same rule applies if you want to use the same end product on multiple domains(unique setup).

For more info on Themeforest Extended licenses you can check https://themeforest.net/licenses/terms/extended

Changelog

Version 1.0.1 September 11, 2017
flexlayers © 2017