Pongo Documentation
Simple and Clean Admin Template

Welcome

Thank you for purchasing our premium HTML template Pongo Admin. We will walk you through the installation and setup of this template. Hold tight, it will be quick and easy.

Folder Structure

This template contains two folders: dist and source. The dist folder includes the generated html and asset files that you should not edit ideally. These files are meant for production use.

To edit the template you would need to edit files inside the source folder.

Inside the source folder you will find a set of files and folders. The assets folder contains all of the template assets including main stylesheet, 3rd plugins, and SASS files. We used default Command Line SASS compiler to compile the .scss files, but you can use any scss compiler that you like.

All the scss source files are located in the source > assets > scss folder.

SASS Files

As explained before we chosed SASS as CSS preprocessor for this template. For more explanation about how it works or the other stuff about SASS, you can read it by clicking here. To organize and simplify template modification the SASS files is separated in multiple files. Here is some explanations of each file.

Animations

The animations file contains any animations stylesheet used by main template layout.

Layout

The layout file contains main template stylesheet, such us panel box, side nav, card, and other template elements.

Mixin

The mixin file contains list of function used to generate multi browser support for CSS 3 new properties we used.

Normalize

The normalize file contains simple stylesheet to normalize element margin, padding and some others.

Plugin Overrides

The plugin overrides file contains all of override stylesheet for 3rd plugins.

Responsive

The responsive file contains some stylesheet overrides for some elements in different resolution.

Shortcodes

The shortcodes file contains simple shortcode class such margin, padding etc, included by template.

Main

The main file is the main SCSS file that imports all of the above SCSS files.

3rd Assets / Plugins

Bootstrap 4

We used bootstrap 4 as main CSS framework, which is the latest version of bootstrap. Some default bootstrap stylesheet has been overrided to adjust with template design.

Font Awesome 4

We used fontawesome 4 as it has many variants of icons we can use. We can see list of icons on the icon menu in the template or by visiting the fontawesome page by clicking here.

Animate CSS

Animate css is a very interesting CSS animation template. To be able to use it we just need to add the animation class to the desired element. To see all list of animations that we can use you can access animate css page by clicking here.

	<section class="bounce animated"></section>
				

Full Calendar

Full calendar is one of powerfull, customizable and open source event calendar. The official site is located here. Here is the simple snippet to call full calendar plugin.

	// Calendar
	if ($('#full-calendar').length) {
		var calendar, d, date, m, y;
		date = new Date();
		d = date.getDate();
		m = date.getMonth();
		y = date.getFullYear();

		calendar = $("#full-calendar").fullCalendar({
			header: {
				left: "prev,next today",
				center: "title",
				right: "month,agendaWeek,agendaDay"
			},
			selectable: true,
			selectHelper: true,
			select: function select(start, end, allDay) {
				var title;
				title = prompt("Event Title:");
				if (title) {
					calendar.fullCalendar("renderEvent", {
						title: title,
						start: start,
						end: end,
						allDay: allDay
					}, true);
				}
				return calendar.fullCalendar("unselect");
			},
			editable: true,
			events: [{
				title: "Long Event",
				start: new Date(y, m, 3, 12, 0),
				end: new Date(y, m, 7, 14, 0)
			}, {
				title: "Lunch",
				start: new Date(y, m, d, 12, 0),
				end: new Date(y, m, d + 2, 14, 0),
				allDay: false
			}, {
				title: "Click for Google",
				start: new Date(y, m, 28),
				end: new Date(y, m, 29),
				url: "http://google.com/"
			}]
		});
	}
				

Tips

jQuery Datatable

jQuery datatable provide simple way to show list of data on table format. It will generate search, pagination, and sort feature too. The official site of datatable is located here. Here is the simple snippet to call datatable plugin.

	// Datatable
	$('.datatable').DataTable()
				

Dropzone

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable. The official site of dropzone is located here. We can call dropzone plugin in multiple way, here is the simplest one.

<form action="/" class="dropzone" id="my-awesome-dropzone">
	<div class="dz-message">
		<div>
			<h4>Drop files here or click to upload.</h4>
			<div class="text-muted">(This is just a demo dropzone. Selected files are not actually uploaded)</div>
		</div>
	</div>
</form>
				

Select2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. The official site of select2 is located here. Here is the simple snippet to call select2 plugin.

	// Select2
	$('.select2').select2()
				

Bootstrap Datepicker

A JavaScript component for choosing date ranges. Designed to work with the Bootstrap CSS framework. The official site of bootstrap daterange picker is located here. Here is the simple snippet to call bootstrap daterange picker plugin.

	// Single date picker
	$('input.single-daterange').daterangepicker({ "singleDatePicker": true })

	// Range date picker
	$('input.multi-daterange').daterangepicker({ "startDate": "03/28/2017", "endDate": "04/06/2017" })
				

Bootstrap Validator

The Validator plugin offers automatic form validation configurable via mostly HTML5 standard attributes. It also provides an unobtrusive user experience, because nobody likes a naggy form. The official site of bootstrap validator is located here. Here is the simple snippet to call bootstrap validator plugin.

	$('#form-validate').validator()
				

Ckeditor

CKEditor is a free, Open Source HTML text editor designed to simplify website content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. The official site of ckeditor is located here. Here is the simple snippet to call ckeditor plugin.

	CKEDITOR.replace('ckeditor')
				

jQuery CountTo

jQuery countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element. The official site of jQuery countTo is located here. Here is the simple snippet to call jQuery countTo plugin.

	$(this).countTo({
		speed: 2000,
		formatter: function (value, options) {
			return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')
		}
	})
				

Fancybox 3

FancyBox is a JavaScript library used to present images, videos and any html content in an elegant way. It has all features you would expect - touch enabled, responsive and fully customizable. The official site of fancybox is located here. Here is the simple snippet to call fancybox plugin.

	$(".data-fancybox").fancybox({
		// Options will go here
	});
				

Chart.js

Simple yet flexible JavaScript charting for designers & developers. The official site of chart.js is located here. Here is the simple snippet to call chart.js plugin.

	
	var donutChart = $("#donut-chart");
	var data = {
		labels: ["Red", "Yellow", "Green", "Blue"],
		datasets: [{
			data: [80, 120, 80, 50],
			backgroundColor: ["#ff4141", "#FBC02D", "#71c21a", "#5797fc"],
			hoverBackgroundColor: ["#ff5c5c", "#fdcd54", "#89da32", "#6ca4fb"],
			borderWidth: 0
		}]
	};

	new Chart(donutChart, {
		type: 'doughnut',
		data: data,
		options: {
			legend: {
				display: false
			},
			animation: {
				animateScale: true
			},
			cutoutPercentage: 80
		}
	});
				

Changelog

Following you'll find a list of all theme Pongo Admin releases with a log of features added and bug fixes next to each one.

Version 1.1 (July 12th, 2017) - Add chat page, button variants, landing page, icon variants, and some responsive bug fix

Version 1.0 (July 6th, 2017) - Initial Template Release