Simple and fast dashboard template.
npm install --save css-ui-dashboard
CSS dependencies.
<linkrel="stylesheet" href="path/to/normalize.css"><linkrel="stylesheet" href="path/to/perfect-scrollbar.css"><linkrel="stylesheet" href="path/to/font-awesome.css"><linkrel="stylesheet" href="path/to/open-sans.css"><linkrel="stylesheet" href="path/to/cssui.css">An additional CSS/html/js according to instructions.
Other as necessary.
CSS dashboard.
<linkrel="stylesheet" href="path/to/style.dashboard.css"><linkrel="stylesheet" href="path/to/style.css">We will add new features.
- Add logged to sidebar.
<divclass="logged sidebar"><ulclass="clear"><liclass="gravatar float left"><imgsrc="path/to/user.png" alt="user"></li><liclass="user float left">John Doe <ahref="#">Logout</a></li></ul></div>- Add header.
<divclass="header"><divclass="clear"><!-- header dashboard --><divclass="float left"><ulclass="breadcrumb"><li><ahref=""><iclass="fa fa-square-o" aria-hidden="true"></i>Dashboard</a></li><li><iclass="fa fa-long-arrow-right" aria-hidden="true"></i>Sample</li></ul></div><!-- logged in header user --><divclass="float right user panel"><!-- user identity --><divclass="float left logged in"><ulclass="clear"><liclass="user float left">You login as John Doe</li><liclass="gravatar float left"><imgsrc="path/to/user.png" alt="user"></li></ul></div><!-- dropdown menu --><divclass="float left"><!-- --><!-- Add dropdown menu --><!-- --></div></div></div></div><!-- content --><divclass="content"><divclass="box style"><h4>Sample</h4>
Content...
</div></div>Location of new properties.
<!-- nav wrapper --><divclass="nav"><!-- click show/hide menu --><divclass="click"></div><divclass="sidebar"><!-- title for sidebar --><divclass="title"><p>Title for sidebar</p></div><!-- --><!-- Add logged to sidebar --><!-- --><divclass="responsive"><ulclass="menu scrollbar"><!-- --><!-- Add responsive menu --><!-- --></ul></div></div></div><!-- content wrapper --><divclass="content-wrapper"><!-- --><!-- Add header --><!-- --></div>javascript libraries and plugins.
<scriptsrc="path/to/nanobar.js"></script><script>$(function(){varnanobar=newNanobar();nanobar.go(100);});</script>Activating the scrollbar on the tables.
<!-- css scrollbar --><linkrel="stylesheet" href="path/to/style.scrollbar.css"><!-- html use class --><divclass="scrollbar table"><table>...</table></div><!-- javascript scrollbar --><scriptsrc="path/to/jquery.floatThead.js"></script><script>$(function(){vartable=$('table');varscrollbar='.scrollbar.table';$(scrollbar).each(function(){newPerfectScrollbar($(this)[0]);});table.floatThead({scrollContainer: function(table){returntable.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 --><pclass="message info">
Message...
<spanclass="close-message"><iclass="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.