Documentation

DigiSale Theme Documentation

Installation

To use the DigiSale 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 DigiSale Laravel 5 theme!

Features

DigiSale is a lightweight and feature rich admin template which is clean and easy to use. Current release comes with the following features:
  • 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 DigiSale Laravel 5 theme :

Panels

Primary title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="panel card grid-bx panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">Primary title</h3>
	</div>
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. 
	</div>
</div>

Buttons

<button type="button" class="btn btn-success">Success Button</button>

Dropdowns

<div class="btn-group">
	<button type="button" class="btn btn-danger    btn-   ">Action</button>
	<button type="button" class="btn btn-danger   dropdown-toggle haha" data-toggle="dropdown" aria-expanded="false">
		<span class="caret"></span>
		<span class="sr-only"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>

Labels

Label
<span class="label label-info">Label</span>

Progress Bars

<div class="progress">
	<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
		<span class="sr-only"></span>
	</div>
</div>

Alerts

<div class="alert alert-warning  alert-dismissable " role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>        My alert message.
</div>

Form

Horizontal Form

 
<div class="panel panel-success">
	<div class="panel-heading">
		<h3 class="panel-title">Horizontal Form		  
			<div class="panel-control pull-right">
				<a class="panelButton"><i class="fa fa-refresh"></i></a>
				<a class="panelButton"><i class="fa fa-minus"></i></a>
				<a class="panelButton"><i class="fa fa-remove"></i></a>
			</div>
		</h3>

	</div>

	<div class="panel-body">
		<form class="form-horizontal">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label>
							<input type="checkbox"> Remember me
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">Sign in</button>   
				</div>
			</div>
		</form>
	</div>
</div>

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>
ADD : <script> $("[data-toggle=popover]").popover(); </script>

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>

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 john@gmail.com London, UK
Andy andygmail.com Merseyside, UK
Frank frank@gmail.com 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>john@gmail.com</td>
			<td>London, UK</td>
		</tr>
		<tr>
			<td>Andy</td>
			<td>andygmail.com</td>
			<td>Merseyside, UK</td>
		</tr>
		<tr>
			<td>Frank</td>
			<td>frank@gmail.com</td>
			<td>Southampton, UK</td>
		</tr>
	</tbody>
</table>

Switch

	<div class="onoffswitch remember-btn">
	    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
	    <label class="onoffswitch-label" for="myonoffswitch"></label>
	</div>
	<style>
		.onoffswitch {
		    position: relative; width: 40px;
		    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
		}
		.onoffswitch-checkbox {
		    display: none;
		}
		.onoffswitch-label {
		    display: block; overflow: hidden; cursor: pointer;
		    height: 20px; padding: 0; line-height: 16px;
		    border: 2px solid #999999; border-radius: 16px;
		    background-color: #EEEEEE; margin-bottom: -4px;
		    transition: background-color 0.3s ease-in;
		}
		.onoffswitch-label:before {
		    content: "";
		    display: block; width: 20px; height: 20px; margin: 0px;
		    background: #FFFFFF;
		    position: absolute; top: 0; bottom: 0;
		    right: 22px;
		    border: 2px solid #999999; border-radius: 16px;
		    transition: all 0.3s ease-in 0s; 
		}
		.onoffswitch-checkbox:checked + .onoffswitch-label {
		    background-color: #373C4F;
		}
		.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
		   border-color: #373C4F; height: 20px;
		}
		.onoffswitch-checkbox:checked + .onoffswitch-label:before {
		    right: 0px; height: 20px;
		}
	</style>

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>