Welcome to Material Drawn !

A Materialize CSS framework based admin dashboard

Material Drawn is a free Materialize Admin with a fresh design inspired by Google's Material Design and Pixinvent theme. We are very excited to introduce our material concepts through an easy to use and beautiful set of components. Material Drawn was built over the popular materialize framework and it comes with a couple of third-party plugins ( amcharts, datatables ) redesigned to fit in with the rest of the elements.

Material Dashboard comes with 6 color theme choices for any component as background

1. lavender
2. forestgreen
3. midnightblue
4. teal
5. blood
6. girl

with a background image on the sidebar for each color. You can also create a theme colour of your own just be ready with your colour along with its lighter shade and an image matching it. We are very excited to share this dashboard with you and we look forward to hearing your feedback !

For adding your custom theme colour or any other feedback mail me [email protected] .

You can find the Github Repo for Material Drawn here.

Files

Distribution Folder CSS files

all framework distribution css are in:

dist/theme.min.css

index page css is in:

dist/Style.css

For the custom css written by jquery for theme changing

<style type="text/css" id="page"></style>
<style type="text/css" id="material-custom"></style>
<style type="text/css" id="custom"></style>

login page css is in:

dist/LoginStyle.css

register page css is in:

dist/RegisterStyle.css

JS files all framework distribution JS are in:

dist/app.min.js
dist/app2.min.js
dist/app3.min.js

my plugin js with theme changer and all init for index.html is in:

dist/myplugin.js

my plugin js with theme changer and all init for index.html is in:

dist/loginplugin.js

Installation

CSS installation for index page

<link rel="stylesheet" href="dist/theme.min.css">
<link rel="stylesheet" href="dist/Style.css">
<style type="text/css" id="page"></style>
<style type="text/css" id="material-custom"></style>
<style type="text/css" id="custom"></style>

CSS installation for Login page

<link rel="stylesheet" href="dist/theme.min.css">
<link rel="stylesheet" href="dist/LoginStyle.css">
<style type="text/css" id="material-custom"></style>
<style type="text/css" id="custom"></style>

CSS installation for Register page

<link rel="stylesheet" href="dist/theme.min.css">
<link rel="stylesheet" href="dist/RegisterStyle.css">
<style type="text/css" id="material-custom"></style>
<style type="text/css" id="custom"></style>

JS installation for index page

<script src="dist/app.min.js"></script>
<script src="dist/app2.min.js"></script>
<script src="dist/app3.min.js"></script>
<script src="dist/myplugin.js"></script>

JS installation for Login page

<script src="dist/app.min.js"></script>
<script src="dist/app2.min.js"></script>
<script src="dist/app3.min.js"></script>
<script src="dist/LoginStyle.css"></script>

JS installation for Register page

<script src="dist/app.min.js"></script>
<script src="dist/app2.min.js"></script>
<script src="dist/app3.min.js"></script>
<script src="dist/registerplugin.js"></script>

After completing the procedure of installation open the index.html in your browser for the demo dashboard ,update it and have fun using it.

basic demo of Material Drawn.

Coming Soon

• UI components
• JS components
• Few custom components recommended by my fans

Notice

New features added like Profile (timeline and setting) , Chating and many more. Until i complete all components you can directly write components from Materialize.css. Please support my work , star and watch my repo and follow me on github for all upcoming updates in MaterialDrawn and other future projects.