https://github.com/paomedia/clearmin

Bootstrap 3 responsive dashboard / webapp / admin template
https://github.com/paomedia/clearmin

admin-dashboard bootstrap3

Last synced: 2 days ago
JSON representation

Bootstrap 3 responsive dashboard / webapp / admin template

• Host: GitHub
• URL: https://github.com/paomedia/clearmin
• Owner: paomedia
• License: gpl-3.0
• Created: 2016-03-08T15:53:13.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-02-07T12:58:41.000Z (almost 5 years ago)
• Last Synced: 2024-12-24T23:06:28.382Z (9 days ago)
• Topics: admin-dashboard, bootstrap3
• Language: JavaScript
• Homepage:
• Size: 1.61 MB
• Stars: 261
• Watchers: 22
• Forks: 119
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Clearmin Web Template

![Clearmin template](preview.png)

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 :

```html

  

    

    

    

    

    

    

    

    Clearmin Page

  

  

    


      

        


        


      

      


        


          


            


              
This page is active

            

          

        

      

    

    

      

        


        
Put your title here

      

    

    


      


        


          


            
Hello World !

          

        

      

      © ACME Inc.

    

    

    

    

    

    

    

  


```

## General structure

### CSS and JS files

**CSS files (``) :**

*   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 ``) :**

*   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

*   [Bootstrap](http://getbootstrap.com/) css front-end framework.

*   [jQuery](http://jquery.com/) fast, small, and feature-rich JavaScript library.

*   [Summernote](http://hackerwins.github.io/summernote/) Super Simple WYSIWYG Editor on Bootstrap

*   [Font Awesome](http://fortawesome.github.io/Font-Awesome/) The iconic font and CSS toolkit

*   [Roboto](https://www.google.com/fonts/specimen/Roboto) Google font

*   [Small-n-flat icons](https://github.com/paomedia/small-n-flat) SVG icons on a 24px grid

*   [Material Design Icons](https://github.com/google/material-design-icons) Google SVG icons

*   [D3.js](http://d3js.org/) Data-Driven Documents

*   [C3.js](http://c3js.org/) D3-based reusable chart library

*   [Fastclick](https://github.com/ftlabs/fastclick) Polyfill to remove click delays on browsers with touch UIs

*   [Jquery-cookie](https://github.com/carhartl/jquery-cookie) A simple, lightweight jQuery plugin for reading, writing and deleting cookies

*   [Jquery-mousewheel](https://github.com/jquery/jquery-mousewheel) A jQuery plugin that adds cross-browser mouse wheel support