Dashboard template

Simple and fast dashboard template.

Installation

npm install --save css-ui-dashboard

Demo

• https://css-ui.github.io/dashboard/simple
• https://css-ui.github.io/dashboard/full

Quick start

CSS dependencies.

<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/perfect-scrollbar.css">
<link rel="stylesheet" href="path/to/font-awesome.css">
<link rel="stylesheet" href="path/to/open-sans.css">
<link rel="stylesheet" href="path/to/cssui.css">

An additional CSS/html/js according to instructions.

• CSS dropdown menu
• CSS Responsive menu

Other as necessary.

• CSS tooltip
• CSS table
• CSS modal

CSS dashboard.

<link rel="stylesheet" href="path/to/style.dashboard.css">
<link rel="stylesheet" href="path/to/style.css">

We will add new features.

• Add logged to sidebar.

<div class="logged sidebar">
	<ul class="clear">
		<li class="gravatar float left"><img src="path/to/user.png" alt="user"></li>
		<li class="user float left">John Doe <a href="#">Logout</a></li>
	</ul>
</div>

• Add header.

<div class="header">
	<div class="clear">

		<!-- header dashboard -->
		<div class="float left">
			<ul class="breadcrumb">
				<li><a href=""><i class="fa fa-square-o" aria-hidden="true"></i>Dashboard</a></li>
				<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Sample</li>
			</ul>
		</div>

		<!-- logged in header user -->
		<div class="float right user panel">

			<!-- user identity -->
			<div class="float left logged in">
				<ul class="clear">
					<li class="user float left">You login as John Doe</li>
					<li class="gravatar float left"><img src="path/to/user.png" alt="user"></li>
				</ul>
			</div>

			<!-- dropdown menu -->
			<div class="float left">

				<!--                   -->
				<!-- Add dropdown menu -->
				<!--                   -->

			</div>
		</div>
	</div>
</div>

<!-- content -->
<div class="content">
	<div class="box style">
		<h4>Sample</h4>
		Content...
	</div>
</div>

Location of new properties.

<!-- nav wrapper -->
<div class="nav">

	<!-- click show/hide menu -->
	<div class="click"></div>
	<div class="sidebar">

		<!-- title for sidebar -->
		<div class="title">
			<p>Title for sidebar</p>
		</div>

		<!--                       -->
		<!-- Add logged to sidebar -->
		<!--                       -->

		<div class="responsive">
			<ul class="menu scrollbar">

				<!--                     -->
				<!-- Add responsive menu -->
				<!--                     -->

			</ul>
		</div>
	</div>
</div>

<!-- content wrapper -->
<div class="content-wrapper">

	<!--            -->
	<!-- Add header -->
	<!--            -->

</div>

javascript libraries and plugins.

<script src="path/to/nanobar.js"></script>
<script>
	$(function() {

		var nanobar = new Nanobar();
		nanobar.go(100);

	});
</script>

Activating the scrollbar on the tables.

<!-- css scrollbar -->
<link rel="stylesheet" href="path/to/style.scrollbar.css">

<!-- html use class -->
<div class="scrollbar table">
	<table>...</table>
</div>

<!-- javascript scrollbar -->
<script src="path/to/jquery.floatThead.js"></script>
<script>
	$(function() {

		var table = $('table');
		var scrollbar = '.scrollbar.table';
		$(scrollbar).each(function() {
			new PerfectScrollbar($(this)[0]);
		});
		table.floatThead({
			scrollContainer: function(table) {
				return table.closest(scrollbar);
			}
		});
	});
</script>

Fixed set heights for tables are set in this class.

.scrollbar.table {
    height: 200px;
}

How to close the displayed message.

<!-- html message -->
<p class="message info">
	Message...
	<span class="close-message">
		<i class="fa fa-times" aria-hidden="true"></i>
	</span>
</p>

<!-- javascript close message -->
<script>
	$(function() {

		$('.close-message').on('click', function() {
			$(this).parent().fadeOut('slow');
		});
	});
</script>

Enjoy dashboard.