Installation

To use the Ani 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 :
  • $ composer install
  • $ php artisan key:generate and paste the generated key inconfig/app.phpreplacing 'key' => env('APP_KEY', 'SomeRandomString') "SomeRandomString"
  • $ npm install
  • $ bower install
  • $ gulp watch
You have now succesfully set up Ani Laravel 5 theme!

Features

Ani 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
    • Todo List

Widgets

The following widgets have been used in Ani Laravel 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.
<div class="panel panel-primary">
  <div class="panel-heading">
	<h3 class="panel-title">Primary Panel		  
	</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. Ut enim ad minim veniam,
	quis nostrud exercitation.
  </div>
</div>

Buttons

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

Dropdowns

HTML
<div class="dropdown ">
    <button type="button" class="btn btn-danger btn-rounded " data-toggle="dropdown" role="button">
        Button dropdown <span class="caret"></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>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
    </ul>
</div>

Labels

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

Progress Bars

<progressbar value="65" class="progress-striped active" type="primary"></progressbar>

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>

Tolltip & Popover

HTML
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left Tooltip</button>
Javascript
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
HTML
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left Tooltip</button>
Javascript
$(function () {
$('[data-toggle="popover"]').popover()
})
For popovers and tooltips in different replace "Left" with "Top/Right/Bottom"

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="widgets-docs-elements">
  <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>
</div>
The collapse group class can be changed by using panel-info/panel-warning/panel-danger instead of panel-primary

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>
The table classes can be changed using table-bordered/table-hover/table-condensed classes.

Switch

<div class="onoffswitch">
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="switch3" checked="">
  <label class="onoffswitch-label" for="switch3">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
</div>

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>

To do List

 Todo Tasks

  • Meeting with Nabindar Singh.
  • Exercise at 6:pm with Nicholas.
  • Avengers Age of Ultron.
  • Henna birthday at Mezbaan.
  • Black Magic

Plugins

Calendar

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

C3 Chart

<div id="piechart"></div>
<script>var chart2 = c3.generate({
	   bindto: '#piechart',
	    data: {
	        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>

Chart.js Chart

<div><canvas id="cpie"></canvas></div>
var data = [
    {
        value: 220,
        color:"#A2D19E",
        highlight: "rgba(162, 209, 158, 0.9)",
        label: "Success"
    },
    {
        value: 70,
        color: "#D57D6D",
        highlight: "rgba(213, 125, 109, 0.9)",
        label: "Danger"
    },
    {
        value: 100,
        color: "#80B1CB",
        highlight: "rgba(128, 177, 203, 0.9)",
        label: "Info"
    }
]
var cpie = document.getElementById("cpie").getContext("2d");
new Chart(cpie).Pie(data, {
  responsive: true
});

Growl

HTML
<button type="button" class="warning-growl btn btn-warning" >Warning Growl</button>
JavaScript
$('.warning-growl').click(function(event) {
    return $.growl.warning({
    message: "The kitten is ugly!"
  });
});