chaldene

Bootstrap 3 Based Admin Toolkit

Build

version: 0.2.4 - Date: 2016-11-16

HTML Structure

.app class should be added to div element inside the body tag. If you will use the chaldene 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">
    
      <!-- Elektron -->
      <link rel="stylesheet" href="assets/css/elektron.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/elektron.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

chaldene 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

Boxed Layout

chaldene 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

chaldene 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.

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.

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

SIDE HEADING

SIDE 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.

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.

Full Fixed

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

look like this

APP HEADING

SIDE HEADING

SIDE 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.

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.

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>

Sidebar Settings

Sidebar should have .app-side class.

Width of Sidebar is 240px by default. If you want to change it, change the @sidebarWidth value in var.less file. Example :

// var.less
@sidebarWidth: 300px;

Minified Sidebar width is 60px by default. If you want to change it, change the @sidebarMiniWidth value in var.less file. Example :

// var.less
@sidebarMiniWidth: 50px;

After the changes, chaldene.less file should be re-compiled.

You can change the main.css file as shown below, alternatively.

// main.css
.app-side {
  width: 300px;
}
@media (min-width: 768px) {
  .app-side-opened.app-side-mini .app-side {
    width: 50px;
  }
  .app-side-opened.app-side-mini.app-side-expand-on-hover .app-side:hover {
    width: 300px;
  }
}

main.css file should be after chaldene.css file.

Add data-side attribute to any clickable element.

Name	with html Attribute	with JavaScript	Description	Test
collapse	`data-side="collapse"`	`Side.collapse($('button'));`	expand/collaps the Sidebar.
mini	`data-side="mini"`	`Side.mini($('button'));`	minify/un-minify the Sidebar.

Page can be used on fixed. .app-side-mini and .app-side-expand-on-hover classes should be added to body element.

<body class="app-side-mini app-side-expand-on-hover">
...
</body>

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

chaldene

Bootstrap 3 Based Admin Toolkit

Build

HTML Structure

Basic Template

App Wrapper

App Heading, App Container, App Footer

Example : 3 rows

Example : 2 rows app-heading + app-container

Example : 2 rows app-container + app-footer

Example : 1 rows app-container

app-container

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

app-main

Main Heading, Main Content, Main Footer

app-side

Side Heading, Side Content, Side Footer

Example full layout

Boxed Layout

Fixed Layout

Page Fixed

MAIN CONTENT

Main Fixed

MAIN CONTENT

Side Fixed

MAIN CONTENT

Full Fixed

MAIN CONTENT

Navbar Fixed

Sidebar Settings

Sidebar Width

Sidebar Functions

Sidebar Hoverable

FullScreen Page