brand v1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
Behavioral
Layout

Getting Started

To get started, you need to follow below steps ( Use of these tools is completely optional.)

Installation with Grunt

To get started, you need to follow some specific steps ( Use of these tools is completely optional.) Node.js and NPM. You can download Node.js from here https://nodejs.org. Npm comes bundled with Node.js.

														
npm install -g grunt-cli
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
Installation with Gulp
														
npm install gulp-cli -g
npm install gulp --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
gulp vendors
gulp

Tips: If everything was installed correctly, you should see the jQuery version of Template running in http://localhost:3000/ Above all procedures are optional you can directly use the compiled Demo files which we provided you.

Node JS

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications. In the following "hello world" example, many connections can be handled concurrently. Upon each connection, the callback is fired, but if there is no work to be done, Node.js will sleep.

NPM

NPM is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. NPM Files are found under /node_modules

SASS

Sass is an extension of CSS that allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax.

Grunt

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting.

Installation

To install grunt first you must have NodeJS installed NodeJS will have npm (node packaged modules) Run the following commands

  • Install grunt-cli globally by running the following command npm install -g grunt-cli
  • Gruntfile.js file is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project, next to the package.json file, and should be committed with your project source.
  • Navigate to the root directory of your project, then run npm install.

Tips: Once you have successfully setup now you can use Grunt CLI commands to automate your task

Commands

  • grunt dist

    This will automatically copy all the assets from node_modules to vendors folder

  • grunt sass

    This will compile all the sass files to dist/css/style.css

  • grunt watch

    This will automatically compile the sass files on changes

  • watch-int

    This will automatically compile the sass files on changes

  • grunt

    This will run 4 grunt tasks:

    • Sass file compilation
    • Jshint check
    • It will connect web server onhttp://localhost:9000
    • Watch for the changes in sass files

Tips: Your are free to customize the Grunt task to your need by editing the Gruntfile.js in the root directory.

Gulp

Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.

Installation

To install gulp first you must have NodeJS installed NodeJS will have npm (node packaged modules) Run the following commands

  • Install gulp-cli globally by running the following command npm install gulp-cli -g
  • gulpfile.js file is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project, next to the package.json file, and should be committed with your project source.
  • Navigate to the root directory of your project, then run npm install.
Jquery

jquery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API

Bootstrap

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

										
<!-- CSS -->
@import "../../vendors/bootstrap/dist/css/bootstrap.min.css";
<!-- jQuery -->
<script src="vendors/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="vendors/popper.js/dist/umd/popper.min.js"></script>
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
Quick start

A boilerplate in HTML is a template that you will include at the beginning of your project.

										
<!DOCTYPE html>
<!-- 
Zapped
Author: Hencework
Contact: contact@hencework.com
-->
<html lang="en">
<head>
	<!-- Meta Tags -->
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Zapped - Admin CRM Dashboard Template</title>
	<meta name="description" content="A modern CRM Dashboard Template with reusable and flexible components for your SaaS web applications by hencework. Based on Bootstrap."/>
	
	<!-- Favicon -->
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	
	<!-- CSS -->
	<link href="dist/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
		<!-- Wrapper -->
	<div class="hk-wrapper" data-layout="vertical" data-layout-style="default" data-menu="dark" data-footer="simple">
		<!-- Top Navbar -->
		<nav class="hk-navbar navbar navbar-expand-xl navbar-light fixed-top">
			...				
		</nav>
		<!-- /Top Navbar -->

		<!-- Vertical Nav -->
		<div class="hk-menu">
			...
		</div>
		<div id="hk_menu_backdrop" class="hk-menu-backdrop"></div>
		<!-- /Vertical Nav -->

		<!-- Main Content -->
		<div class="hk-pg-wrapper">
			<div class="container-fluid p-5 pb-0">
				<!-- Page Header -->
				<div class="hk-pg-header">
					...
				</div>
				<!-- /Page Header -->

				<!-- Page Body -->
				<div class="hk-pg-body">
					...
				</div>
				<!-- /Page Body -->		
			</div>
			
			<!-- Page Footer -->
			<div class="hk-footer">
				<footer class="container-fluid footer px-5">
					...
				</footer>
			</div>
			<!-- / Page Footer -->

		</div>
		<!-- /Main Content -->
	</div>
	<!-- /Wrapper -->

	<!-- jQuery -->
	<script src="vendors/jquery/dist/jquery.min.js"></script>

	<!-- Bootstrap Core JS -->
		<script src="vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

	<!-- FeatherIcons JS -->
	<script src="dist/js/feather.min.js"></script>

	<!-- Fancy Dropdown JS -->
	<script src="dist/js/dropdown-bootstrap-extended.js"></script>

	<!-- Simplebar JS -->
	<script src="vendors/simplebar/dist/simplebar.min.js"></script>
	
	<!-- Init JS -->
	<script src="dist/js/init.js"></script>
</body>
</html>
Jump to