Layout

Default layout

1. Layout

Default layout used for all pages (except for login) is:

1) Navbar
Inside main-container area:
- 2) Sidebar
- 3) Breadcrumbs (inside "main-content")
- 4) Page content (inside "main-content")
- 5) Settings box (inside "page-content")
- 6) Footer

<!DOCTYPE html>
<html lang="en">
 <head>
    <!-- title, meta tags, list of stylesheets, etc ... -->
 </head>
  
 <body class="no-skin">
    <div class="navbar" id="navbar">
     <!-- navbar goes here -->
    </div>
 
    <div class="main-container" id="main-container">
     <div class="sidebar responsive" id="sidebar">
      <!-- sidebar goes here -->
     </div>
  
     <div class="main-content">
      <div class="breadcrumbs">
       <!-- breadcrumbs goes here -->
      </div>
   
      <div class="page-content">
        <!-- setting box goes here if needed -->

        <div class="row">
          <div class="col-xs-12">
           <!-- page content goes here -->
          </div><!-- /.col -->
        </div><!-- /.row -->

      </div><!-- /.page-content -->
     </div><!-- /.main-content -->
	 
     <!-- footer area -->

   </div><!-- /.main-container -->

   <!-- list of script files -->
   
 </body>
</html>

Starting with the following file you can find more details:
mustache/app/views/layouts/default.mustache

2. Head element

head element contains title, meta tags, stylesheets and some scripts:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <!-- use the following meta to force IE use its most up to date rendering engine -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <title> page tite </title>
  <meta name="description" content="page description" />
  
  <!-- stylesheets are put here, refer to files/css documentation -->
  <!-- some scripts should be  here, refer to files/javascript documentation -->
 </head>

For more info about stylesheets and order of use, please see CSS order.
For more info about scripts and order of use, please see Javascript order.

3. Viewport meta tag

Please note that with mobile devices, pages may not look good when user zooms in/out, especially when navbar or sidebar is fixed.
One option is preventing user from zooming in/out using user-scalable=no property:
```
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
```
The following links have more info:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
developer.apple.com

4. Body element

```
 <body class="no-skin">
   ...
 </body>
```
You can use one of the following classes to apply different skins:
1. .no-skin
2. .skin-1
3. .skin-2
4. .no-skin.skin-3
There is more information about this in Skins section

5. End of document

Here you put your script list and inline scripts.
For more info about scripts and order of use, please see Javascript order.

Empty layout

Layout

Empty layout is similar to default layout and is only used for html/empty.html file which has minimal code for easier investigation:

 <html>
  <head>
     <!-- title, meta tags, list of stylesheets, etc ... -->
  </head>
  
  <body class="no-skin">
    <div class="navbar" id="navbar">
     <!-- navbar goes here -->
    </div>
 
    <div class="main-container" id="main-container">
     <div class="sidebar responsive" id="sidebar">
      <!-- sidebar goes here -->
     </div>
  
     <div class="main-content">
   
      <div class="page-content">
        <div class="row">
          <div class="col-xs-12">
           <!-- page content goes here -->
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.page-content -->
     </div><!-- /.main-content -->
	 
   </div><!-- /.main-container -->

   <!-- list of script files -->
   
  </body>
 </html>

Starting with the following file you can find more details:
mustache/app/views/layouts/empty.mustache

Login layout

1. Layout

<html>
 <head>
  
 </head>

 <body class="login-layout">
 
  <div class="main-container">
   <div class="main-content">
    <div class="row">
     <div class="col-sm-10 col-sm-offset-1">
     <!-- page content goes here -->
     </div><!-- /.col -->
    </div><!-- /.row -->
   </div><!-- /.main-content -->
  </div><!-- /.main-container -->


 </body>
</html>

For more info about login page, please see login page
Starting with the following file you can find more details:
mustache/app/views/layouts/login.mustache

2. Scripts

Fewer scripts are needed for login page.
Basically, you just need jquery and the following snippet to switch to a different box:
```
jQuery(function($) {
 $(document).on('click', '.toolbar a[data-target]', function(e) {
    e.preventDefault();
    var target = $(this).data('target');
    $('.widget-box.visible').removeClass('visible');//hide others
    $(target).addClass('visible');//show target
 })
})
```
mustache/app/views/assets/scripts/login.js
Of course if you want to use extra functionality such as form validation or elements such as datepicker or a slider, you should include the relevant scripts.