Documentation - Color Admin

File structure overview for Ajax Version

template_ajax/
├── index.html
└── pages/
    └── /* list of page html file here */

Below is the code from template_ajax/index.html which include the page loader, header, sidebar, page content and theme panel. You may remove the component if you are not using it.

<!-- begin #page-loader -->
<div id="page-loader" class="fade show"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="page-container fade page-sidebar-fixed page-header-fixed">
  <!-- begin #header -->
  <div id="header" class="header navbar-default"></div>
  <!-- end #header -->
  
  <!-- begin #sidebar -->
  <div id="sidebar" class="sidebar"></div>
  <div class="sidebar-bg"></div>
  <!-- end #sidebar -->
  
  <!-- begin #content -->
  <div id="content" class="content"></div>
  <!-- end #content -->
  
  <!-- begin theme-panel -->
  <div class="theme-panel"></div>
  <!-- end theme-panel -->
  
  <!-- begin scroll to top btn -->
  <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" 
    data-click="scroll-top">
    <i class="fa fa-angle-up"></i>
  </a>
  <!-- end scroll to top btn -->
</div>
<!-- end page container -->

Below code is used to detect the internet explorer for browser compatibility & styling setting usage.

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

Page head contains metadata, javascript and css files:

<head>
  <meta charset="utf-8" />
  <title>Color Admin | Apple Design</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 
        name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />
  
  <!-- ================== BEGIN BASE CSS STYLE ================== -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
  <link href="../assets/css/default/app.min.css" rel="stylesheet" />
  <!-- ================== END BASE CSS STYLE ================== -->
</head>

<!-- begin #header -->
<div id="header" class="header navbar-default">
  <!-- begin navbar-header -->
  <div class="navbar-header">
    ...
  </div>
  <!-- end navbar-header -->
  
  <!-- begin header-nav -->
  <ul class="navbar-nav navbar-right">
    <li>
      <form class="navbar-form">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Enter keyword" />
          <button type="submit" class="btn btn-search"><i class="ion-ios-search-strong"></i></button>
        </div>
      </form>
    </li>
    ...
    <li class="dropdown navbar-user">
      <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
        <span class="user-image online"><img src="../assets/img/user/user-13.jpg" alt="" /></span>
        <span class="d-none d-md-inline">Adam Schwartz</span> <b class="caret"></b>
      </a>
      <div class="dropdown-menu dropdown-menu-right">
        ...
      </div>
    </li>
  </ul>
  <!-- end header navigation right -->
</div>
<!-- end #header -->

<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
  <!-- begin sidebar scrollbar -->
  <div data-scrollbar="true" data-height="100%">
    <!-- begin sidebar nav -->
    <ul class="nav">
      <li class="nav-header">Navigation</li>
      <li class="has-sub">
        <a href="javascript:;">
          <b class="caret"></b>
          <i class="fa fa-th-large"></i>
          <span>Dashboard</span>
        </a>
        <ul class="sub-menu">
          <li><a href="#pages/index.html" data-toggle="ajax">Dashboard v1</a></li>
          <li><a href="#pages/index_v2.html" data-toggle="ajax">Dashboard v2</a></li>
        </ul>
      </li>
      ...
      <!-- begin sidebar minify button -->
      <li>
        <a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify">
          <i class="fa fa-angle-double-left"></i> <span>Collapse</span>
        </a>
      </li>
      <!-- end sidebar minify button -->
    </ul>
    <!-- end sidebar nav -->
  </div>
  <!-- end sidebar scrollbar -->
</div>
<div class="sidebar-bg"></div>
<!-- end #sidebar -->

Page content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below:

<!-- begin #content -->
<div id="content" class="content"> 
</div>
<!-- end #content -->

Javascript files loaded in the end of page. This will reduce page load time.

  <!-- ================== BEGIN BASE JS ================== -->
  <script src="../assets/js/app.min.js"></script>
  <script src="../assets/js/theme/default.min.js"></script>
  <script>
    App.settings({
      ajaxMode: true,
      ajaxDefaultUrl: '#pages/index.html',
      ajaxType: 'GET',
      ajaxDataType: 'html'
    });
  </script>
  <!-- ================== END BASE JS ================== -->
</body>
</html>

Here is the general javascript option for the each case of page options.

Reset to default after page leave

<script>
  App.setPageOption({
    clearOptionOnLeave: true
  });
</script>

Sidebar Light

<script>
  App.setPageOption({
    pageSidebarLight: true
  });
</script>

Sidebar Transparent

<script>
  App.setPageOption({
    pageSidebarTransparent: true
  });
</script>

Sidebar Minified

<script>
  App.setPageOption({
    pageSidebarMinified: true
  });
</script>

Sidebar Position Right

<script>
  App.setPageOption({
   pageSidebarRight: true
  });
</script>

Sidebar Wide

<script>
  App.setPageOption({
   pageSidebarWide: true
  });
</script>

Boxed Layout

<script>
  App.setPageOption({
   pageBoxedLayout: true
  });
</script>

Full Height Page / Table Column Page NEW

<script>
  App.setPageOption({
    pageContentFullWidth: true,
    pageContentFullHeight: true,
  });
</script>

Color Admin

A) File Structure - top

B) Page Structure - top

C) Beginning of Page - top

D) Page Head - top

E) Top Menu - top

F) Sidebar - top

G) Page Content - top

H) End of Page (Javascript) - top

I) Page Options - top