All Projects → paomedia → Clearmin

paomedia / Clearmin

Licence: gpl-3.0
Bootstrap 3 responsive dashboard / webapp / admin template

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Clearmin

Gentelella Rtl
Free RTL Bootstrap 3 Admin Template
Stars: ✭ 194 (-16.74%)
Mutual labels:  admin-dashboard, bootstrap3
React Director Admin Template
ReactJS version of Director Responsive Admin Template Free
Stars: ✭ 304 (+30.47%)
Mutual labels:  admin-dashboard, bootstrap3
Notus React
Notus React: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 173 (-25.75%)
Mutual labels:  admin-dashboard
Angular Adminlte
AngularjsApp Implementation of renowned Admin-LTE theme (https://github.com/almasaeed2010/AdminLTE) now with many useful directives and features.
Stars: ✭ 214 (-8.15%)
Mutual labels:  admin-dashboard
Mazer
Free and Open-source Bootstrap 5 Admin Dashboard Template and Landing Page
Stars: ✭ 195 (-16.31%)
Mutual labels:  admin-dashboard
Jblog
🔱一个简洁漂亮的java blog 👉基于Spring /MVC+ Hibernate + MySQL + Bootstrap + freemarker. 实现 🌈
Stars: ✭ 187 (-19.74%)
Mutual labels:  bootstrap3
Inkscope
inkScope is a ceph visualization and admin interface
Stars: ✭ 204 (-12.45%)
Mutual labels:  admin-dashboard
Yii2 Bootstrap
Yii 2 Bootstrap 3 Extension
Stars: ✭ 177 (-24.03%)
Mutual labels:  bootstrap3
Angular Material Dashboard
Angular Material Dasshboard using Angular Material, highcharts and flexbox
Stars: ✭ 227 (-2.58%)
Mutual labels:  admin-dashboard
Django Bootstrap3
Bootstrap 3 integration with Django.
Stars: ✭ 2,271 (+874.68%)
Mutual labels:  bootstrap3
Yoyocms.abpprojecttemplate
一个基于-vue+vuex+vue-router+EF开发的权限管理系统
Stars: ✭ 213 (-8.58%)
Mutual labels:  admin-dashboard
Laradmin
Laradmin后台管理系统
Stars: ✭ 197 (-15.45%)
Mutual labels:  admin-dashboard
Cms
Multilingual PHP CMS built with Laravel and bootstrap
Stars: ✭ 2,342 (+905.15%)
Mutual labels:  admin-dashboard
Fireadmin
Application for Managing Firebase Applications. Includes support for multiple environments and data migrations
Stars: ✭ 207 (-11.16%)
Mutual labels:  admin-dashboard
Voler
The first Bootstrap 5 admin dashboard template
Stars: ✭ 183 (-21.46%)
Mutual labels:  admin-dashboard
Material Admin
Free Material Admin Template
Stars: ✭ 219 (-6.01%)
Mutual labels:  admin-dashboard
Ember Cli Admin
Ember-cli-admin is a powerful admin dashboard for ember-cli projects
Stars: ✭ 178 (-23.61%)
Mutual labels:  admin-dashboard
Cms
GleezCMS - A Light, Simple, Flexible Content Management System
Stars: ✭ 200 (-14.16%)
Mutual labels:  bootstrap3
React Firebase Admin
React ⚛️ starter kit with Firebase 🔥 and Bulma for setting up an admin dashboard - Highly scalable, PWA, Serverless
Stars: ✭ 232 (-0.43%)
Mutual labels:  admin-dashboard
Appy
🚀 A full stack boilerplate web app
Stars: ✭ 225 (-3.43%)
Mutual labels:  admin-dashboard

Clearmin Web Template

Clearmin template

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

Quick start

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">&copy; 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>

General structure

CSS and JS files

CSS files (<head>) :

  • assets/css/roboto.css (main font)
  • assets/css/bootstrap-clearmin.css (bootstrap theme)
  • assets/css/material-design.css (material design svg icons classes)
  • assets/css/small-n-flat.css (small-n-flat svg icons classes)
  • assets/css/font-awesome.min.css (iconic font classes)

Javascript files (just before </body>) :

  • assets/js/lib/jquery.min.js (required by bootstrap)
  • assets/js/lib/jquery.mousewheel.min.js (catch some scrolling events)
  • assets/js/lib/jquery.cookie.min.js (cookie manipulation plugin)
  • assets/js/lib/fastclick.min.js (enhance mobile device click events)
  • assets/js/bootstrap.min.js (bootstrap js widgets)
  • assets/js/clearmin.js (required by clearmin)

Body classes

  • cm-no-transition : must be present to prevent certain browser to start transition on page load
  • cm-1-navbar : when one navbar is present on your page
  • cm-2-navbar : when two navbars are present on your page
  • cm-3-navbar : when three navbars are present on your page
  • cm-menu-toggled : if you want the menu to be toggled on page load (see next section)

Preserving left menu state between pages

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 :

  • Server-side (recommended) : when your server receive a cookie named "cm-menu-toggled" with value "true", just add .cm-menu-toggled class to the body tag.
  • Client-side : Nothing to do, .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)

Credits

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].