<section>
|
<h1 class="blue" data-id="#basics/layout"><i class="ace-icon fa fa-desktop grey"></i> Layout</h1>
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter" data-id="#basics/layout.default">
|
Default layout
|
</h2>
|
<div class="space-4"></div>
|
|
<div class="help-content">
|
<h3 class="info-title smaller">1. Layout</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Default layout used for all pages (except for login) is:
|
<img src="images/default.png" />
|
|
<ul>
|
<li>
|
1) Navbar
|
</li>
|
|
<li>
|
Inside <b>main-container</b> area:
|
<ul>
|
<li> 2) Sidebar </li>
|
<li> 3) Breadcrumbs (inside "main-content") </li>
|
<li> 4) Page content (inside "main-content") </li>
|
<li> 5) Settings box (inside "page-content") </li>
|
<li> 6) Footer </li>
|
</ul>
|
</li>
|
</ul>
|
|
|
<div class="space-4"></div>
|
<pre data-language="html">
|
<!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>
|
</pre>
|
</li>
|
|
<li>
|
Starting with the following file you can find more details:
|
<br />
|
<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>default.mustache</code>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller">2. Head element</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
<code>head</code> element contains title, meta tags, stylesheets and some scripts:
|
<pre data-language="html">
|
<!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>
|
</pre>
|
|
For more info about stylesheets and order of use, please see <a href="#files/css.order">CSS order</a>.
|
<br />
|
For more info about scripts and order of use, please see <a href="#files/javascript.order">Javascript order</a>.
|
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller">3. Viewport meta tag</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Please note that with mobile devices, pages may not look good when user zooms in/out,
|
especially when navbar or sidebar is fixed.
|
<br />
|
One option is preventing user from zooming in/out using <code>user-scalable=no</code> property:
|
<pre data-language="html">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
</pre>
|
|
The following links have more info:
|
<br />
|
<a href="http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml">
|
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
|
</a>
|
<br />
|
<a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">
|
developer.apple.com
|
</a>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller">4. Body element</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
<pre data-language="html">
|
<body class="no-skin">
|
...
|
</body>
|
</pre>
|
|
You can use one of the following classes to apply different skins:
|
<ol>
|
<li><code>.no-skin</code></li>
|
<li><code>.skin-1</code></li>
|
<li><code>.skin-2</code></li>
|
<li><code>.no-skin.skin-3</code></li>
|
</ol>
|
|
There is more information about this in
|
<a href="#settings.skins" class="help-more">Skins section</a>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller">5. End of document</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Here you put your script list and inline scripts.
|
<br />
|
For more info about scripts and order of use, please see <a href="#files/javascript.order">Javascript order</a>.
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
</div><!-- /.help-content -->
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter" data-id="#basics/layout.empty">
|
Empty layout
|
</h2>
|
<div class="space-4"></div>
|
|
<!-- #section:basics/layout.empty -->
|
<div class="help-content">
|
<h3 class="info-title smaller">Layout</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Empty layout is similar to default layout and is only used for
|
<code data-open-file="html" class="open-file">html/empty.html</code>
|
file which has minimal code for easier investigation:
|
<div class="space-4"></div>
|
<pre data-language="html">
|
<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>
|
</pre>
|
</li>
|
|
<li>
|
Starting with the following file you can find more details:
|
<br />
|
<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>empty.mustache</code>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
</div><!-- /.help-content -->
|
<!-- /section:basics/layout.empty -->
|
|
|
|
|
|
|
<div class="hr hr-double hr32"></div>
|
<h2 class="blue lighter" data-id="#basics/layout.login">
|
Login layout
|
</h2>
|
<div class="space-4"></div>
|
|
<!-- #section:basics/layout.login -->
|
<div class="help-content">
|
<h3 class="info-title smaller">1. Layout</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Login layout used only for the login page is as follows:
|
<div class="space-4"></div>
|
<pre data-language="html">
|
<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>
|
</pre>
|
</li>
|
|
<li>
|
For more info about login page, please see <a href="#pages/login" class="help-more">login page</a>
|
</li>
|
|
<li>
|
Starting with the following file you can find more details:
|
<br />
|
<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>login.mustache</code>
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
|
<h3 class="info-title smaller">2. Scripts</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Fewer scripts are needed for login page.
|
<br />
|
Basically, you just need <b>jquery</b> and the following snippet to switch to a different box:
|
<pre data-language="javascript">
|
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
|
})
|
})
|
</pre>
|
<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>login.js</code>
|
<br />
|
|
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.
|
</li>
|
</ul><!-- /.info-list -->
|
</div><!-- /.info-section -->
|
|
</div><!-- /.help-content -->
|
<!-- /section:basics/layout.login -->
|
|
</section>
|
