Dashboard template

Installation

npm install --save css-ui-dashboard

Demo

Quick start

<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">

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

<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>

<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>

<!-- 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>

<script src="path/to/nanobar.js"></script>
<script>
	$(function() {
		var nanobar = new Nanobar();
		nanobar.go(100);
	});
</script>

<!-- 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>

.scrollbar.table {
 height: 200px;
}

<!-- 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>