Overview

*This section covers the jQuery Full and Seed Version.

MaterialWrap is a full feature Material Design inspired Admin Theme based on Bootstrap. This theme comes packed with lots of UI components, elements, and interactions. It was designed to be extremely flexible in terms of layouts and design to make this one of the most multi-functional Admin themes on the market.

If you have any questions that are beyond the scope of this documentation, please feel free to email us.

Getting Started

What you need to get started customizing MaterialWrap.

Node.js - is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

npm - stands for node packaged modules and is a way to manage development dependencies through Node.js.

Git - is a version control system. (We only need Git to install Bower).

Bower - is dependency management tool.

Gulp - is a toolkit for automating painful or time-consuming tasks in your development workflow.

Configure Setup

Installing Build Tools

  1. Node.js: First you'll need to download and install node.js which also includes npm.
    Download Node.js https://nodejs.org/
  2. Git: Bower needs Git to work so first install Git if you don't have it.
    Download Git http://git-scm.com/download
  3. Bower: Now that you have Git installed open a terminal window and run this command to install Bower globally npm install -g bower
  4. Gulp: To automate and enhance your workflow we'll install Gulp. Open a terminal window and run this command npm install --global gulp-cli

Installing packages

With your build tools installed you're now ready to install our project packages.

  1. First open your terminal window and navigate into our app directory of the MaterialWrap download package.
  2. Next run this command in your terminal window npm install This will generate a node_modules folder inside the app directory folder.
  3. Then run bower install This will generate a bower_components folder inside the app directory folder.

Starting your local web server

With your project packages installed you're now ready to start your web server. For your convenience we've added Express as part of the package install to run as a web server on your local computer.

  1. Open your terminal window and navigate into our app directory of the MaterialWrap download package.
  2. To start your web server run this command node server
  3. Then open a browser window and navigate to http://localhost:5000

Working with Webpack & Gulp

We use Webpack and Gulp to bundle our CSS and JavaScript files. Once you're ready to begin customizing MaterialWrap be sure to have these running in the background. This way any changes you make will automatically be added to the bundle files and placed in to dist folder.

During development run this command for webpack webpack -w and this command in a separate terminal window for gulp gulp

PLESE NOTE: Remember to run these commands while inside the app directory of the MaterialWrap download package.

Folder Structure

Now lets take a look at the project folder organization structure:


1.  +-- app/
2.  | +-- bower_components/
3.  | +-- js/
4.  | +-- node_modules/
5.  | +-- sass/
6.  | +-- .bowerrc
7.  | +-- bower.json
8.  | +-- gulpfile.js
9.  | +-- package.json
10. | +-- server.js
11. | +-- vendor.json
12. | +-- webpack.config.json
13. +-- dist/
14. | +-- assets/
15. | | +-- css/
16. | | +-- data/
17. | | +-- file/
18. | | +-- fonts/
19. | | +-- img/
20. | | +-- js/
21. | | +-- media/
22. | | +-- partials/
23. | +-- *.html

Main Folders

app
This folder contains the source files. These are not the files to deploy to your server. Any customization or changes to the source code will made here and will be compiled into the dist folder.

dist
This folder contains the compiled files. These are the files you will want to deploy to your server.

Template Structure

App Layout

  • Full Width
  • Boxed

Page Layouts

  • Full Width Layouts
    • Full Width v1
    • Full Width v2
    • Full Width v3
  • Boxed Layouts
    • Boxed Layout v1
    • Boxed Layout v2
    • Boxed Layout v3
  • Left Side Navigation
    • Left Side Nav v1
    • Left Side Nav v2
  • Right Side Navigation
    • Right Side Nav v1
    • Right Side Nav v2

Full Width Layout v1

<div id="content_wrapper" class="card-overlay">
		        <div id="header_wrapper" class="header-md">
		            <div class="container-fluid">
		                <div class="row">
		                    <div class="col-xs-12">
		                        <header id="header">
		                            <!-- #Header Title -->
		                        </header>
		                    </div>
		                </div>
		            </div>
		        </div>

		        <div id="content" class="container-fluid">
		            <div class="row">
		                <div class="col-xs-12">
		                    <div class="card">
		                        <div class="card-body">
		                        <!-- #Main Content Area -->
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		

Full Width Layout v2

<div id="content_wrapper" class="simple">
		    <div id="header_wrapper" class="header-sm">
		        <div class="container-fluid">
		            <div class="row">
		                <div class="col-xs-12">
		                    <header id="header">
		                            <!-- #Header Title -->
		                    </header>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div id="content" class="container-fluid m-t-0">
		        <div class="row">
		            <div class="col-xs-12">
		                <div class="content">
		                    <!-- #Main Content Area -->
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		

Full Width Layout v3

<div id="content_wrapper">
		    <div id="header_wrapper" class="header-sm ">
		        <div class="container-fluid">
		            <div class="row">
		                <div class="col-xs-12">
		                    <header id="header">
		                        <!-- #Header Title -->
		                    </header>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div class="tabpanel tab-header">
		        <ul class="nav nav-tabs scrollable p-l-10">
		            <li class="active" role="presentation"><a href="#tab-one" data-toggle="tab">Tab One</a></li>
		            <li role="presentation"><a href="#tab-two" data-toggle="tab">Tab Two</a></li>
		            <li role="presentation"><a href="#tab-three" data-toggle="tab">Tab Three</a></li>
		        </ul>
		    </div>
		    <div id="content" class="container-fluid">
		        <div id="tabbed_content" class="tab-content">
		            <div class="tab-pane fade active in" id="tab-one">
		                <div class="row">
		                    <div class="col-xs-12">
		                        <div class="content">
		                            <div class="content-body m-t-30">
		                                <!-- #Main Content Area 1 -->
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		            <div class="tab-pane fade" id="tab-two">
		                <div class="row">
		                    <div class="col-xs-12">
		                        <div class="content">
		                            <div class="content-body m-t-30">
		                                <!-- #Main Content Area 2 -->
		                        </div>
		                    </div>
		                </div>
		            </div>
		            <div class="tab-pane fade" id="tab-three">
		                <div class="row">
		                    <div class="col-xs-12">
		                        <div class="content">
		                            <div class="content-body m-t-30">
		                            <!-- #Main Content Area 3 -->
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		</div>
		

Boxed Layout v1

<div id="content_wrapper" class="card-overlay">
		    <div id="header_wrapper" class="header-md">
		        <div class="container">
		            <div class="row">
		                <div class="col-xs-12">
		                    <header id="header">
		           <!-- #Header Title -->
		                    </header>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div id="content" class="container">
		        <div class="row">
		            <div class="col-xs-12">
		                <div class="card">
		                    <header class="card-heading ">
		                    <!-- #Secondary Header Title -->
		                    </header>
		                    <div class="card-body">
		                    <!-- #Main Content Area -->
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		

Boxed Layout v2

<div id="content_wrapper" class="simple">
		    <div id="header_wrapper" class="header-sm">
		        <div class="container-fluid">
		            <div class="row">
		                <div class="col-xs-12">
		                    <header id="header">
		                <!-- #Header Title -->
		                    </header>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div id="content" class="container">
		        <div class="row">
		            <div class="col-xs-12">
		                <div class="card">
		                    <header class="card-heading ">
		                    <!-- #Secondary Header Title -->
		                    </header>
		                    <div class="card-body">
		                    <!-- #Main Content Area -->
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		

Boxed Layout v3

<div id="content_wrapper" class="card-overlay">
		    <div id="header_wrapper" class="header-md">
		        <div class="container">
		            <div class="row">
		                <div class="col-xs-12">
		                    <header id="header">
		            <!-- #Header Title -->
		                    </header>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div id="content" class="container">
		        <div id="content_type" class="boxed-leftnav card drawer">
		            <div id="leftnav">
		                <div class="card">
		                    <header class="card-heading border-bottom">
		               <!-- #Chat Title -->
		                    </header>
		                    <div class="card-body">
		                    </div>
		                </div>
		            </div>
		            <div class="content-body">
		                <div class="card">
		                    <header class="card-heading">
		           <!-- #Secondary Chat Title -->
		                    </header>
		                    <div class="card-body mw-lightGray scrollbar">
		                    <!-- #Comment Area-->
		                    </div>
		                    <div class="card-footer p-10">
		                        <ul class="card-actions icons left-bottom">
		                            <li>
		                                <a href="javascript:void(0)">
		                                    <i class="zmdi zmdi-attachment-alt"></i>
		                                </a>
		                            </li>
		                            <li>
		                                <a href="javascript:void(0)">
		                                    <i class="zmdi zmdi-mood"></i>
		                                </a>
		                            </li>
		                        </ul>
		                        <!-- #Comment Input Area-->
		                        <div class="form-group m-10 p-0 p-l-75 is-empty">
		                            <div class="input-group">
		                                <label class="sr-only">Leave a comment...</label>
		                                <input type="text" class="form-control form-rounded input-lightGray" placeholder="Leave a comment..">
		                                <span class="input-group-btn">
		                                    <button type="button" class="btn btn-blue btn-fab animate-fab btn-fab-sm">
		                                        <i class="zmdi zmdi-mail-send"></i>
		                                    </button>
		                                </span>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		             <!-- #Chat slide out menu -->
		            <div class="card card-off-canvas">
		                <header class="card-heading alt-heading">
		                    <div class="profile">
		                        <h4 class="card-title"> Title </h4>
		                    </div>
		                        <a href="javascript:void(0)" class="info"><span>username@materialwrap.com</span></a>
		                    </header>
		                    <div class="card-body p-0">
		                        <nav class="submenu">
		                            <ul>
		                                <li>
		                                    <a href="javascript:void(0)"><i class="zmdi zmdi-account"></i><span class="p-l-20">Link</a>
		                                </li>
		                                </ul>
		                            </nav>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		

Left Side Nav v1

<div id="content_wrapper" class="simple leftnav_v2">
		    <div id="header_wrapper" class="header-sm">
		        <div class="container-fluid">
		            <div class="row">
		                <div class="col-xs-12">
		                    <header id="header">
		                    <!-- #Header title -->
		                        <h1>Page Title</h1>
		                    </header>
		                </div>
		            </div>
		        </div>
		        <!-- #Open Sidebar Menu on Mobile -->
		        <ul class="card-actions icons lg alt-actions left-top">
		            <li>
		                <a href="javascript:void(0)" class="drawer-trigger" data-drawer="open-left">
		                    <i class="zmdi zmdi-menu"></i>
		                </a>
		            </li>
		        </ul>
		    </div>
		    <div id="content" class="container-fluid">
		        <div id="content_type" class="leftnav_v2">
		            <div class="content-body">
		                <div class="row">
		                    <div class="col-xs-2 leftnav-col-wrapper">
		                    <!-- #Sidebar Menu-->
		                        <aside id="leftnav" class="scrollbar">
		                            <div class="card alt-card">
		                                <header class="card-heading">
		                                <!-- #Sidebar Menu Title-->
		                                    <h2 class="card-title">Sidebar Header</h2>
		                                </header>
		                                <div class="card-body">
		                                    <ul class="nav nav-pills nav-stacked" role="tablist">
		                                        <li role="presentation" class="active"><a href="#sidenav1" aria-controls="sidenav1" role="tab" data-toggle="tab">Sidenav item 1</a></li>
		                                        <li role="presentation"><a href="#sidenav2" aria-controls="sidenav2" role="tab" data-toggle="tab">Sidenav item 2</a></li>
		                                        <li role="presentation"><a href="#sidenav3" aria-controls="sidenav3" role="tab" data-toggle="tab">Sidenav item 3</a></li>
		                                    </ul>
		                                </div>
		                            </div>
		                        </aside>
		                    </div>
		                    <div class="col-xs-10 content-col-wrapper">
		                        <div class="row">
		                            <div class="col-xs-12" role="main">
		                                <!-- #Tab panes -->
		                                <div class="tab-content">
		                                    <section role="tabpanel" class="tab-pane active" id="sidenav1">
		                                        <div class="card">
		                                            <header class="card-heading">
		                                            <!-- #Card Title 1-->
		                                                <h2 class="card-title">Card Title 1</h2>
		                                            </header>
		                                            <div class="card-body">
		                                                <!-- #Main Content Area 1 -->
		                                            </div>
		                                        </div>
		                                    </section>
		                                    <section role="tabpanel" class="tab-pane" id="sidenav2">
		                                        <div class="card">
		                                            <header class="card-heading">
		                                            <!-- #Card Title 2-->
		                                                <h2 class="card-title">Card Title 2</h2>
		                                            </header>
		                                            <div class="card-body">
		                                                <!-- #Main Content Area 2 -->
		                                            </div>
		                                        </div>
		                                    </section>
		                                    <section role="tabpanel" class="tab-pane" id="sidenav3">
		                                        <div class="card">
		                                            <header class="card-heading">
		                                            <!-- #Card Title 3-->
		                                                <h2 class="card-title">Card Title 3</h2>
		                                            </header>
		                                            <div class="card-body">
		                                                <!-- #Main Content Area 3 -->
		                                            </div>
		                                        </div>
		                                    </section>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		

Left Side Nav v2

<div id="content_wrapper" class="leftnav_v2">
		    <div id="header_wrapper" class="header-sm">
		    <!-- #Tigger button to open/close Sidenav-->
		        <ul class="card-actions icons alt-actions left-top">
		            <li>
		                <a href="javascript:void(0)" class="drawer-trigger" data-drawer="toggle-left">
		                    <i class="zmdi zmdi-menu"></i>
		                </a>
		            </li>
		        </ul>
		        <div class="container-fluid">
		            <div class="row">
		                <div class="col-xs-12">
		                    <header id="header">
		                    <!-- #Main Header TItle-->
		                        <h1>Page Title</h1>
		                    </header>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div id="content" class="container-fluid p-0 m-0">
		            <!-- #Main Content Area-->
		    </div>
		    <aside id="leftnav" class="scrollbar">
		            <!-- #Main Sidenav Area-->
		    </aside>
		</div>
		

Right Side Nav v1

<div id="content_wrapper" class="simple rightnav_v2">
		    <div id="header_wrapper" class="header-sm">
		        <div class="container-fluid">
		            <div class="row">
		                <div class="col-xs-12">
		                    <header id="header">
		                        <!-- #Main Header-->
		                        <h1>Page Title</h1>
		                    </header>
		                </div>
		            </div>
		        </div>
		            <!-- #Trigger Menu Open/Close on mobile-->
		        <ul class="card-actions icons lg alt-actions right-top">
		            <li>
		                <a href="javascript:void(0)" class="drawer-trigger" data-drawer="open-right">
		                    <i class="zmdi zmdi-menu"></i>
		                </a>
		            </li>
		        </ul>
		    </div>
		    <div id="content" class="container-fluid">
		        <div id="content_type" class="rightnav_v2">
		            <div class="content-body">
		                <div class="row">
		                    <div class="col-xs-10 content-col-wrapper">
		                        <div class="row">
		                            <div class="col-xs-12" role="main">
		                                <!-- Tab panes -->
		                                <div class="tab-content">
		                                    <section role="tabpanel" class="tab-pane active" id="sidenav1">
		                                        <div class="card">
		                                            <header class="card-heading">
		                                                <!-- #Card Header-->
		                                                <h2 class="card-title">Card Title 1</h2>
		                                            </header>
		                                            <div class="card-body">
		                        <!-- #Main Content Area 1-->
		                                            </div>
		                                        </div>
		                                    </section>
		                                    <section role="tabpanel" class="tab-pane" id="sidenav2">
		                                        <div class="card">
		                                            <header class="card-heading">
		                                                <h2 class="card-title">Card Title 2</h2>
		                                            </header>
		                                            <div class="card-body">
		                                            <!-- #Main Content Area 2-->
		                                            </div>
		                                        </div>
		                                    </section>
		                                    <section role="tabpanel" class="tab-pane" id="sidenav3">
		                                        <div class="card">
		                                            <header class="card-heading">
		                                                <h2 class="card-title">Card Title 3</h2>
		                                            </header>
		                                            <div class="card-body">
		                                                <!-- #Main Content Area 3-->
		                                            </div>
		                                        </div>
		                                    </section>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                    <!-- #Sidenav Menu-->
		                    <div class="col-xs-2 rightnav-col-wrapper">
		                        <aside id="rightnav" class="scrollbar">
		                            <div class="card alt-card">
		                                <header class="card-heading">
		                                    <h2 class="card-title">Sidebar Header</h2>
		                                </header>
		                                <div class="card-body">
		                                    <ul class="nav nav-pills nav-stacked" role="tablist">
		                                        <li role="presentation" class="active"><a href="#sidenav1" aria-controls="sidenav1" role="tab" data-toggle="tab">Sidenav item 1</a></li>
		                                        <li role="presentation"><a href="#sidenav2" aria-controls="sidenav2" role="tab" data-toggle="tab">Sidenav item 2</a></li>
		                                        <li role="presentation"><a href="#sidenav3" aria-controls="sidenav3" role="tab" data-toggle="tab">Sidenav item 3</a></li>
		                                    </ul>
		                                </div>
		                            </div>
		                        </aside>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		

Right Side Nav v2

<div id="content_wrapper" class="rightnav_v2">
		    <div id="header_wrapper" class="header-sm">
		        <div class="container-fluid">
		            <div class="row">
		                <div class="col-xs-12">
		                    <header id="header">
		                    <!-- #Main Header Title->
		                        <h1>Page Title</h1>
		                    </header>
		                </div>
		            </div>
		        </div>
		                <!-- #Trigger Menu Open/Close on mobile-->
		        <ul class="card-actions icons lg alt-actions right-top">
		            <li>
		                <a href="javascript:void(0)" class="drawer-trigger" data-drawer="toggle-right">
		                    <i class="zmdi zmdi-menu"></i>
		                </a>
		            </li>
		        </ul>
		    </div>
		    <div id="content" class="container-fluid p-0 m-0">
		        <!-- #Main Content Area->
		    </div>
		    <aside id="rightnav" class="scrollbar">
		        <!-- #Sidenav Area->
		    </aside>
		</div>
		

Preset and Custom Theme Styles

Default and Preset Styles

If you would like to use the default or any one of the preset theme colors. Simply choose one of the css file to add in the header, the css files can be found inside of dist/assets/css/theme-.css

Customize your own Styles

If you would like to customize your own Theme colors via SCSS you can find examples to customize inside app/sass/themes/theme-.scss

Modular JavaScript

ES6 Modules

MaterialWrap is written using the latest version of JavaScript ES6 (ECMAScript 6). If you're new to ES6 a list of the new features can be found here http://es6-features.org/

Sources and Credits

  • alertify.js http://fabien-d.github.io/alertify.js/
  • Animate.css https://daneden.github.io/animate.css/
  • Bootstrap http://getbootstrap.com/
  • Material Design https://material.io/
  • Bootstrap Material Design http://fezvrasta.github.io/bootstrap-material-design/
  • Bootstrap Select https://silviomoreto.github.io/bootstrap-select/
  • Bootstrap Typeahead https://twitter.github.io/typeahead.js/examples/
  • c3 http://c3js.org/
  • chartist https://gionkunz.github.io/chartist-js/
  • chartjs http://www.chartjs.org/
  • d3 https://d3js.org/
  • datatables https://datatables.net/
  • dragula.js https://github.com/bevacqua/dragula
  • dropdown.js https://github.com/FezVrasta/dropdown.js
  • dropezone.js http://www.dropzonejs.com/
  • Bootstrap Date Time Picker https://eonasdan.github.io/bootstrap-datetimepicker/
  • ES6 Promise https://github.com/stefanpenner/es6-promise
  • Flot Chart http://www.flotcharts.org/
  • Full Calendar https://fullcalendar.io/
  • HammerJS http://hammerjs.github.io/
  • jQuery https://jquery.com/
  • jQuery Appear https://github.com/morr/jquery.appear
  • jQuery Mask https://igorescobar.github.io/jQuery-Mask-Plugin/
  • jQuery Validation https://jqueryvalidation.org/
  • jQuery Sparkline http://omnipotent.net/jquery.sparkline
  • jQuery Toolbar http://paulkinzett.github.io/toolbar/
  • JS Cookie https://github.com/js-cookie/js-cookie
  • js storage https://github.com/julien-maurel/js-storage
  • lodash https://lodash.com/
  • Custom Scrollbar http://manos.malihu.gr/jquery-custom-content-scroller/
  • Masonry http://masonry.desandro.com/
  • Material Avatar https://github.com/hellsan631/material-avatar
  • Material Design Iconic Icons https://zavoloklom.github.io/material-design-iconic-font/
  • MDI Icons https://materialdesignicons.com/
  • Modernizr https://modernizr.com/
  • Moment.js https://momentjs.com/
  • Morris.js http://morrisjs.github.io/morris.js/
  • nouislider https://refreshless.com/nouislider/
  • Photoswipe http://photoswipe.com/
  • Pikaday https://github.com/dbushell/Pikaday
  • Progressbar.js https://kimmobrunfeldt.github.io/progressbar.js/
  • Slick Carousel http://kenwheeler.github.io/slick/
  • Summernote http://summernote.org/
  • Sweet Alert 2 https://limonte.github.io/sweetalert2/
  • Twitter Bootstrap Wizard https://github.com/VinceG/twitter-bootstrap-wizard
  • Weather Icons https://erikflowers.github.io/weather-icons/
  • x-editable https://vitalets.github.io/x-editable/

Demo Images

  • uiFace http://uifaces.com/
  • Unsplash https://unsplash.com/
  • Cotton Bureau https://cottonbureau.com