chl

Bootstrap 3 Based Admin Toolkit
Build

version: 0.1.1 - Date: 2017-03-03

HTML Structure

.app class should be added to div element inside the body tag. If you will use the chl with ember.js, you don't need this element.

Basic Template

Start with this basic HTML template.

    <!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">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
      <title>title</title>
    
      <!-- Bootstrap -->
      <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
    
      <!-- chl -->
      <link rel="stylesheet" href="../assets/css/chl.min.css">
      
    </head>
    
    <body>
    <!-- not required for ember.js -->
      <div class="app">
        ...
      </div>
    
      <!-- jQuery (necessary for Bootstrap's & elektron JavaScript plugins) -->
      <script src="../assets/vendor/jquery/jquery.min.js"></script>
    
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
    
      <!-- elektron -->
      <script src="../assets/js/chl.min.js"></script>
    </body>
    
    </html>

App Wrapper

.app-wrap should be in the .app element. .app-wrap element should be single, not multiple. Elements inside the .app-wrap will be placed in a column. Look like this :

<div class="app">
  <div class="app-wrap">
      ... (required, must be single)
  </div>
</div>

App Heading, App Container, App Footer

chl is developed in a way to support many layouts. The elements .app-heading, .app-container, .app-footer can be placed randomly inside .app-wrap element. .app-heading and .app-footer elements are not required. Also .app-heading and .app-footer elements can be used multiple. But .app-container is required and must be used single.

Example : 3 rows

<div class="app">
  <div class="app-wrap">
    <header class="app-heading">
      ... (not required, can be multiple)
    </header>
    <div class="app-container">
      ... (required, must be single)
    </div>
    <footer class="app-footer">
      ... (not required, can be multiple)
    </footer>
  </div>
</div>
.app-heading
.app-container
.app-footer

Example : 2 rows app-heading + app-container

<div class="app">
  <div class="app-wrap">
    <header class="app-heading">
      HEADING
    </header>
    <div class="app-container">
      CONTAINER
    </div>
  </div>
</div>
.app-heading
.app-container

Example : 2 rows app-container + app-footer

<div class="app">
  <div class="app-wrap">
    <div class="app-container">
      CONTAINER
    </div>
    <footer class="app-footer">
      FOOTER
    </footer>
  </div>
</div>
.app-container
.app-footer

Example : 1 rows app-container

<div class="app">
  <div class="app-wrap">
    <div class="app-container">
      CONTAINER
    </div>
  </div>
</div>
.app-container

app-container

.app-container will automatically fill the gap in the element .app-wrap. Page design is entirely compatible with sticky footer.

Elements inside the .app-container will be placed in a row. Look like this :

.app-side, .side-visible-line, .app-main elements can be single in .app-container. While .app-side and .side-visible-line elements are not required, .app-main is.

Example : 3 columns app-side, side-visible-line, app-main

<div class="app-container">
  <aside class="app-side">
    ... (not required, must be single)
  </aside>
  <div class="side-visible-line" data-side="collapse">
    <i class="fa fa-caret-left"></i>
    (not required, expand/collapse for app-side)
  </div>
  <div class="app-main">
    ... (required, must be single)
  </div>
</div>
.app-side
.side-visible-line
.app-main

NOTE : The element .side-visible-line is used to expand/collapse .app-side element.


app-main

Main Heading, Main Content, Main Footer

.main-heading, .main-content, .main-footer elements can be placed randomly in .app-main. .main-heading and .main-footer are not required. Also .main-heading and .main-footer can be used multiple. But .main-content is required and should be used single.

.app-main element is based on sticky footer. .main-content will fill the gap in .app-main.

<div class="app-main">
  <header class="main-heading">
    ... (not required, can be multiple)
  </header>
  <main class="main-content">
    ... (required, must be single)
  </main>
  <footer class="main-footer">
    ... (not required, can be multiple)
  </footer>
</div>

app-side

Side Heading, Side Content, Side Footer

.side-heading, .side-content, .side-footer elements can be placed randomly in .app-side. .side-heading and .side-footer are not required. Also .side-heading and .side-footer elements can be used multiple. But .side-content is required and should be used single.

.app-side is based on sticky footer. .side-content will fill the gap in .app-side.

<aside class="app-side">
  <header class="side-heading">
    ... (not required, can be multiple)
  </header>
  <div class="side-content">
    ... (required, must be single)
  </div>
  <footer class="side-footer">
    ... (not required, can be multiple)
  </footer>
</aside>

Example full layout

<div class="app">
  <div class="app-wrap">
    <header class="app-heading">
      APP HEADING
    </header>
    <div class="app-container">
      <aside class="app-side">
        <header class="side-heading">
          SIDE HEADING
        </header>
        <div class="side-content">
          SIDE CONTENT
        </div>
        <footer class="side-footer">
          SIDE FOOTER
        </footer>
      </aside>
      <div class="app-main">
        <header class="main-heading">
          MAIN HEADING
        </header>
        <div class="main-content">
          <div class="container-fluid">
            MAIN CONTENT
          </div>
        </div>
        <footer class="main-footer">
          MAIN FOOTER
        </footer>
      </div>
    </div>
    <footer class="app-footer">
      APP FOOTER
    </footer>
  </div>
</div>

look like this

.app-heading
.main-heading
.main-content
.main-footer
.app-footer

Boxed Layout

chl is designed to fill the width of browser by default. It can be used boxed on will. All that's needed to be done is to add Bootstrap's .container class to .app-wrap element. Example :

			<div class="app-wrap container">
  ...
</div>

Because there will be gaps on left and right sides on large monitors. background-color, picture, video can be added as background to the element .app.

box-shadow is added to the .app-wrap element and background-color is added to the .app element.

Fixed Layout

Page Fixed

chl is fluid by default. Can be used as fixed on will. All that's needed to be done is to add .page-fixed class to body element. Example :

<body class="page-fixed">
  ...
</body>

.app-heading, .app-side, .app-footer elements will be fixed. Vertical scroll bar will appear on .app-main and .app-side elements when it's needed.

look like this

APP HEADING
MAIN HEADING

MAIN CONTENT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MAIN FOOTER
APP FOOTER

Main Fixed

Page can be used on fixed. All that's needed to be done is to add .main-fixed class with .page-fixed to body element.

<body class="page-fixed main-fixed">
...
</body>

.main-heading and .main-footer elements will be fixed. Vertical scroll bar will appear on .main-content element when it's needed.

look like this

APP HEADING
MAIN HEADING

MAIN CONTENT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MAIN FOOTER
APP FOOTER

Side Fixed

Page can be used on fixed. All that's needed to be done is to add .sidee-fixed class with .page-fixed to body element.

<body class="page-fixed side-fixed">
  ...
</body>

.side-heading and .side-footer elements will be fixed. Vertical scroll bar will appear on .side-content element when it's needed.

look like this

APP HEADING
MAIN HEADING

MAIN CONTENT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MAIN FOOTER
APP FOOTER

Full Fixed

<body class="page-fixed main-fixed side-fixed">
  ...
</body>

look like this

APP HEADING
MAIN HEADING

MAIN CONTENT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

MAIN FOOTER
APP FOOTER

Page can be used on fluid. It won't differ when it's used on fixed. All that's needed to be done is to change .navbar-static-top class with .navbar-fixed-top to .navbar element within .app-heading. Example :

<header class="app-heading">
  <nav class="navbar navbar-default navbar-fixed-top">
  ...
  </nav>
</header>

FullScreen Page

data-fullscreen="page" attribute should be added to any clickable element, to display the page on fullscreen. screenfull.js is required.

Name with html Attribute with JavaScript Required Plugin Description Test
fullscreen data-fullscreen="page"
FullScreen.page($('button'));
screenfull.js FullScreen the page

Box Settings

Start with this basic .box template.

<div class="box">
  <header>
    <h4>Header</h4>
    <!-- begin box-tools -->
    <div class="box-tools">  
      <a class="fa fa-fw fa-minus" href="#" data-box="collapse"></a>
      <a class="fa fa-fw fa-square-o" href="#" data-fullscreen="box"></a>
      <a class="fa fa-fw fa-refresh" href="#" data-box="refresh"></a>
      <a class="fa fa-fw fa-times" href="#" data-box="close"></a>
    </div>
    <!-- END: box-tools -->
  </header>
  <div class="box-body collapse in">
    Body
  </div>
  <footer>
    Footer
  </footer>
</div>

Box Functions

If they will be used with html attribute, clickable elements should be placed in .box.

Name with html Attribute with JavaScript Required Plugin Description
collapse data-box="collapse"
Box.collapse($('button'));
none expand/collapse the .box
close data-box="close"
Box.close($('button'));
none Hide the .box
refresh data-box="refresh"

optional attribute
data-loaders-type

Options

  • data-loaders-type="ball-pulse"
  • data-loaders-type="ball-grid-pulse"
  • data-loaders-type="ball-clip-rotate"
  • data-loaders-type="ball-clip-rotate-pulse"
  • data-loaders-type="square-spin"
  • data-loaders-type="ball-clip-rotate-multiple"
  • data-loaders-type="ball-pulse-rise"
  • data-loaders-type="ball-rotate"
  • data-loaders-type="cube-transition"
  • data-loaders-type="ball-zig-zag"
  • data-loaders-type="ball-zig-zag-deflect"
  • data-loaders-type="ball-triangle-path"
  • data-loaders-type="ball-scale"
  • data-loaders-type="line-scale"
  • data-loaders-type="line-scale-party"
  • data-loaders-type="ball-scale-multiple"
  • data-loaders-type="ball-pulse-sync"
  • data-loaders-type="ball-beat"
  • data-loaders-type="line-scale-pulse-out"
  • data-loaders-type="line-scale-pulse-out-rapid"
  • data-loaders-type="ball-scale-ripple"
  • data-loaders-type="ball-scale-ripple-multiple"(default)
  • data-loaders-type="ball-spin-fade-loader"
  • data-loaders-type="line-spin-fade-loader"
  • data-loaders-type="triangle-skew-spin"
  • data-loaders-type="pacman"
  • data-loaders-type="ball-grid-beat"
  • data-loaders-type="semi-circle-spin"
  • data-loaders-type="ball-scale-random"
Box.refesh($('button'));
Loaders.css Refresh the .box
fullscreen data-fullscreen="box"
FullScreen.box($('button'));
screenfull.js FullScreen the .box

Custom Plugins

Momentum

Can be used as data-momentum="clock || relative". moment.js is required.

Name with html Attribute Required Attribute Optional Attribute with JavaScript Description Test
clock data-momentum="clock" none
  • data-locale="country code" default: en
  • data-format="time format" default: LTS
Momentum.clock($('span'));
Create clock
relative data-momentum="relative" data-time="2017-01-01" data-locale="country code" default: en
Momentum.relative($('span'));
Display the relative time from now.

Charty

Can be used as data-charty="pie || doughnut || line || area || statline || statarea" Chart.js is required.

Chart Type with html Attribute Required Attribute Optional Attribute with JavaScript
pie data-charty="pie"
  • data-labels="array"
  • data-value="array"
  • data-background-color="array"
data-legend="boolean" default: false
Charty.pie($('canvas'));
doughnut data-charty="doughnut"
  • data-labels="array"
  • data-value="array"
  • data-background-color="array"
  • data-legend="boolean" default: false
  • data-cutout-percentage="number" default: 50
Charty.doughnut($('canvas'));
line data-charty="line"
  • data-label="string"
  • data-labels="array"
  • data-value="array"
  • data-border-color="color"
data-legend="boolean" default: false
Charty.line($('canvas'));
area data-charty="area"
  • data-label="string"
  • data-labels="array"
  • data-value="array"
  • data-border-color="color"
  • data-background-color="color"
data-legend="boolean" default: false
Charty.area($('canvas'));
statline data-charty="statline"
  • data-label="string"
  • data-labels="array"
  • data-value="array"
  • data-border-color="color"
none
Charty.statline($('canvas'));
statarea data-charty="statarea"
  • data-label="string"
  • data-labels="array"
  • data-value="array"
  • data-border-color="color"
  • data-background-color="color"
none
Charty.statarea($('canvas'));

Others Plugin

It’s to be used as data-plugin="name"

Name with html Attribute with JavaScript Required Plugin(s)
totop data-plugin="totop"
Pluggin.totop($('button'));
none
navmega class="navmega"
or
data-plugin="navmega"
Pluggin.navmega();
none
inview class="inview"
Pluggin.inview();
perfectscrollbar data-plugin="perfectscrollbar"
or
class="ps"
Pluggin.perfectscrollbar($('.ps'));
perfectscrollbar
metismenu data-plugin="metismenu"
Pluggin.metismenu($('ul'));
metisMenu
flatpickr data-plugin="flatpickr"
Pluggin.flatpickr($('input'));
flatpickr
autosize data-plugin="autosize"
Pluggin.autosize($('textarea'));
autosize
tablesorter data-plugin="tablesorter"
Pluggin.tablesorter($('table'));
tablesorter
select2 data-plugin="select2"
optional: placeholder="placeholder"
Pluggin.select2($('select'));
select2
quill data-plugin="quill"
optional: data-theme="snow(default) || bubble"
default: snow
Pluggin.quill($('div'));
quill
wysiwyg data-plugin="wysiwyg"
Pluggin.wysiwyg($('div'));
wysiwyg
summernote data-plugin="summernote"
Pluggin.summernote($('div'));
summernote
knob data-plugin="knob"
Pluggin.knob($('input'));
knob
sparkline data-plugin="sparkline"
Pluggin.sparkline($('input'));
sparkline
datatables data-plugin="datatables"
Pluggin.datatables($('table'));
datatables
lightgallery data-plugin="lightgallery"
required: data-selector="selector"
optional: data-thumbnail="true" default: false
Pluggin.lightgallery($('div'));
lightgallery
insignia data-plugin="insignia"
Pluggin.insignia($('input'));
insignia
hljs data-plugin="hljs"
Pluggin.hljs($('code'));
highlight.js

Credits

node.js modules (alphabetic order)
Name Version
animate.css ^3.5.2
autosize ^3.0.18
bootstrap ^3.3.7
bootstrap-colorpicker ^2.3.5
bootstrap-duallistbox github:istvan-ujjmeszaros/bootstrap-duallistbox
bootstrap-slider ^9.4.0
bootstrap-wysiwyg ^1.0.4
chart.js ^2.4.0
cleave.js ^0.7.9
clipboard ^1.5.15
dragula ^3.7.2
dropzone ^4.3.0
flatpickr ^2.1.0
font-awesome ^4.7.0
fullcalendar ^3.0.1
gmaps ^0.4.24
holderjs ^2.9.4
in-view ^0.6.0
insignia ^5.0.0
ion-rangeslider ^2.1.4
jquery ^2.2.4
jquery-countdown ^2.2.0
jquery-sparkline ^2.4.0
jquery-steps ^1.1.0
jquery.hotkeys ^0.1.0
jqvmap ^1.5.1
jump.js ^1.0.1
lightgallery 1.2.21
material-shadows ^3.0.1
metis-canvas ^1.0.1
metismenu ^2.5.2
moment ^2.15.2
morris.js ^0.5.0
noty ^2.3.8
open-color ^1.3.2
pace-progress ^1.0.2
perfect-scrollbar ^0.6.13
loaders.css ^0.1.2
push.js ^0.0.11
quill ^1.1.5
raphael ^2.2.7
select2 ^4.0.3
suitcss-components-grid ^3.0.3
suitcss-utils-display ^1.0.2
suitcss-utils-flex ^1.1.1
suitcss-utils-position ^1.0.1
suitcss-utils-size ^2.0.0
summernote ^0.8.2
tablesorter ^2.27.8
twbuttons ^0.1.0
waypoints ^4.0.1
Bower packages
Name Version
bootstrap-touchspin ^3.1.2
jquery-ui ^1.12.0
datatables ^1.10.12
flot ^0.8.3
fullcalendar ^3.0.1
screenfull ^3.0.2
jquery-validation ^1.15.1
jquery-knob ^1.2.13
counterup ^1.0.0