Documentation

Dashy Theme Documentation

Installation

To use the Dashy Laravel 5 theme, you need to make sure you have bower, npm, gulp and composer globally installed. Now navigate to your app directory ($ cd myLaravelApp/) and run the following terminal commands :
  • $ bower install
  • $ npm install
  • $ composer install
  • $ gulp watch
You have now succesfully set up Dashy Laravel 5 theme!

Features

Dashy is a lightweight and feature rich admin template which is clean and easy to use. Current release comes with the following features:
  • 4 Different theme colors
  • Responsive design based on Bootstrap 3.3.2
  • Custom elements and plugins including:
    • Pure CSS3 checkbox, radio and On/Off switch elements
    • Wysiwig editor
    • User Profile
    • Email-template
    • Customizable widgets in different colors and styles
  • Boostrap, jQuery UI and third party plugins and elements including:
    • Dynamic Charts
    • Tables
    • Form validation
    • Date Picker
    • DateRange Picker
    • Time Picker
    • Carousel for Gallery
    • Full Calendar
    • Progress Bars
    • Labels and Badges
    • Collapse

Widgets

The following widgets have been used in Dashy Laravel 5 theme :

Panels

Primary Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
@section ('panel5_panel_title', 'Primary Well')
@section ('panel5_panel_body')
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.
@endsection
@include('widgets.panel', array('controls'=>true, 'class'=>'primary', 'header'=>true, 'as'=>'panel5'))
Available array arguments : 'class'=> 'string', 'controls'=> boolean, 'header'=> boolean, 'footer'=> boolean

Buttons

@include('widgets.button', array('class'=>'success', 'value'=>'Success Button', 'rounded'=>true))
Available array arguments : 'class'=> 'string', 'value'=> 'string', 'size'=> 'string', 'rounded'=>boolean, 'bordered'=>boolean

Dropdowns

@include('widgets.dropdown-button', array('split'=>true, 'class'=>'danger', 'value'=>'Actions'))
Available array arguments : 'class'=> 'string', 'value'=> 'string', 'size'=> 'string', 'rounded'=>boolean, 'bordered'=>boolean, 'split'=> boolean (for multi button dropdown)

Labels

Label
@include('widgets.labels', array('class'=>'info', 'value'=> 'Label'))
Available array arguments : 'class'=> 'string', 'value'=> 'string'

Progress Bars

@include('widgets.progress', array('animated'=> true, 'value'=>'65'))
Available array arguments : 'class'=> 'string', 'value'=> 'string', 'animated'=> boolean, 'striped'=> boolean

Alerts

@include('widgets.alert', array('class'=>'warning', 'dismissable'=>true, 'message'=> 'My message'))
Available array arguments : 'class'=> 'string', 'message'=> 'string', 'link'=>'string', 'dismissable'=> boolean

Loader

Horizontal Form

 
@include('widgets.loader-block')
Make sure to set position: relative; of the parent div for the block loader.

Tooltip & Popover

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Left Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Top Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Bottom Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Right Tooltip</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Left Popover</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Top Popover</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Bottom Popover</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Right Popover</button>

Pagination

<div class="clearfix">
<ul class="pagination no-m-t">
	<li>
    	<a href="#" aria-label="Previous">
        	<span aria-hidden="true">«</span>
      	</a>
    </li>
    <li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
</ul>
</div>

Collapse

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
Click here for Collapse
</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse ">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>					
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
Click here for Collapse
</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse ">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>					
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
Click here for Collapse
</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse ">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>				
</div>
The collapse group class can be changed by using panel-info/panel-warning/panel-danger instead of panel-primary

Tabs

loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis laborum commodi, placeat voluptates quisquam accusantium corporis ipsa, distinctio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil .
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure dignissimos earum aut consectetur amet consequuntur libero sint consequatur tempora perferendis hic.
Random settings
<div role="tabpanel">
<ul class="nav nav-tabs tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"> Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"> Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"> Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"> Settings</a></li>
</ul>
<div class="tab-content panel-body">
<div role="tabpanel" class="tab-pane active" id="home">loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis laborum commodi, placeat voluptates quisquam accusantium corporis ipsa, distinctio.
</div>
<div role="tabpanel" class="tab-pane" id="profile">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil .
</div>
<div role="tabpanel" class="tab-pane" id="messages">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure dignissimos earum aut consectetur amet consequuntur libero sint consequatur tempora perferendis hic.
</div>
<div role="tabpanel" class="tab-pane" id="settings">Random settings
</div>
</div>
</div>

Icons

  
<i class="fa fa-glass"></i>
<i class="fa fa-bar-chart-o"></i>
Name Email Address
John [email protected] London, UK
Andy andygmail.com Merseyside, UK
Frank [email protected] Southampton, UK
<table class="table table-bordered">
	<thead>
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Address</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>[email protected]</td>
			<td>London, UK</td>
		</tr>
		<tr>
			<td>Andy</td>
			<td>andygmail.com</td>
			<td>Merseyside, UK</td>
		</tr>
		<tr>
			<td>Frank</td>
			<td>[email protected]</td>
			<td>Southampton, UK</td>
		</tr>
	</tbody>
</table>
The table classes can be changed using table-bordered/table-hover/table-condensed classes.

Switch

@include('widgets.switch', array('id'=> 'switch'))

Form Elements

<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control underline" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control underline" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Plugins

Calendar

<div id="calendar2"></div>
<script>
$('#calendar2').fullCalendar({ 
	});
</script>

Charts

<div id="piechart"></div>
<script>var chart2 = c3.generate({
	   bindto: '#piechart',
	    data: {
	         
	        // iris data from R
	        columns: [
	            ['data1', 30],
	            ['data2', 120],
	        ],
	        type : 'pie',
	        onclick: function (d, i) { console.log("onclick", d, i); },
	        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
	        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
	    },
	    color: {
	        pattern: ['#06c5ac','#3faae3','#ee634c','#6bbd95','#f4cc0b','#9b59b6','#16a085','#c0392b']
	    }
	});
</script>