Introduction

Cubic Admin is a webapp template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 3.3.7. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications.

Installation

cubic-html + plugins (Required) = done.

Template Structure

All template files have fixed structure consisting of .navbar-header, .sidebar .page-wrapper, .footer

Begining of Page

Below code is used at the beginning of all HTML pages.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="icon" type="image/png" sizes="16x16" href="../plugins/images/favicon.png">

    <title>Cubic Admin Template</title>

    <!-- ===== Bootstrap CSS ===== -->
    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- ===== Plugin CSS (if any) ===== -->
   
    <!-- ===== Animation CSS ===== -->
    <link href="css/animate.css" rel="stylesheet">

    <!-- ===== Custom CSS ===== -->
    <link href="css/style.css" rel="stylesheet">

    <!-- ===== Color CSS ===== -->
    <link href="css/colors/default.css" id="theme" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

Preloader (Spinner)

Below code is used to load spinner for the template.

<!-- Preloader -->
<div class="preloader">
  <div class="cssload-speeding-wheel"></div>
</div>

Logo

Below code is used for logo. You can change it by text or image or icon. If your image height is bigger than 60px, you need to resize your logo or give height="60" to your logo img tag.

<a class="logo" href="index.html">
    <b>
        <img src="../plugins/images/logo.png" alt="home" />
    </b>
    <span>
        <img src="../plugins/images/logo-text.png" alt="homepage" class="dark-logo" />
    </span>
</a>

Left Sidebar Menu

Below code is used for left sidebar menu

<!-- ===== Left-Sidebar ===== -->
<aside class="sidebar" role="navigation">
    <div class="scroll-sidebar">
        <div class="user-profile">
            <div class="dropdown user-pro-body">
                <div class="profile-image">
                    <img src="../plugins/images/users/hanna.jpg" alt="user-img" class="img-circle">
                    <a href="javascript:void(0);" class="dropdown-toggle u-dropdown text-blue" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="badge badge-danger">
                            <i class="fa fa-angle-down"></i>
                        </span>
                    </a>
                    <ul class="dropdown-menu animated flipInY">
                        <li><a href="javascript:void(0);"><i class="fa fa-user"></i> Profile</a></li>
                        <li><a href="javascript:void(0);"><i class="fa fa-inbox"></i> Inbox</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="javascript:void(0);"><i class="fa fa-cog"></i> Account Settings</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href=""><i class="fa fa-power-off"></i> Logout</a></li>
                    </ul>
                </div>
                <p class="profile-text m-t-15 font-16"><a href="javascript:void(0);"> Hanna Gover</a></p>
            </div>
        </div>
        <nav class="sidebar-nav">
            <ul id="side-menu">
                <li>
                    <a class="active waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-screen-desktop fa-fw"></i> <span class="hide-menu"> Dashboard <span class="label label-rounded label-info pull-right">3</span></span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="index.html">Modern Version</a> </li>
                        <li> <a href="index2.html">Clean Version</a> </li>
                        <li> <a href="index3.html">Analytical Version</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-basket fa-fw"></i> <span class="hide-menu"> eCommerce </span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="index4.html">Dashboard</a> </li>
                        <li> <a href="products.html">Products</a> </li>
                        <li> <a href="product-detail.html">Product Detail</a> </li>
                        <li> <a href="product-edit.html">Product Edit</a> </li>
                        <li> <a href="product-orders.html">Product Orders</a> </li>
                        <li> <a href="product-cart.html">Product Cart</a> </li>
                        <li> <a href="product-checkout.html">Product Checkout</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-envelope-letter fa-fw"></i> <span class="hide-menu"> Inbox <span class="label label-rounded label-primary pull-right">5</span></span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="inbox.html">Mail Box</a> </li>
                        <li> <a href="inbox-detail.html">Mail Details</a> </li>
                        <li> <a href="compose.html">Compose Mail</a> </li>
                        <li> <a href="contact.html">Contact</a> </li>
                        <li> <a href="contact-detail.html">Contact Detail</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-equalizer fa-fw"></i> <span class="hide-menu"> UI Elements<span class="label label-rounded label-danger pull-right">18</span></span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li><a href="panels-wells.html">Panels and Wells</a></li>
                        <li><a href="panel-ui-block.html">Panels With BlockUI</a></li>
                        <li><a href="portlet-draggable.html">Draggable Portlet</a></li>
                        <li><a href="buttons.html">Buttons</a></li>
                        <li><a href="tabs.html">Tabs</a></li>
                        <li><a href="modals.html">Modals</a></li>
                        <li><a href="progressbars.html">Progress Bars</a></li>
                        <li><a href="notification.html">Notifications</a></li>
                        <li><a href="carousel.html">Carousel</a></li>
                        <li><a href="user-cards.html">User Cards</a></li>
                        <li><a href="timeline.html">Timeline</a></li>
                        <li><a href="timeline-horizontal.html">Horizontal Timeline</a></li>
                        <li><a href="range-slider.html">Range Slider</a></li>
                        <li><a href="ribbons.html">Ribbons</a></li>
                        <li><a href="steps.html">Steps</a></li>
                        <li><a href="session-idle-timeout.html">Session Idle Timeout</a></li>
                        <li><a href="session-timeout.html">Session Timeout</a></li>
                        <li><a href="bootstrap.html">Bootstrap UI</a></li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-notebook fa-fw"></i> <span class="hide-menu"> Forms </span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li><a href="form-basic.html">Basic Forms</a></li>
                        <li><a href="form-layout.html">Form Layout</a></li>
                        <li><a href="icheck-control.html">Icheck Control</a></li>
                        <li><a href="form-advanced.html">Form Addons</a></li>
                        <li><a href="form-upload.html">File Upload</a></li>
                        <li><a href="form-dropzone.html">File Dropzone</a></li>
                        <li><a href="form-pickers.html">Form-pickers</a></li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-grid fa-fw"></i> <span class="hide-menu"> Tables</span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li><a href="basic-table.html">Basic Tables</a></li>
                        <li><a href="table-layouts.html">Table Layouts</a></li>
                        <li><a href="data-table.html">Data Table</a></li>
                        <li><a href="bootstrap-tables.html">Bootstrap Tables</a></li>
                        <li><a href="responsive-tables.html">Responsive Tables</a></li>
                        <li><a href="editable-tables.html">Editable Tables</a></li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-pie-chart fa-fw"></i> <span class="hide-menu"> Charts</span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li><a href="morris-chart.html">Morris Chart</a></li>
                        <li><a href="peity-chart.html">Peity Charts</a></li>
                        <li><a href="knob-chart.html">Knob Charts</a></li>
                        <li><a href="sparkline-chart.html">Sparkline charts</a></li>
                    </ul>
                </li>
                <li>
                    <a href="widgets.html" aria-expanded="false"><i class="icon-settings fa-fw"></i> <span class="hide-menu"> Widgets </span></a>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-bulb fa-fw"></i> <span class="hide-menu"> Icons</span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="simple-line.html">Simple Line</a> </li>
                        <li> <a href="fontawesome.html">Fontawesome</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-location-pin fa-fw"></i> <span class="hide-menu"> Maps</span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="map-google.html">Google Map</a> </li>
                        <li> <a href="map-vector.html">Vector Map</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-docs fa-fw"></i> <span class="hide-menu"> Pages<span class="label label-rounded label-success pull-right">18</span></span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="javascript:void(0);">Error Pages</a>
                            <ul aria-expanded="false" class="collapse">
                                <li> <a href="400.html">400</a> </li>
                                <li> <a href="403.html">403</a> </li>
                                <li> <a href="404.html">404</a> </li>
                                <li> <a href="500.html">404</a> </li>
                                <li> <a href="503.html">404</a> </li>
                            </ul>
                        </li>
                        <li><a href="starter-page.html">Starter Page</a></li>
                        <li><a href="blank.html">Blank Page</a></li>
                        <li><a href="search-result.html">Search Result</a></li>
                        <li><a href="custom-scroll.html">Custom Scrolls</a></li>
                        <li><a href="login.html">Login Page</a></li>
                        <li><a href="lock-screen.html">Lock Screen</a></li>
                        <li><a href="recoverpw.html">Recover Password</a></li>
                        <li><a href="animation.html">Animations</a></li>
                        <li><a href="profile.html">Profile</a></li>
                        <li><a href="invoice.html">Invoice</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="pricing.html">Pricing</a></li>
                        <li><a href="register.html">Register</a></li>
                    </ul>
                </li>
                <li>
                    <a href="calendar.html" aria-expanded="false"><i class="icon-calender fa-fw"></i> <span class="hide-menu">Calendar</span></a>
                </li>
            </ul>
        </nav>
        <div class="p-30">
            <span class="hide-menu">
                <a href="javascript:void(0);" target="_blank" class="btn btn-success">Buy Cubic Admin</a>
                <a href="javascript:void(0);" target="_blank" class="btn btn-default m-t-15">Check Documentation</a>
            </span>
        </div>
    </div>
</aside>
<!-- ===== Left-Sidebar-End ===== -->
sidebar

Page Content, Right Sidebar and Footer

Below code is used for page content, right sidebar and footer in all pages.

<!-- Page Content -->
         <div class="page-wrapper">
            <div class="container-fluid">
               <!-- .Your content row -->
               <div class="row">
                  <div class="col-md-12">
                     <div class="white-box">
                        <h4 class="box-title">Blank Starter page</h4>
                     </div>
                  </div>
               </div>
               <!-- /.Your content row -->
               <!-- .right-sidebar -->
               <div class="right-sidebar">
                  <div class="slimscrollright">
                     <div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
                     <div class="r-panel-body">
                        
                     </div>
                  </div>
               </div>
               <!-- /.right-sidebar -->
            </div>
            <!-- /.container-fluid -->
            <footer class="footer text-center"> 2017 © Cubic Admin by themedesigner.in </footer>
         </div>
         <!-- /page-wrapper -->

Theme Options (custom.js)

Below js code is used for theme setting, fix header, fix sidebar and right sidebar open-close.

// ============================================================== 
// Theme options
// ==============================================================     
$(".sidebartoggler").on('click', function() {
    if ($("body").hasClass("mini-sidebar")) {
        $("body").trigger("resize");
        $(".scroll-sidebar, .slimScrollDiv").css("overflow", "hidden").parent().css("overflow", "visible");
        $("body").removeClass("mini-sidebar");
        $('.top-left-part span').show();
        $(".sidebartoggler i").addClass("fa fa-bars");
    } else {
        $("body").trigger("resize");
        $(".scroll-sidebar, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
        $("body").addClass("mini-sidebar");
        $('.top-left-part span').hide();
        $(".sidebartoggler i").removeClass("fa fa-bars");
    }
});

// ============================================================== 
// Right sidebar options
// ============================================================== 
$(".right-side-toggler").click(function() {
    $(".right-sidebar").slideDown(50);
    $(".right-sidebar").toggleClass("shw-rside");
    // Fix header
    $(".fxhdr").click(function() {
        $("body").toggleClass("fix-header");
    });
    // Fix sidebar
    $(".fxsdr").click(function() {
        $("body").toggleClass("fix-sidebar");
    });
});

Sidebar Navigation & Responsiveness Across All Devices

Below js code is used for sidebar open-close, changing viewport size in all devices and toggle sidebar.

var set = function() {
    var width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width;
    var topOffset = 60;
    if (width < 1170) {
        $("body").addClass("mini-sidebar");
        $('.top-left-part span').hide();
        $(".scroll-sidebar, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
        $(".sidebartoggler i").addClass("fa fa-bars");
    } else {
        $("body").removeClass("mini-sidebar");
        $('.top-left-part span').show();
        $(".sidebartoggler i").removeClass("fa fa-bars");
    }

    var height = ((window.innerHeight > 0) ? window.innerHeight : this.screen.height) - 1;
    height = height - topOffset;
    if (height < 1) height = 1;
    if (height > topOffset) {
        $(".page-wrapper").css("min-height", (height) + "px");
    }
};
$(window).ready(set);
$(window).on("resize", set);

// this is for close icon when navigation open in mobile view
$(".navbar-toggle").click(function() {
    $("body").toggleClass("show-sidebar");
    $(".navbar-toggle i").toggleClass("fa-bars");
    $(".navbar-toggle i").addClass("fa-close");
});
$(".sidebartoggler").on('click', function() {
    $(".sidebartoggler i").toggleClass("fa fa-bars");
});

// ============================================================== 
// Auto select left navbar
// ============================================================== 
$(function() {
    var url = window.location;
    var element = $('ul#side-menu a').filter(function() {
        return this.href == url;
    }).addClass('active').parent().addClass('active');
    while (true) {
        if (element.is('li')) {
            element = element.parent().addClass('in').parent();
        } else {
            break;
        }
    }
});

Font Family

Change the font family of template by simply changing the google font url and @basefont1 variable in variable.less file.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
@basefont1: 'Open Sans', sans-serif;

Css

We made 6 different less files for customization.

variable.less (includes all variables of the template)
common.less (includes all common elements)
app.less (includes all dashboard elements/widgets)
pages.less (includes each page styles)
widget.less (includes innerpage widgets)
responsive.less (includes responsive layout of the template)

Starter Page

You can start your new project with starter-page.html. In that page, all the unnecessary script and html code is removed, so you can start fresh.

Folder Structure

                

                  Root
                  ├── 
                  │   └── cubic-html/
                  │       └── Css
                  │            └── All Css files
                  │       └── Js
                  │            └── All Js files
                  │       └── Less
                  │            └── All Less files
                  │       └── Bootstrap
                  │            └── Bootstrap 3.3.7 files
                  │       └── All Html Pages
                  │
                  │   └── Plugins/
                  │       └── components
                  │            └── All Required plugins files
                  │       └── Images
                  │             └── All Theme Images
                  └──

Html Structure

<body>

<!-- Preloader -->
<div class="preloader">
<div class="cssload-speeding-wheel"></div>
</div>
<!-- End Preloader -->

<!-- Wrapper -->
<div id="wrapper">

    <!-- Top Section -->
    <nav class="navbar navbar-default navbar-static-top">

    <!-- Your Logo -->
    <div class="top-left-part">
      <a href="index.html" class="logo"> ... </a> 
    </div>
    <!-- End Your Logo -->
    </nav>
    <!-- Top Section End -->

    <!-- Left Navigation -->
    <div class="navbar-default sidebar slimscroll"> </div>
    <!-- Left Navigation End -->

    <!-- Main Content -->
    <!-- Start Page wrapper -->
    <div class="page-wrapper">
       <!-- Start Container -->
      <div class="container-fluid"> ... </div>
       <!-- End container -->
    </div>
    <!-- End Page wrapper -->

    <!-- footer -->
    <footer class="footer text-center"> 2017 © cubic admin by themedesigner.in </footer>
    <!-- End footer -->

</div>
<!-- End Wrapper -->

</body>
</html>

Color Variations

Replace color css from head section with any of the options availabel from below.

<link href="css/colors/default.css" id="theme" rel="stylesheet">

<link href="css/colors/green.css" id="theme" rel="stylesheet">

<link href="css/colors/red.css" id="theme" rel="stylesheet">

<link href="css/colors/yellow.css" id="theme" rel="stylesheet">

<link href="css/colors/purple.css" id="theme" rel="stylesheet">

<link href="css/colors/black.css" id="theme" rel="stylesheet">

Layout

Add following classes in the body tag to fix sidebar and header.

To fix header add .fix-header class in the body tag.

To fix sidebar add .fix-sidebar class to the body tag.

Less - Css

File Description
bootstrap.css bootstrap v3.3.7
spinners.css/spinners.css This file is has preloader css.
common.less/common.css This file has all the common classes for the template.
app.less/app.css This file has all the dashboard widget's styles for the template.
variable.less/variable.css This file has all the predefine less variables for the template.
sidebar-nav.less/sidebar-nav.css this file has sidebar related css code.
widgets.less/widgets.css This file has all other widget's styles.
responsive.less/responsive.css This file has all the responsive styles.

Js Files

File Description
jquery.js, bootstrap.js, jquery.slimscroll.js These files are the core js files of the theme.
custom.js This file has all the custom javascript for the theme.
sidebarmenu.js This file contains sidebar navigation javascript.
wave.js This is used for wave effects on buttons and other elements.
Service Panel
© 2017 Cubic Admin by themedesigner.in