<section>
	<h1 class="blue" data-id="#basics/content"><i class="ace-icon fa fa-desktop grey"></i> Content</h1>

	<div class="hr hr-double hr32"></div>


	<!-- #section:basics/content -->
	<div class="help-content">
		<h3 class="info-title smaller">1. Layout</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Default HTML layout used for content area is:
				<ol>
					<li>
						<b>breadcrumbs</b> and searchbox
					</li>
					<li>
						<b>page title</b> optional
					</li>
					<li>
						<b>page conent</b>
					</li>
					<li>
						<b>settings box</b> optional
					</li>
				</ol>
				
				<div class="space-4"></div>
<pre data-language="html">
<div class="main-container" id="main-container">
  <!-- sidebar here -->

  <div class="main-content"><div class="main-content-inner">
    <div class="breadcrumbs" id="breadcrumbs">
      <!-- breadcrumbs here -->
    </div>

    <div class="page-content">
      <div class="ace-settings-container" id="ace-settings-container">
        <!-- settings box goes here -->
      </div>

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

    </div><!-- /.page-content -->
  </div></div><!-- /.main-content -->
 
  <a class="btn-scroll-up" id="btn-scroll-up">
   ...
  </a>
</div><!-- /.main-container -->
</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" data-id="#basics/content.breadcrumbs">2. Breadcrumbs</h3>
		<!-- #section:basics/content.breadcrumbs -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				<code>.breadcrumbs</code> is inside <code>.main-content</code> and 
				contains <code>ul.breadcrumb</code> and searchbox.
				<br />
<pre data-language="html">
 <div id="breadcrumbs" class="breadcrumbs">
   <ul class="breadcrumb">
     <li><i class="fa fa-home home-icon"></i> <a href="#">Home</a></li>
     <li><a href="#">...</a></li>
     <li><a href="#">...</a></li>
     <li class="active">...</li>
   </ul><!-- /.breadcrumb -->

   <!-- searchbox -->
 </div>
</pre>
			</li>
			
			<li>
				For an example on generating breadcrumbs list in your application,
				see <a href="#basics/sidebar.mark_active" class="help-more">sidebar active item</a> section.
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/content.breadcrumbs -->


		<h3 class="info-title smaller" data-id="#basics/content.searchbox">3. Search box</h3>
		<!-- #section:basics/content.searchbox -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Search box is inside <code>.breadcrumbs</code>
				<br />
				You can also have a search box inside <a href="#basics/navbar.form" class="help-more">.navbar</a>
			</li>
			<li>
<pre data-language="html">
  <div id="nav-search" class="nav-search">
    <form class="form-search">
      <span class="input-icon">
        <input type="text" class="nav-search-input" id="nav-search-input" autocomplete="off" placeholder="Search ..." />
        <i class="ace-icon fa fa-search nav-search-icon"></i>
      </span>
    </form>
  </div>
</pre>			
			</li>
			
			<li>
				Optional auto complete is powered by
				<a href="#plugins/bootstrap.typeahead" class="help-more">typeahead plugin</a> of Bootstrap 2,
				which has been removed in Bootstrap 3, but is lightweight and functional.
				<br />
<pre data-language="javascript">
 //auto complete's data source is a static array
 $('#nav-search-input').typeahead({
   source: some_static_array,
   updater: function (item) {
     //when an item is selected from dropdown menu, focus back to input element
     $('#nav-search-input').focus();
     return item;
   }
 });
</pre>

You can also retrieve auto complete data from a remote database:
<pre data-language="javascript">
 //auto complete's data is dynamically retrieved from server
 source: function(query, process) {
    $.ajax({url: 'source.php?q='+encodeURIComponent(query)}).done(function(result_items){
       process(result_items);
    })
 }
</pre>
			</li>
			
			<li>
				Adding <code>.minimized</code> class to <code>.nav-search</code> makes it minimized by default:
<pre data-language="html">
 <div id="nav-search" class="nav-search minimized">
   ...
 </div>
</pre>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/content.searchbox -->
		
		
		<h3 class="info-title smaller" data-id="#basics/content.content">4. Page Title &amp; Content</h3>
		<!-- #section:basics/content.content -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				<code>.page-content</code> should be after (optional) <code>.breadcrumbs</code>
			</li>
			<li>
				It contains optional settings box, optional header and the content area:
<pre data-language="html">
<div class="page-content">
  <div class="ace-settings-container" id="ace-settings-container">
    <!-- settings box goes here -->
  </div>

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

</div><!-- /.page-content -->
</pre>
			</li>
			
			<li>
				Optional page header consists of a heading text and smaller description:
<pre data-language="html">
<div class="page-header">
  <h1>
     Dashboard
     <small><i class="ace-icon fa fa-angle-double-right"></i> overview &amp; stats</small>
   </h1>
</div>
</pre>
			</li>
			
			<li>
				Please note that page content must be wrapped inside <code>.row</code> and <code>.col-xs-12</code>
<pre data-language="html">
<div class="row">
  <div class="col-xs-12">
    <!-- page content goes here -->
  </div>
</div>
</pre>
			</li>			
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->
		<!-- /section:basics/content.content -->
		
		
		<h3 class="info-title smaller">5. Settings Box</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Settings box is optional.
				For more info please see <a href="#settings.box" class="help-more">settings box section</a>
			</li>
		 </ul><!-- /.info-list -->
		</div><!-- /.info-section -->

	</div><!-- /.help-content -->
	<!-- /section:basics/content -->

</section>