Installation

To use the Material Dashboard Theme, you need to make sure you have bower, npm and gulp globally installed. Now navigate to your app directory ($ cd app/) and run the following terminal commands :
  • composer install
  • php artisan key:generate and paste the generated key in config/app.php replacing 'key' => env('APP_KEY', 'SomeRandomString')"SomeRandomString"
  • npm install
  • bower install
  • gulp watch

Features

Material Admin is a lightweight and feature rich admin template which is clean and easy to use. Current release comes with the following features:
  • Responsive desing based on Material Design Lite
  • Custom elemenrs and plugins including
    • User profile
    • Inbox
    • Lightbox Gallery
    • Customizable in different colors and styles
    • Login, Register and 404 page
  • Material Design Lite and third party plugins and elemnts including
    • Tables
    • Buttons
    • Forms with validation
    • Progressbars and Spinners
    • Cards
    • Tabs
    • Sliders
    • Badges
    • Paper Collapse

Widgets

The following widgets/plugins have been used in Material Dashboard theme:
Buttons
<button class="mdl-button mdl-js-button mdl-button--colored">
	Button
</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
	Accent
</button>
<button class="mdl-button mdl-js-button primary mdl-js-ripple-effect mdl-button--raised">
	Primary
</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
	<i class="mdi mdi-bike"></i>
</button>
Cards

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
<div class="mdl-card mdl-shadow--2dp demo-card-wide mdl-cell mdl-cell--6-col material">
	<div class="mdl-card__title">
		<h2 class="mdl-card__title-text">Welcome</h2>
	</div>
	<div class="mdl-card__supporting-text">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Mauris sagittis pellentesque lacus eleifend lacinia...
	</div>
	<div class="mdl-card__actions mdl-card--border">
		<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
			Get Started
		</a>
	</div>
	<div class="mdl-card__menu">
		<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
		<i class="mdi mdi-share-variant"></i>
		</button>
	</div>
</div>
						
Tabs
  • Eddard
  • Catelyn
  • Robb
  • Sansa
  • Brandon
  • Arya
  • Rickon
  • Tywin
  • Cersei
  • Jamie
  • Tyrion
  • Viserys
  • Daenerys
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
	<div class="mdl-tabs__tab-bar">
		<a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
		<a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
		<a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
	</div>

	<div class="mdl-tabs__panel is-active" id="starks-panel">
		<ul>
			<li>Eddard</li>
			<li>Catelyn</li>
			<li>Robb</li>
			<li>Sansa</li>
			<li>Brandon</li>
			<li>Arya</li>
			<li>Rickon</li>
		</ul>
	</div>
	<div class="mdl-tabs__panel" id="lannisters-panel">
		<ul>
			<li>Tywin</li>
			<li>Cersei</li>
			<li>Jamie</li>
			<li>Tyrion</li>
		</ul>
	</div>
	<div class="mdl-tabs__panel" id="targaryens-panel">
		<ul>
			<li>Viserys</li>
			<li>Daenerys</li>
		</ul>
	</div>
</div>
						
Loading Bar
<div id="p1" class="mdl-progress mdl-js-progress progress-demo"></div>
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate progress-demo"></div>
<div id="p3" class="mdl-progress mdl-js-progress progress-demo"></div>
						
Sliders
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0"/>			
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25" tabindex="0"/>
						
Spinners
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
						
Badges
Messages
<span class="material-icons mdl-badge" data-badge="1">Messages</span>
<span class="material-icons mdl-badge" data-badge="4">
	<button class="mdl-button mdl-js-button mdl-js-ripple-effect">Button</button>
</span>
<span class="material-icons mdl-badge" data-badge="♥"><i class="mdi mdi-account"></i></span>
						
Tooltips
Follow Print Upload file.zip Share your content
via social media
<span id="tt1"><i class="mdi mdi-plus"></i></span>
<span class="mdl-tooltip" for="tt1">
	Follow
</span>
<span id="tt2"><i class="mdi mdi-printer"></i></span>
<span class="mdl-tooltip mdl-tooltip--large" for="tt2">
	Print
</span>
<span id="tt3"><i class="mdi mdi-cloud-upload"></i></span>
<span class="mdl-tooltip" for="tt3">
	Upload <strong>file.zip</strong>
</span>
<span id="tt4"><i class="mdi mdi-share-variant"></i></span>
<span class="mdl-tooltip" for="tt4">
	Share your content<br>via social media
</span>
						
Footer
<footer class="mdl-mega-footer">
	<div class="mdl-mega-footer__middle-section">

		<div class="mdl-mega-footer__drop-down-section">
			<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
			<h1 class="mdl-mega-footer__heading">Features</h1>
			<ul class="mdl-mega-footer__link-list">
				<li><a href="#">About</a></li>
				<li><a href="#">Terms</a></li>
				<li><a href="#">Partners</a></li>
				<li><a href="#">Updates</a></li>
			</ul>
		</div>

		<div class="mdl-mega-footer__drop-down-section">
			<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
			<h1 class="mdl-mega-footer__heading">Details</h1>
			<ul class="mdl-mega-footer__link-list">
				<li><a href="#">Specs</a></li>
				<li><a href="#">Tools</a></li>
				<li><a href="#">Resources</a></li>
			</ul>
		</div>

		<div class="mdl-mega-footer__drop-down-section">
			<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
			<h1 class="mdl-mega-footer__heading">Technology</h1>
			<ul class="mdl-mega-footer__link-list">
				<li><a href="#">How it works</a></li>
				<li><a href="#">Patterns</a></li>
				<li><a href="#">Usage</a></li>
				<li><a href="#">Products</a></li>
				<li><a href="#">Contracts</a></li>
			</ul>
		</div>

		<div class="mdl-mega-footer__drop-down-section">
			<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
			<h1 class="mdl-mega-footer__heading">FAQ</h1>
			<ul class="mdl-mega-footer__link-list">
				<li><a href="#">Questions</a></li>
				<li><a href="#">Answers</a></li>
				<li><a href="#">Contact us</a></li>
			</ul>
		</div>

	</div>

	<div class="mdl-mega-footer__bottom-section">
		<div class="mdl-logo">Title</div>
		<ul class="mdl-mega-footer__link-list">
			<li><a href="#">Help</a></li>
			<li><a href="#">Privacy & Terms</a></li>
		</ul>
	</div>
</footer>	
						
Mini Footer
<footer class="mdl-mini-footer">
	<div class="mdl-mini-footer__left-section">
		<div class="mdl-logo">Title</div>
		<ul class="mdl-mini-footer__link-list">
			<li><a href="#">Help</a></li>
			<li><a href="#">Privacy & Terms</a></li>
		</ul>
	</div>
</footer>
						
Table
Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp shadow">
	<thead>
		<tr>
			<th class="mdl-data-table__cell--non-numeric">Material</th>
			<th>Quantity</th>
			<th>Unit price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
			<td>25</td>
			<td>$2.90</td>
		</tr>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
			<td>50</td>
			<td>$1.25</td>
		</tr>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
			<td>10</td>
			<td>$2.35</td>
		</tr>
	</tbody>
</table>
						
Text Fields
<div class="mdl-textfield mdl-js-textfield textfield-demo">
	<input class="mdl-textfield__input" type="text" id="sample1" />
	<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
	<input class="mdl-textfield__input" type="text" id="sample3" />
	<label class="mdl-textfield__label" for="sample3">Floating Text...</label>
</div>
						
Switches and Checkboxes

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
	<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" />
	<span class="mdl-checkbox__label">Checkbox</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
	<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2" />
	<span class="mdl-radio__label">Option</span>
</label><br>
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
	<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked />
	<i class="mdl-icon-toggle__label mdi mdi-format-bold" style="font-size: 26px;"></i>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
	<input type="checkbox" id="switch-2" class="mdl-switch__input" />
	<span class="mdl-switch__label"></span>
</label>
						

Extras

3rd party plugins and elements
ChartJS
<canvas id="line-chart"></canvas>
		       					
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(41,121,255,0.2)",
            strokeColor: "rgba(41,121,255,1)",
            pointColor: "rgba(41,121,255,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(41,121,255,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(0,213,84,0.2)",
            strokeColor: "rgba(0,213,84,1)",
            pointColor: "rgba(0,213,84,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var LineChart = document.getElementById("line-chart").getContext("2d");

var chartCurves = new Chart(LineChart).Line(data, {
	responsive: true,
    datasetStroke: false,
    legendTemplate: false,
    pointDotRadius : 6,
    showTooltips: false	       
});
		       					
C3 JS
<div id="bar-chart"></div>
		       					
var chart2 = c3.generate({
	bindto: '#bar-chart',
    data: {
        columns: [
            ['Players', 30, 200, 100, 400, 150, 250, 200, 120, 80, 180, 40, 90, 220, 110, 20],
            ['Times', 30, 150, 80, 250, 150, 270, 240, 180, 280, 140, 120, 70, 140, 190, 220]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            width: 80 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    },
    color: {
	  pattern: ['#00D554','#ff4081']
	},
	padding: {
		left: 10,
		right: 10,
		top: 10
	},
	legend: {
		hide: true
	}
});
		       					
Stats
45%
Goals Achieved
  18% Up this month
@include('widgets.stat', array(
'chartID'=>'chart1', 'value'=>'45', 'header'=>'Goals Achieved', 'arrow'=>'arrow-up', 'footer'=>'18% Up this month'))
		       					
$('#chart1').easyPieChart({
    lineWidth: 8,
    scaleColor: false,
    size: 85,
    lineCap: "square",
    barColor: "#fb8c00",
    trackColor: "#f9dcb8"
});
		       					
To-Do
to do list
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action
<div class="to-do">
	<ul>
		<li>
			<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox1">
    			<input type="checkbox" id="checkbox1" class="mdl-checkbox__input" />
    			<span class="mdl-checkbox__label">Ibe can be the new Sterling.</span>
    		</label>
    	</li>
    	<li>
	    	<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox2">
	    		<input type="checkbox" id="checkbox2" class="mdl-checkbox__input" />
	    		<span class="mdl-checkbox__label">Make or break season for Rodgers.</span>
	    	</label>
	    </li>
	    <li>
		    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox3">
		    	<input type="checkbox" id="checkbox3" class="mdl-checkbox__input" />
		    	<span class="mdl-checkbox__label">Benteke will show why he's good.</span>
		    </label>
		</li>
		<li>
			<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox4">
				<input type="checkbox" id="checkbox4" class="mdl-checkbox__input" />
				<span class="mdl-checkbox__label">Sturridge will definitely be back.</span>
			</label>
		</li>
		<li>
			<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox5">
				<input type="checkbox" id="checkbox5" class="mdl-checkbox__input" />
				<span class="mdl-checkbox__label">PFA player of the year Coutinho.</span>
			</label>
		</li>
		<li>
			<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox6">
				<input type="checkbox" id="checkbox6" class="mdl-checkbox__input" />
				<span class="mdl-checkbox__label">We go again.</span>
			</label>
		</li>
	</ul>
	<div class="bottom">
    	<form action="#">
    		<div class="mdl-textfield mdl-js-textfield textfield-demo">
    			<input class="mdl-textfield__input" type="text" id="sample1" />
    			<label class="mdl-textfield__label" for="sample1">To do...</label>
    		</div>
    	</form>
<button class="mdl-button mdl-button--raised mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored btn">
<i class="mdi mdi-check"></i>
</button>
	</div>
</div>
						
Paper Collapse
Gary Neville Request for loan.48 minutes ago
Request for loan.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, saepe ex ipsam, nemo maiores eius incidunt. Sint unde laborum, eligendi praesentium voluptates incidunt ex animi dolor nobis possimus odio autem.

<div class="collapse-card shadow">
<div class="collapse-card__heading">
<div class="collapse-card__title">
<span class="sender left">Gary Neville </span> <span class="subjecth">Request for loan.</span>
<span class="time right">48 minutes ago</span>
</div>
</div>
<div class="collapse-card__body">
<div class="subject">
Request for loan.
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, saepe ex ipsam, nemo maiores eius incidunt.
 Sint unde laborum, eligendi praesentium voluptates incidunt ex animi dolor nobis possimus odio autem.</p>
</div>
<div class="footer">
Sincerely, <br>
Gary Neville
<a href="#modal" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored right absolute 
trigger">
<i class="mdi mdi-pencil"></i>
</a>
</div>
</div>
</div>