Materialart Admin
Introduction
Materialart is a popular open source WebApp template for admin dashboards and control panels. Materialart is fully responsive HTML template, which is based on modern responsive CSS framework based on Material Design by Google. It utilizes all of the Material components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Materialart is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.
We put a lot of love and effort to make Materialart a useful template for everyone and now It comes with 20 unique demos. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases. Once you purchased Materialart, you will be entitled to free download of all future updates for the same license.
- Author: Wrappixel / Nirav Joshi
- Contact: http://wrappixel.com/support/
- website: http://wrappixel.com/
NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules as it will help us to continue supporting our template and providing a free future updates.
Support does include:
- 1) Answering your questions or problems regarding the template.
- 2) Giving solution to the Bugs reported.
- 1) Custmaization Work
- 2) Any Installation Work
- 3) Support for any Third Party Plugins / Software
- 4) Support or Guide for How to integrate with any technologies (like, PHP, .net, Java etc)
- 5) Solve bug in your implemented template
Installation
This is the simple static HTML template so no need any headech to install it. just double click on any html (html/ltr/) file and you can access it.
Just simple steps to follow if you are using npm for package manager:
1) Install Node.js and NPM : You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js.
2) NPM Packages: You can do this by running npm install from the root of your project to install all the necessary dependencies.
Note: we recomonded you to please make your one own css file & one js files and add that in your page, so whenever the update of Materialart comes it does not affect your code.
For compiling scss & js:
We used gulp for compiling scss and js file so if you are also using scss then try our gulp task manager to compile scss
If you never work with gulp then you need to get starterd from here: https://github.com/gulpjs/gulp/blob/v3.9.1/docs/getting-started.md1. Install gulp globally:
If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.
$ npm install --global gulp-cli
2. Install gulp in your project devDependencies:$ npm install --save-dev gulp
3. We already created gulpfile.js at the root of the project: if you want any other task you can add that 4. Run gulp:$ gulp
How to Install npm dependencies?
In your root folder enter the following command to install the project dependencies: npm install, this command will install all the template libraries inside the node_modules folder, after that you need to run this command gulp copy to include dependencies in assets/libs folder.
Layout options
With the theme settings you can convert the theme into dark or light, you can change logo bg colors, sidebar bg color and also navbar bg colors, you can also make header and sidebar fixed, We have made Total 6 Color variation and you can create unlimited colors by changing variable colors from variable.scss. To modify settings you just need to open the app.init.js file and you can find the option like this:
You can find app.init.js file from here:
dist/js/app.init.js
Theme: false, // this can be true or false ( true means dark and false means light ),
Layout: 'vertical',
LogoBg: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid )
How to apply Dark Theme ?
For dark theme, you can change Theme:true in place of Theme:false.
Theme: true, // this can be true or false ( true means dark and false means light ),
How to apply Minisidebar(Collapse) Sidebar ?
For Collapse sidebar, you can change SidebarType: 'mini-sidebar' in place of SidebarType: 'full'.
SidebarType: 'mini-sidebar', // You can change it full / mini-sidebar / iconbar / overlay
How to apply Full Sidebar ?
For Full sidebar, you can change SidebarType: 'full'.
SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
How to apply Icon Sidebar ?
For Icon sidebar, you can change SidebarType: 'iconbar' in place of SidebarType: 'full'.
SidebarType: 'iconbar', // You can change it full / mini-sidebar / iconbar / overlay
How to apply Overlay Sidebar ?
For Overlay sidebar, you can change SidebarType: 'overlay' in place of SidebarType: 'full'.
SidebarType: 'overlay', // You can change it full / mini-sidebar / iconbar / overlay
How to apply Fixed Sidebar ?
For Fixed sidebar, you can change SidebarPosition: true, in place of SidebarPosition: false,.
SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
How to apply Fixed Header ?
For Fixed Header, you can change HeaderPosition: true, in place of HeaderPosition: false.
HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
How to apply Boxed Layout ?
For Boxed Layout, you can change BoxedLayout: true in place of BoxedLayout: false.
BoxedLayout: true, // it can be true / false ( true means Boxed and false means Fluid )
For the Horizontal Demo Version
You can find app.init.horizontal.js file from here:
dist/js/app.init.horizontal.js
For Horizontal sidebar, you can change Layout: 'horizontal'.
Theme: false, // this can be true or false ( true means dark and false means light ),
Layout: 'horizontal',
LogoBg: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: false, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: false, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: true, // it can be true / false ( true means Boxed and false means Fluid )
Color Variations
With the theme settings you can convert the theme into dark or light, you can change logo bg colors, sidebar bg color and also navbar bg colors, you can also make header and sidebar fixed, We have made Total 6 Color variation and you can create unlimited colors by changing variable colors from variable.scss. To modify settings you just need to open the app.init.js file and you can find the option like this:
Theme: false, // this can be true or false ( true means dark and false means light ),
Layout: 'vertical',
LogoBg: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
NavbarBg: 'skin6', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarType: 'full', // You can change it full / mini-sidebar / iconbar / overlay
SidebarColor: 'skin1', // You can change the Value to be skin1/skin2/skin3/skin4/skin5/skin6
SidebarPosition: true, // it can be true / false ( true means Fixed and false means absolute )
HeaderPosition: true, // it can be true / false ( true means Fixed and false means absolute )
BoxedLayout: false, // it can be true / false ( true means Boxed and false means Fluid )
How to apply Dark Theme ?
For dark theme, you can change Theme:true in place of Theme:false.
Theme: true, // this can be true or false ( true means dark and false means light ),
How to Change Sidebar Color?
To change a sidebar color, choose any of the following options.
To apply blue color of sidebar
SidebarColor: 'skin1' //To apply blue color of sidebar
To apply orange color of sidebar
SidebarColor: 'skin2' //To apply orange color of sidebar
To apply cyan color of sidebar
SidebarColor: 'skin3' //To apply cyan color of sidebar
To apply purple color of sidebar
SidebarColor: 'skin4' //To apply purple color of sidebar
To apply black color of sidebar
SidebarColor: 'skin5' //To apply black color of sidebar
To apply gray color of sidebar
SidebarColor: 'skin6' //To apply gray color of sidebar
How to Change Navbar Color?
To change a navbar color, choose any of the following options.
To apply blue color of navbar
NavbarBg: 'skin1' //To apply blue color of navbar
To apply orange color of navbar
NavbarBg: 'skin2' //To apply orange color of navbar
To apply cyan color of navbar
NavbarBg: 'skin3' //To apply cyan color of navbar
To apply purple color of navbar
NavbarBg: 'skin4' //To apply purple color of navbar
To apply black color of navbar
NavbarBg: 'skin5' //To apply black color of navbar
To apply gray color of navbar
NavbarBg: 'skin6' //To apply gray color of navbar
How to Change Logo Background Color?
To change a logo background color, choose any of the following options.
To apply blue background-color of logo
LogoBg: 'skin1' //To apply blue background-color of logo
To apply orange background-color of logo
LogoBg: 'skin2' //To apply orange background-color of logo
To apply cyan background-color of logo
LogoBg: 'skin3' //To apply cyan background-color of logo
To apply purple background-color of logo
LogoBg: 'skin4' //To apply purple background-color of logo
To apply black background-color of logo
LogoBg: 'skin5' //To apply black background-color of logo
To apply gray background-color of logo
LogoBg: 'skin6' //To apply gray background-color of logo
Folder Structure
we follow simple structure for the template
Materialart
|
|
|
|── html
| └── boxed/
| └── All HTML Files
|
| └── dark/
| └── All HTML Files
|
| └── horizontal/
| └── All HTML Files
|
| └── horizontal-fullwidth/
| └── All HTML Files
|
| └── iconbar/
| └── All HTML Files
|
| └── light-sidebar/
| └── All HTML Files
|
| └── ltr/
| └── All HTML Files
|
| └── mini-sidebar/
| └── All HTML Files
|
| └── overlay/
| └── All HTML Files
|
|── assets
| └── extra-libs/
| └── plugins which is not available on npm
|
| └── images/
| └── All Theme images
|
| └── libs/
| └── All Required plugins files
|
|── dist
| └── css/
| └── All css files
|
| └── js/
| └── All Js files
|
|── src
| └── scss/
| └── All scss files
|
|── package.json
|
|
|── gulpfile.js
|
|
|
└
Plugins (Find Js and CSS Path)
You can find plugins from here as per page requirements
Select Plugin
jQuery Block-UI
CSS Files
No CSS available
JavaScript Files
<script src="../../assets/libs/blockUI/jquery.blockUI.js" type="text/javascript"></script>
Bootstrap Colorpicker
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" />
JavaScript Files
<script src="../../assets/libs/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js" type="text/javascript"></script>
Bootstrap datepaginator
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-datepaginator/dist/bootstrap-datepaginator.min.css" />
JavaScript Files
<script src="../../assets/libs/bootstrap-datepaginator/dist/bootstrap-datepaginator.min.js" type="text/javascript"></script>
Bootstrap datepicker
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
JavaScript Files
<script src="../../assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
Bootstrap duallistbox
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-duallistbox/dist/bootstrap-duallistbox.min.css" />
JavaScript Files
<script src="../../assets/libs/bootstrap-duallistbox/dist/jquery.bootstrap-duallistbox.min.js" type="text/javascript"></script>
Bootstrap material datetimepicker
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css" />
JavaScript Files
<script src="../../assets/libs/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js" type="text/javascript"></script>
Bootstrap switch
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" />
JavaScript Files
<script src="../../assets/libs/bootstrap-switch/dist/js/bootstrap-switch.min.js" type="text/javascript"></script>
Bootstrap touchspin
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />
JavaScript Files
<script src="../../assets/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
chart-js
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/chart-js/dist/Chart.min.js" type="text/javascript"></script>
chartist
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/chartist/dist/chartist.min.css" />
JavaScript Files
<script src="../../assets/libs/chartist/dist/chartist.min.js" type="text/javascript"></script>
chartist-plugin-tooltips
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css" />
JavaScript Files
<script src="../../assets/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.min.js" type="text/javascript"></script>
ckeditor
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/ckeditor/samples/toolbarconfigurator/lib/codemirror/neo.css" />
<link rel="stylesheet" type="text/css" href="../../assets/libs/ckeditor/samples/css/samples.css" />
JavaScript Files
<script src="../../assets/libs/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src=" ../../assets/libs/ckeditor/samples/js/sample.js" type="text/javascript"></script>
clockpicker
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/clockpicker/dist/bootstrap-clockpicker.min.css" />
<link rel="stylesheet" type="text/css" href="../../assets/libs/clockpicker/dist/jquery-clockpicker.min.css" />
JavaScript Files
<script src="../../assets/libs/clockpicker/dist/bootstrap-clockpicker.min.js" type="text/javascript"></script>
<script src="../../assets/libs/clockpicker/dist/jquery-clockpicker.min.js" type="text/javascript"></script>
cropper
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/cropper/dist/cropper.min.css" />
JavaScript Files
<script src="../../assets/libs/cropper/dist/cropper.min.js" type="text/javascript"></script>
datatables
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/datatables/media/css/jquery.dataTables.min.css" />
JavaScript Files
<script src="../../assets/libs/datatables/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
daterangepicker
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/daterangepicker/daterangepicker.css" />
JavaScript Files
<script src="../../assets/libs/daterangepicker/daterangepicker.js" type="text/javascript"></script>
dragula
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/dragula/dist/dragula.min.css" />
JavaScript Files
<script src="../../assets/libs/dragula/dist/dragula.min.js" type="text/javascript"></script>
dropzone
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/dropzone/dist/dropzone.css" />
JavaScript Files
<script src="../../assets/libs/dropzone/dist/dropzone.js" type="text/javascript"></script>
echarts
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/echarts/dist/echarts.min.js" type="text/javascript"></script>
<script src="../../assets/libs/echarts/dist/echarts.simple.min.js" type="text/javascript"></script>
flot
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/flot/jquery.flot.js" type="text/javascript"></script>
<script src="../../assets/libs/flot/jquery.flot.pie.js" type="text/javascript"></script>
<script src="../../assets/libs/flot/jquery.flot.resize.js" type="text/javascript"></script>
footable
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/footable/css/footable.core.css" />
JavaScript Files
<script src="../../assets/libs/footable/dist/footable.min.js" type="text/javascript"></script>
footable
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/footable/css/footable.core.css" />
JavaScript Files
<script src="../../assets/libs/footable/dist/footable.min.js" type="text/javascript"></script>
fullcalendar
CSS Files
<link rel="stylesheet" type="text/css" href="../../assets/libs/fullcalendar/dist/fullcalendar.min.css" />
JavaScript Files
<script src="../../assets/libs/fullcalendar/dist/fullcalendar.min.js" type="text/javascript"></script>
gaugeJS
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/gaugeJS/dist/gauge.min.js" type="text/javascript"></script>
gmaps
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/gmaps/dist/gmaps.min.js" type="text/javascript"></script>
inputmask
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/inputmask/dist/min/jquery.inputmask.bundle.min.js" type="text/javascript"></script>
jquery
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/jquery/dist/jquery.min.js" type="text/javascript"></script>
jquery.flot.tooltip
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/jquery.flot.tooltip/js/jquery.flot.tooltip.min.js" type="text/javascript"></script>
jquery.repeater
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/jquery.repeater/js/jquery.repeater.min.js" type="text/javascript"></script>
jquery-asColor
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/jquery-asColor/js/jquery-asColor.min.js" type="text/javascript"></script>
jquery-asColorPicker
CSS Files
<script src="../../assets/libs/jquery-asColorPicker/dist/css/asColorPicker.min.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/jquery-asColorPicker/dist/jquery-asColorPicker.min.js" type="text/javascript"></script>
jquery-asGradient
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/jquery-asGradient/dist/jquery-asGradient.min.js" type="text/javascript"></script>
jquery-sessiontimeout
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/jquery-sessiontimeout/jquery.sessionTimeout.min.js" type="text/javascript"></script>
jquery-steps
CSS Files
<script src="../../assets/libs/jquery-steps/jquery.steps.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/jquery-steps/build/jquery.steps.min.js" type="text/javascript"></script>
jquery-validation
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
jsgrid
CSS Files
<script src="../../assets/libs/jsgrid/dist/jsgrid.min.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/jsgrid/dist/jsgrid.min.js" type="text/javascript"></script>
jvectormap
CSS Files
<script src="../../assets/libs/jvectormap/jquery-jvectormap.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/jvectormap/jquery-jvectormap.min.js" type="text/javascript"></script>
magnific-popup
CSS Files
<script src="../../assets/libs/magnific-popup/dist/magnific-popup.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/magnific-popup/dist/jquery.magnific-popup.min.js" type="text/javascript"></script>
masonry-layout
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/masonry-layout/dist/masonry.pkgd.min.js" type="text/javascript"></script>
moment
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/moment/moment.js" type="text/javascript"></script>
morris.js
CSS Files
<script src="../../assets/libs/morris.js/morris.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/morris.js/morris.min.js" type="text/javascript"></script>
nestable
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/nestable/jquery.nestable.js" type="text/javascript"></script>
perfect-scrollbar
CSS Files
<script src="../../assets/libs/perfect-scrollbar/css/perfect-scrollbar.min.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/perfect-scrollbar/js/perfect-scrollbar.min.js" type="text/javascript"></script>
pickadate
CSS Files
<script src="../../assets/libs/pickadate/lib/themes/default.css" type="text/javascript"></script>
<script src="../../assets/libs/pickadate/lib/themes/default.date.css" type="text/javascript"></script>
<script src="../../assets/libs/pickadate/lib/themes/default.time.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/pickadate/lib/picker.js" type="text/javascript"></script>
<script src="../../assets/libs/pickadate/lib/picker.date.js" type="text/javascript"></script>
<script src="../../assets/libs/pickadate/lib/picker.time.js" type="text/javascript"></script>
popper.js
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/popper.js/dist/popper.min.js" type="text/javascript"></script>
prism
CSS Files
<script src="../../assets/extra-libs/prism/prism.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/extra-libs/prism/prism.js" type="text/javascript"></script>
taskboard
CSS Files
<script src="../../assets/extra-libs/taskboard/css/lobilist.css" type="text/javascript"></script>
<script src="../../assets/extra-libs/taskboard/css/jquery-ui.min.css" type="text/javascript"></script>
<script src="../../assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/extra-libs/taskboard/js/lobilist.js" type="text/javascript"></script>
<script src="../../assets/extra-libs/taskboard/js/lobibox.min.js" type="text/javascript"></script>
<script src="../../assets/extra-libs/taskboard/js/task-init.js" type="text/javascript"></script>
treeview
CSS Files
<script src="../../assets/extra-libs/treeview/dist/bootstrap-treeview.min.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/extra-libs/treeview/dist/bootstrap-treeview.init.js" type="text/javascript"></script>
<script src="../../assets/extra-libs/treeview/dist/bootstrap-treeview.min.js" type="text/javascript"></script>
quill
CSS Files
<script src="../../assets/libs/quill/dist/quill.snow.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/quill/dist/quill.min.js" type="text/javascript"></script>
raphael
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/raphael/raphael.min.js" type="text/javascript"></script>
select2
CSS Files
<script src="../../assets/libs/select2/dist/css/select2.min.cssquot; type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/select2/dist/js/select2.min.js" type="text/javascript"></script>
summernote
CSS Files
<script src="../../assets/libs/summernote/dist/summernote.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/summernote/dist/summernote.min.js" type="text/javascript"></script>
sweetalert2
CSS Files
<script src="../../assets/libs/sweetalert2/dist/sweetalert2.min.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/sweetalert2/sweet-alert.init.js" type="text/javascript"></script>
<script src="../../assets/libs/sweetalert2/dist/sweetalert2.min.js" type="text/javascript"></script>
tablesaw
CSS Files
<script src="../../assets/libs/tablesaw/dist/tablesaw.css" type="text/javascript"></script>
JavaScript Files
<script src="../../assets/libs/tablesaw/dist/tablesaw.js" type="text/javascript"></script>
<script src="../../assets/libs/tablesaw/dist/tablesaw-init.js" type="text/javascript"></script>
tinymce
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/tinymce/tinymce.min.js" type="text/javascript"></script>
<script src="../../assets/libs/tinymce/jquery.tinymce.min.js" type="text/javascript"></script>
typeahead.js
CSS Files
css not available
JavaScript Files
<script src="../../assets/libs/typeahead.js/dist/typeahead.jquery.min.js" type="text/javascript"></script>
Page Structure
Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="16x16" href="">
<title>Materialart Demo</title>
<link href="../../dist/css/style.css" rel="stylesheet">
<!-- This page CSS -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Preloader (spinner)
This is for the loader when page load
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="loader">
<div class="loader__figure"></div>
<p class="loader__label">Materialart Admin</p>
</div>
</div>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
Logo
This is for Brand identity means logo - we have separated logo icon and logo text both dark and light version you can upload
<!-- ============================================================== -->
<!-- Logo you can find that scss in header.scss -->
<!-- ============================================================== -->
<a href="javascript:void(0)" class="brand-logo">
<span class="icon">
<img class="light-logo" src="../../assets/images/logo-light-icon.png">
<img class="dark-logo" src="../../assets/images/logo-icon.png">
</span>
<span class="text">
<img class="light-logo" src="../../assets/images/logo-light-text.png">
<img class="dark-logo" src="../../assets/images/logo-text.png">
</span>
</a>
<!-- ============================================================== -->
<!-- Logo you can find that scss in header.scss -->
<!-- ============================================================== -->
Left Sidebar
We have created leftsidebar with the following code.
<aside class="left-sidebar">
<ul id="slide-out" class="sidenav">
<li>
<div class="user-profile" style="background-image: url(../../assets/images/user-bg.jpg);">
<div class="user-name dropdown-trigger" data-target='dropdownuser'>
<h6 class="white-text name"><i class="material-icons m-r-10">account_circle</i> <span class="hidden">Steve Harvey</span> <i class="material-icons ml-auto hidden">expand_more</i></h6>
</div>
<ul id='dropdownuser' class='dropdown-content'>
<li><a href="#"><i class="material-icons">account_circle</i> My Profile</a></li>
<li><a href="#"><i class="material-icons">account_balance_wallet</i> My Balance</a></li>
<li><a href="#"><i class="material-icons">inbox</i> Inbox</a></li>
<li role="separator" class="divider m-t-0"></li>
<li><a href="#"><i class="material-icons">settings</i> Account Setting</a></li>
<li role="separator" class="divider m-t-0"></li>
<li><a href="#"><i class="material-icons">power_settings_new</i> Logout</a></li>
</ul>
</div>
</li>
<li>
<ul class="collapsible p-t-30">
<li>
<a href="index.html" class="collapsible-header"><i class="ti-loop"></i><span class="hide-menu">Back To Home</span></a>
</li>
<li>
<a class="collapsible-header has-arrow"><i class="material-icons">clear_all</i><span class="hide-menu">Multi Levels</span></a>
<div class="collapsible-body">
<ul class="collapsible" data-collapsible="accordion">
<li>
<a href="javascript:void(0)">
<i class="material-icons">grade</i>
<span class="hide-menu">Second level</span>
</a>
</li>
<li>
<a class="collapsible-header has-arrow">
<i class="material-icons">looks_two</i>
<span class="nav-text">Second level child</span>
</a>
<div class="collapsible-body">
<ul class="collapsible" data-collapsible="accordion">
<li>
<a href="javascript:void(0)">
<i class="material-icons">grade</i>
<span class="hide-menu">Third level</span>
</a>
</li>
<li>
<a class="collapsible-header has-arrow">
<i class="material-icons">looks_3</i>
<span class="hide-menu">Third level child</span>
</a>
<div class="collapsible-body">
<ul class="collapsible" data-collapsible="accordion">
<li>
<a href="javascript:void(0)">
<i class="material-icons">grade</i>
<span class="hide-menu">Forth level</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="material-icons">grade</i>
<span class="hide-menu">Forth level</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</aside>
Page Content, Right Sidebar and Footer
Below is the code for the page content wrapper, you can start your content here
<!-- ============================================================== -->
<!-- Right Sidebar -->
<!-- ============================================================== -->
<a href="#" data-target="right-slide-out" class="sidenav-trigger right-side-toggle btn-floating btn-large waves-effect waves-light red"><i class="material-icons">settings</i></a>
<aside class="right-sidebar">
<!-- Right Sidebar -->
<ul id="right-slide-out" class="sidenav right-sidenav p-t-10">
<li>
<div class="row">
<div class="col s12">
<!-- Tabs -->
<ul class="tabs">
<li class="tab col s4"><a href="#settings" class="active"><span class="material-icons">build</span></a></li>
<li class="tab col s4"><a href="#chat"><span class="material-icons">chat_bubble</span></a></li>
<li class="tab col s4"><a href="#activity"><span class="material-icons">local_activity</span></a></li>
</ul>
<!-- Tabs -->
</div>
<!-- Setting -->
<div id="settings" class="col s12">
<div class="m-t-10 p-10 b-b">
<h6 class="font-medium">Layout Settings</h6>
<ul class="m-t-15">
<li class="m-b-10">
<label>
<input type="checkbox" name="theme-view" id="theme-view" />
<span>Dark Theme</span>
</label>
</li>
<li class="m-b-10">
<label>
<input type="checkbox" class="nav-toggle" name="collapssidebar" id="collapssidebar" />
<span>Collapse Sidebar</span>
</label>
</li>
<li class="m-b-10">
<label>
<input type="checkbox" name="sidebar-position" id="sidebar-position" />
<span>Fixed Sidebar</span>
</label>
</li>
<li class="m-b-10">
<label>
<input type="checkbox" name="header-position" id="header-position" />
<span>Fixed Header</span>
</label>
</li>
<li class="m-b-10">
<label>
<input type="checkbox" name="boxed-layout" id="boxed-layout" />
<span>Boxed Layout</span>
</label>
</li>
</ul>
</div>
<div class="p-10 b-b">
<!-- Logo BG -->
<h6 class="font-medium">Logo Backgrounds</h6>
<ul class="m-t-15 theme-color">
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-logobg="skin1"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-logobg="skin2"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-logobg="skin3"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-logobg="skin4"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-logobg="skin5"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-logobg="skin6"></a>
</li>
</ul>
<!-- Logo BG -->
</div>
<div class="p-10 b-b">
<!-- Navbar BG -->
<h6 class="font-medium">Navbar Backgrounds</h6>
<ul class="m-t-15 theme-color">
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-navbarbg="skin1"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-navbarbg="skin2"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-navbarbg="skin3"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-navbarbg="skin4"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-navbarbg="skin5"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-navbarbg="skin6"></a>
</li>
</ul>
<!-- Navbar BG -->
</div>
<div class="p-10 b-b">
<!-- Logo BG -->
<h6 class="font-medium">Sidebar Backgrounds</h6>
<ul class="m-t-15 theme-color">
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin1"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin2"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin3"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin4"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin5"></a>
</li>
<li class="theme-item">
<a href="javascript:void(0)" class="theme-link" data-sidebarbg="skin6"></a>
</li>
</ul>
<!-- Logo BG -->
</div>
</div>
<!-- chat -->
<div id="chat" class="col s12">
<ul class="mailbox m-t-20">
<li>
<div class="message-center">
<!-- Message -->
<a href="#" class="user-info" id='chat_user_1' data-user-id='1'>
<span class="user-img">
<img src="../../assets/images/users/1.jpg" alt="user" class="circle">
<span class="profile-status online pull-right" data-status="online"></span>
</span>
<span class="mail-contnet">
<h5>Chris Evans</h5>
<span class="mail-desc">Just see the my admin!</span>
<span class="time">9:30 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_2' data-user-id='2'>
<span class="user-img">
<img src="../../assets/images/users/2.jpg" alt="user" class="circle">
<span class="profile-status busy pull-right" data-status="busy"></span>
</span>
<span class="mail-contnet">
<h5>Ray Hudson</h5>
<span class="mail-desc">I've sung a song! See you at</span>
<span class="time">9:10 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_3' data-user-id='3'>
<span class="user-img">
<img src="../../assets/images/users/3.jpg" alt="user" class="circle">
<span class="profile-status away pull-right" data-status="away"></span>
</span>
<span class="mail-contnet">
<h5>Lb James</h5>
<span class="mail-desc">I am a singer!</span>
<span class="time">9:08 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_4' data-user-id='4'>
<span class="user-img">
<img src="../../assets/images/users/4.jpg" alt="user" class="circle">
<span class="profile-status offline pull-right" data-status="offline"></span>
</span>
<span class="mail-contnet">
<h5>Don Andres</h5>
<span class="mail-desc">Just see the my admin!</span>
<span class="time">9:02 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_5' data-user-id='5'>
<span class="user-img">
<img src="../../assets/images/users/1.jpg" alt="user" class="circle">
<span class="profile-status online pull-right" data-status="online"></span>
</span>
<span class="mail-contnet">
<h5>Chris Evans</h5>
<span class="mail-desc">Just see the my admin!</span>
<span class="time">9:30 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_6' data-user-id='6'>
<span class="user-img">
<img src="../../assets/images/users/2.jpg" alt="user" class="circle">
<span class="profile-status busy pull-right" data-status="busy"></span>
</span>
<span class="mail-contnet">
<h5>Ray Hudson</h5>
<span class="mail-desc">I've sung a song! See you at</span>
<span class="time">9:10 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_7' data-user-id='7'>
<span class="user-img">
<img src="../../assets/images/users/3.jpg" alt="user" class="circle">
<span class="profile-status away pull-right" data-status="away"></span>
</span>
<span class="mail-contnet">
<h5>Lb James</h5>
<span class="mail-desc">I am a singer!</span>
<span class="time">9:08 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_8' data-user-id='8'>
<span class="user-img">
<img src="../../assets/images/users/4.jpg" alt="user" class="circle">
<span class="profile-status offline pull-right" data-status="offline"></span>
</span>
<span class="mail-contnet">
<h5>Don Andres</h5>
<span class="mail-desc">Just see the my admin!</span>
<span class="time">9:02 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_9' data-user-id='9'>
<span class="user-img">
<img src="../../assets/images/users/1.jpg" alt="user" class="circle">
<span class="profile-status online pull-right" data-status="online"></span>
</span>
<span class="mail-contnet">
<h5>Chris Evans</h5>
<span class="mail-desc">Just see the my admin!</span>
<span class="time">9:30 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_10' data-user-id='10'>
<span class="user-img">
<img src="../../assets/images/users/2.jpg" alt="user" class="circle">
<span class="profile-status busy pull-right" data-status="busy"></span>
</span>
<span class="mail-contnet">
<h5>Ray Hudson</h5>
<span class="mail-desc">I've sung a song! See you at</span>
<span class="time">9:10 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_11' data-user-id='11'>
<span class="user-img">
<img src="../../assets/images/users/3.jpg" alt="user" class="circle">
<span class="profile-status away pull-right" data-status="away"></span>
</span>
<span class="mail-contnet">
<h5>Lb James</h5>
<span class="mail-desc">I am a singer!</span>
<span class="time">9:08 AM</span>
</span>
</a>
<!-- Message -->
<a href="#" class="user-info" id='chat_user_12' data-user-id='12'>
<span class="user-img">
<img src="../../assets/images/users/4.jpg" alt="user" class="circle">
<span class="profile-status offline pull-right" data-status="offline"></span>
</span>
<span class="mail-contnet">
<h5>Don Andres</h5>
<span class="mail-desc">Just see the my admin!</span>
<span class="time">9:02 AM</span>
</span>
</a>
</div>
</li>
</ul>
</div>
<!-- Activity -->
<div id="activity" class="col s12">
<div class="m-t-10 p-10">
<h6 class="font-medium">Activity Timeline</h6>
<div class="steamline">
<div class="sl-item">
<div class="sl-left green"> <i class="ti-user"></i></div>
<div class="sl-right">
<div class="font-medium">Meeting today <span class="sl-date"> 5pm</span></div>
<div class="desc">you can write anything </div>
</div>
</div>
<div class="sl-item">
<div class="sl-left blue"><i class="fa fa-image"></i></div>
<div class="sl-right">
<div class="font-medium">Send documents to Clark</div>
<div class="desc">Lorem Ipsum is simply </div>
</div>
</div>
<div class="sl-item">
<div class="sl-left"> <img class="circle" alt="user" src="../../assets/images/users/2.jpg"> </div>
<div class="sl-right">
<div class="font-medium">Go to the Doctor <span class="sl-date">5 minutes ago</span></div>
<div class="desc">Contrary to popular belief</div>
</div>
</div>
<div class="sl-item">
<div class="sl-left"> <img class="circle" alt="user" src="../../assets/images/users/1.jpg"> </div>
<div class="sl-right">
<div><a href="javascript:void(0)">Stephen</a> <span class="sl-date">5 minutes ago</span></div>
<div class="desc">Approve meeting with tiger</div>
</div>
</div>
<div class="sl-item">
<div class="sl-left teal"> <i class="ti-user"></i></div>
<div class="sl-right">
<div class="font-medium">Meeting today <span class="sl-date"> 5pm</span></div>
<div class="desc">you can write anything </div>
</div>
</div>
<div class="sl-item">
<div class="sl-left purple"><i class="fa fa-image"></i></div>
<div class="sl-right">
<div class="font-medium">Send documents to Clark</div>
<div class="desc">Lorem Ipsum is simply </div>
</div>
</div>
<div class="sl-item">
<div class="sl-left"> <img class="circle" alt="user" src="../../assets/images/users/4.jpg"> </div>
<div class="sl-right">
<div class="font-medium">Go to the Doctor <span class="sl-date">5 minutes ago</span></div>
<div class="desc">Contrary to popular belief</div>
</div>
</div>
<div class="sl-item">
<div class="sl-left"> <img class="circle" alt="user" src="../../assets/images/users/6.jpg"> </div>
<div class="sl-right">
<div><a href="javascript:void(0)">Stephen</a> <span class="sl-date">5 minutes ago</span></div>
<div class="desc">Approve meeting with tiger</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</aside>
<div class="chat-windows "></div>
<!-- ============================================================== -->
<!-- Right Sidebar -->
<!-- ============================================================== -->
Settings in custom js
Below js code is used for theme setting , fix header , toggle sidebar and right sidebar open close.
// jQuery
$(function() {
"use strict";
$(function() {
$(".preloader").fadeOut();
});
$('.sidenav').sidenav();
$(".dropdown-trigger").dropdown({
alignment: 'right',
coverTrigger: false,
hover: false,
closeOnClick: false
});
$('.collapsible').collapsible();
$("body").trigger("resize");
// ==============================================================
// This is for the top header part and sidebar part
// ==============================================================
var set = function() {
var width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width;
var topOffset = 75;
if (width < 1170) {
//$("#main-wrapper").addClass("mini-sidebar");
$('#topsubnav').sidenav({
onOpenStart: function() {
$('body').addClass('overlay');
},
onCloseStart: function() {
$('body').removeClass('overlay');
}
});
} else {
//$("#main-wrapper").removeClass("mini-sidebar");
}
};
$(window).ready(set);
$(window).on("resize", set);
// ==============================================================
// active menu js
// ==============================================================
$(function() {
var url = window.location;
var element = $('ul.collapsible a').filter(function() {
return this.href == url;
}).addClass('active').parent().addClass('active');
while (true) {
if (element.is('li')) {
element = element.parent().parent().css({
"display": "block"
}).parent().addClass('active');
} else {
break;
}
}
});
$(".sidebar-toggle").on('click', function() {
$("#main-wrapper").toggleClass("show-sidebar");
});
// ==============================================================
// Right Sidebar
// ==============================================================
$('.right-sidenav').sidenav({
edge: 'right',
onOpenStart: function() {
$('.chat-windows').addClass('show-chat');
$('.chat-windows').removeClass('hide-chat');
},
onCloseStart: function() {
$('.chat-windows').addClass('hide-chat');
$('.chat-windows').removeClass('show-chat');
}
});
});
How to change Font Family
You can change fonts globally as per your requirements, for that need to change in variable.scss file. you will find these file from here:
src/scss/variable.scss
We have used google fonts for the template you can change whatever font you wish
// Variables
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800');
$font-family-sans-serif: 'Nunito Sans', sans-serif !default;
scss & css
Our Template is based on scss and we import all the file into style.css you can simply edit any scss and compile it
//This is the core files
@import 'variable';
@import "components/color-classes";
@import 'materialize';
//This is for the icons
@import 'icons/font-awesome/css/fontawesome-all.css';
@import 'icons/simple-line-icons/css/simple-line-icons.css';
@import 'icons/weather-icons/css/weather-icons.min.css';
@import 'icons/themify-icons/themify-icons.css';
@import 'icons/flag-icon-css/flag-icon.min.css';
@import 'core/animation';
@import 'core/app';
@import 'core/header';
@import 'core/sidebar';
@import 'core/right-sidebar';
@import 'core/chat';
@import 'core/layout';
@import "core/spinner";
//Theme colors
@import 'theme-colors/theme-colors';
@import 'theme-colors/dark-theme';
// All the widgets scss
@import 'widgets/widgets';
//This is for the horizontal version (if you are not using horizontal version you can remove this)
@import 'horizontal/horizontal';
@import 'core/perfect-scrollbar';
@import 'core/scafholding';
@import 'core/component';
@import 'core/other-common';
@import 'responsive';
Note: we recomonded you to please make your one own css and one own js files and add that in your page, so whenever the update of Materialart comes it does not affect your code.
Grid Options
See how aspects of the Material grid system work across multiple devices with a handy table. check the official website grid page
| # | Mobile Devices <= 600px |
Tablet Devices > 600px |
Desktop Devices > 992px |
Large Desktop Devices > 1200px |
|---|---|---|---|---|
| Class Prefix | .s |
.m |
.l |
.xl |
| Container Width | 90% | 85% | 70% | 70% |
| Number of Columns | 12 | 12 | 12 | 12 |
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col m class to an element will not only affect its styling on medium devices but also on large devices if a .col l class is not present.
Card
Below is the basic card structure.
<div class="card">
<div class="card-content">
<h5 class="card-title">Starter Page</h5>
<p>This is a starter page.</p>
</div>
</div>
Icons
Below is the table of icon fonts used in this template.
| Icon Name | Example |
|---|---|
| Crypto Icons | <i class="cc icon-name"></i> |
| Font-awesome | <i class="fa fa-icon-name"></i> |
| Material Icons | <i class="mdi mdi-icon-name"></i> |
| Simple Line Icons | <i class="icon-name_of_icon"></i> |
| Themify Icons | <i class="ti-icon-name"></i> |
| Weather Icons | <i class="wi wi-icon-name"></i> |
| Flag Icons | <i class="flag-icon flsg-icon-country-name"></i> |
Buttons
Below is the general buttons.
button button button button button button
<a class="waves-effect waves-light btn red">button</a>
<a class="waves-effect waves-light btn blue">button</a>
<a class="waves-effect waves-light btn green">button</a>
<a class="waves-effect waves-light btn purple">button</a>
<a class="waves-effect waves-light btn indigo">button</a>
<a class="waves-effect waves-light btn orange">button</a>
Charts
Below is the table of pages which includes charts and where you can find the script related to it.
| Page | Where to find it's JS | Where to find it's CSS |
|---|---|---|
| chart-morris.html | ../../assets/libs/morris.js/morris.min.js |
../../assets/libs/morris.js/morris.css |
| chart-chart-js.html | ../../assets/libs/Chart.js/dist/Chart.min.js |
No CSS Available |
| chart-sparkline.html | ../../assets/extra-libs/sparkline/sparkline.js |
No CSS Available |
| chart-chartist.html | ../../assets/libs/chartist/dist/chartist.min.js |
../../assets/libs/chartist/dist/chartist.min.css |
| chart-knob.html | ../../assets/extra-libs/knob/jquery.knob.min.js |
No CSS Available |
| c3-chart-axis.html | ../../assets/extra-libs/c3/c3.min.js |
../../assets/extra-libs/c3/c3.min.css |
| c3-chart-bar.html | ../../assets/extra-libs/c3/c3.min.js |
../../assets/extra-libs/c3/c3.min.css |
| c3-chart-line.html | ../../assets/extra-libs/c3/c3.min.js |
../../assets/extra-libs/c3/c3.min.css |
| c3-chart-data.html | ../../assets/extra-libs/c3/c3.min.js |
../../assets/extra-libs/c3/c3.min.css |
| chart-echart-basic.html | ../../assets/libs/echarts/dist/echarts-en.min.js |
No CSS Available |
| chart-echart-bar.html | ../../assets/libs/echarts/dist/echarts-en.min.js |
No CSS Available |
| chart-echart-pie-doughnut.html | ../../assets/libs/echarts/dist/echarts-en.min.js |
No CSS Available |
Form
Below is the basic form structure.
<form>
<div class="row">
<div class="input-field col s12">
<input id="name" type="text">
<label for="name">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="message" class="materialize-textarea"></textarea>
<label for="message">Message</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<button class="btn cyan waves-effect waves-light right" type="submit" name="action">Submit
</button>
</div>
</div>
</form>
Table
Below is the basic table structure.
<table>
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
Js Files
| File | Description |
|---|---|
custom.js, custom.min.js |
This is a main function js file. it contain sidebar and other basic js |
app.js |
This is for setting plugin for the theme customizer. |
app.init.js |
You can modify the settings though this. |
app-style-switcher.js |
It contains the customizer functions apply to the theme by clicking on customizer panel. |
app.init.horizontal.js |
You can modify the settings of horizontal demo. |
app-style-switcher.horizontal.js |
It contains the customizer functions apply to the horizontal theme by clicking on customizer panel. |
waves.js |
This is for wave effects on buttons and other elements |
perfect-scrollbar.jquery.min.js |
This is for scroll. |
dashboard1.js to dashboard5.js |
This is for all dashboards setting. |
Credits to the third party Plugins
For more details (customizations) you can find third party app from here:
Free support
If you have any type of query or support needed, please open a support ticket here: wrappixel.com/support/
Thank you