Bootstrap 3 dashboard / webapp / admin template
Check the demo : http://cm.paomedia.com/
More doc inside the repo
Browser support : ie9+, (Chrome, firefox, opera, safari), mobile browsers
To start using Clearmin template in a new project you can use this minimal template :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-clearmin.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/roboto.css">
<link rel="stylesheet" type="text/css" href="assets/css/material-design.css">
<link rel="stylesheet" type="text/css" href="assets/css/small-n-flat.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<title>Clearmin Page</title>
</head>
<body class="cm-no-transition cm-1-navbar">
<div id="cm-menu">
<nav class="cm-navbar cm-navbar-primary">
<div class="cm-flex"><div class="cm-logo"></div></div>
<div class="btn btn-primary md-menu-white" data-toggle="cm-menu"></div>
</nav>
<div id="cm-menu-content">
<div id="cm-menu-items-wrapper">
<div id="cm-menu-scroller">
<ul class="cm-menu-items">
<li class="active"><a href="#" class="sf-house">This page is active</a></li>
</ul>
</div>
</div>
</div>
</div>
<header id="cm-header">
<nav class="cm-navbar cm-navbar-primary">
<div class="btn btn-primary md-menu-white hidden-md hidden-lg" data-toggle="cm-menu"></div>
<div class="cm-flex"><h1>Put your title here</h1></div>
</nav>
</header>
<div id="global">
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">
<h2 style="margin:0">Hello World !</h2>
</div>
</div>
</div>
<footer class="cm-footer"><span class="pull-right">© ACME Inc.</span></footer>
</div>
<script src="assets/js/lib/jquery.min.js"></script>
<script src="assets/js/jquery.mousewheel.min.js"></script>
<script src="assets/js/jquery.cookie.min.js"></script>
<script src="assets/js/fastclick.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/clearmin.min.js"></script>
</body>
</html>
CSS files (<head>
) :
Javascript files (just before </body>
) :
When the user choose to use the condensed version of the side menu, we want it to stay in this state when the user click on another page. To achieve this, a cookie is automatically set to reflect the menu state.
You got two different way to restore this state :
.cm-menu-toggled
class to the body tag..cm-menu-toggled
is automaticaly added to the body when needed but it can cause a blinking reflow on certain browsers (e.g. Google Chrome)