Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brand brand

Documentation

Introduction

Clove is a Bootstrap 4.3.X & Sass based solid core framework that works well for all screen sizes and modern browsers. HTML5 validated clean code is focused - keeping it simple and orderly. With Clove's UI components library, you can actually get more time on building stuff, rather than editing pixel distances. Clove - HTML template and Admin UI kit can be used for any type of web application: CRM, Project Management, Statistics, Analytics or any custom admin dashboard. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

File Structure
							HTML
							  ├── 
							  │   └── dist
							  │     └── css
							  │     └── fonts
							  │     └── img
							  │     └── js
							  │   └── src
							  │     └──scss
							  │    	  └── colors.scss
							  │    	  └── mixins.scss
							  │    	  └── navbar.scss
							  │    	  └── style.scss
							  │   └── vendors
							  │       └── All Required plugins files
							  │   └── All Html Pages
							  │   └── .jshintrc
							  │   └── Gruntfile.js
							  │   └── package.json
							  │   └── package-lock.json
							  └── 
							
Installation (Install Node.js,Grunt)

Use of these tools are completely optional.

  • Node.js and NPM. You can download Node.js from here https://nodejs.org. Npm comes bundled with Node.js
  • Next you need to install bower.
  • At last install grunt using npm install -g grunt-cli and npm install grunt --save-dev

After installing all the required frameworks, components and dependencies, go to the root folder of and run the following commands from the command line:

  • npm install
  • grunt dist
  • grunt

If everything was installed correctly, you should see the jQuery version of Clove running in http://localhost:9000/


Above all procedures are optional you can directly use the compiled file which we provided you.

Menu Style

For vertical navigation you have to first add hk-vertical-nav class with hk-wrapper.

For Horizontal navigation you have to first add hk-horizontal-nav class with hk-wrapper.

For vertical alt navigation you have to first add hk-alt-nav class with hk-wrapper.

For this menu style you have to add hk-navbar-alt class with navbar

For light & dark menu you can add hk-nav-light or hk-nav-dark with hk-nav class.

For Scrollable Navigation please add scrollable-nav class with hk-wrapper.

Twitter Feed

We implemented live Twitter Feed on Clove, for that we used twitterFetcher third party plugin.

How to Setup
HTML Structure
								<div class="card bg-primary text-center">
									<div class="twitter-slider-wrap card-body">
										<div class="twitter-icon text-center mb-15">
											<i class="fa fa-twitter"></i>
										</div>
										<div id="tweets_fetch" class="owl-carousel owl-theme"></div>
									</div>
								</div>
							
CSS
								<!-- Lightgallery CSS -->
								<link href="vendors/lightgallery/dist/css/lightgallery.min.css" rel="stylesheet" type="text/css">
							
JS
								<!-- twitter JavaScript -->
								<script src="dist/js/twitterFetcher.js"></script>
								<script src="dist/js/widgets-data.js"></script>
								​
								<!-- Owl JavaScript -->
								<script src="vendors/owl.carousel/dist/owl.carousel.min.js"></script>
								​
								<!-- Owl Init JavaScript -->
								<script src="dist/js/owl-data.js"></script>
								​
							
Initialize Twitter Feed
								if( $('#tweets_fetch').length > 0 ){
										var configList = {
										  "profile": {"screenName": ''},
										  "domId": 'tweets_fetch',		 
										  "maxTweets": 2,
										  "enableLinks": true, 
										  "showUser": false,
										  "showTime": true,
										  "showImages": false,
										  "showInteraction":false,
										  "lang": 'en'
										};
										twitterFetcher.fetch(configList);
									}	
								});
								​
								$(window).on('load', function () {
									setTimeout(function(){
										$('#tweets_fetch').owlCarousel({
											loop:true,
											margin:0,
											autoplay:true,
											responsiveClass:true,
											autoHeight:true,
											autoplayTimeout:4000,
											responsive:{
												0:{
													items:1
												}
											}
										});
									},2000);
								});
								​
							
Chat

Chat spp is exclusive design for Clove users , it provide you rich user experience.There are no external plugin dependencies.

How to Setup
HTML Structure
								<div class="chatapp-wrap">
									<div class="chatapp-left">
										<header>
											 <!--Chat app left header content-->
										</header>
										<form role="search" class="chat-search">
											 <!--Chat app search form-->
										</form>
										<div class="chatapp-users-list">
										   <!--Chat app user list-->
										</div>
									</div>
									<div class="chatapp-right">
										<header>
											<!--Chat app right header content-->
										</header>
										<div class="chat-body">
											<!--Chat body-->
										</div>
										<footer>
											<!--Chat Input field-->
										</footer>
									</div>
								 </div>  
							
Calendar

Calendar app is based on Fullcallendar js https://fullcalendar.io/. We have customized it a bit to give more interactive experience.

How to Setup
HTML Structure
								<div class="calendar-wrap">
									 <div id="calendar"></div>
								</div>
							
CSS
								<!-- Calendar CSS -->
								<link href="vendors/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" type="text/css" />
							
JS
								<!-- Fullcalendar JavaScript -->
								<script src="vendors/moment/min/moment.min.js"></script>
								<script src="vendors/jquery-ui.min.js"></script>
								<script src="vendors/fullcalendar/dist/fullcalendar.min.js"></script>
								<script src="dist/js/fullcalendar-data.js"></script>
								​
							
Initialize
								$('#calendar').fullCalendar({
									----
								});
							
Email

Clove Email app is a web-based email client designed and developed exclusively for Clove framework. It has a responsive design to work flawlessly across many devices.

How to Setup
HTML Structure
								<div class="emailapp-wrap">
								<div class="emailapp-sidebar">
									<div class="nicescroll-bar">
										<div class="emailapp-nav-wrap">
											<!--Email app sidebar content-->
										</div>
									</div>
								</div>
								<div class="email-box">
									<div class="emailapp-left">
										<header>
											<!--Email app left content-->
										</header>
										<form role="search" class="email-search">
											<!--Email app left content-->
										</form>
										<div class="emailapp-emails-list">
										</div>
									</div>
									<div class="emailapp-right">
										<header>
											<!--Email app right content-->
										</header>
										<div class="email-body">
											<!--Email app body content-->
										</div>
									</div>
								</div>
								<!-- Compose email -->
								<div class="modal fade" id="exampleModalEmail" tabindex="-1" role="dialog" aria-labelledby="exampleModalEmail" aria-hidden="true">
									<!--Email app compose email content-->
								</div>
								<!-- /Compose email -->
							</div>
							
JS
								<!-- Tinymce JavaScript -->
								<script src="vendors/tinymce/tinymce.min.js"></script>
								​
								<!-- Tinymce Wysuhtml5 Init JavaScript -->
								<script src="dist/js/tinymce-data.js"></script>
							
Credits