# 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

- Login layout used only for the login page is as follows:

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