<div class="p-a-md {{app.setting.theme.primary}} p-y-lg">
    <h1 class="display-3 _500 l-s-n-2x">Documents</h1>
    <div class="row">
      <h4 class="col-md-9 l-h">Over a dozen reusable components to build awesome web project, We provided AnguarJS and Html versions for you.</h4>
    </div>
</div>
<div class="p-a-md">
  <div class="row p-t-md">
    <div class="col-sm-3 col-sm-push-9">
      <div bs-affix data-offset-top="-80" class="pos-stc-sm text">
        <h5>Contents</h5>
        <nav>
          <ul class="nav flex-column">
            <li class="nav-item">
              <a href="#intro" ui-scroll-to="intro">Introduction</a>
            </li>
            <li class="nav-item">
              <a href="#build" ui-scroll-to="build">Build tools</a>
            </li>
            <li class="nav-item">
              <a href="#includes" ui-scroll-to="includes">What's include</a>
            </li>
            <li class="nav-item">
              <a href="#css" ui-scroll-to="css">CSS</a>
            </li>
            <li class="nav-item">
              <a href="#angular" ui-scroll-to="angular">Angular</a>
            </li>
            <li class="nav-item">
              <a href="#html" ui-scroll-to="html">html</a>
            </li>
          </ul>
        </nav>
        <a href="http://themeforest.net/user/flatfull/portfolio" target="_blank" class="btn rounded danger m-y-md">Get this theme</a>
      </div>
    </div>
    <div class="col-sm-9 col-sm-pull-3">
      <div id="intro">
        <h2 class="m-b">Intro</h2>
        <h5 class="_300 l-h">Base on the world's most popular css framework <strong>Bootstrap 4</strong> and the popular js framework <strong>AngularJS</strong>, {{app.name}} provide the easy way to build your next web project.</h5>
      </div>
      <div id="build">
        <h2 class="m-t-lg m-b">Build tools</h2>
        <p class="text-md">{{app.name}} uses <a href="http://nodejs.org" class="text-info">Grunt</a> for its CSS and JavaScript build system, it's optional, you can use this theme without grunt tools, we included all the dependencies in this theme.</p>
        <ol>
          <li><a href="https://nodejs.org/download" class="text-info">Download and install Node</a>, which we use to manage our dependencies.</li>
          <li>Run <code>npm install -g bower grunt-cli</code></li>
          <li>Run <code>bower install --force-latest</code> to install dependencies</li>
          <li>Run <code>grunt build</code> to build dist with minified js and css</li>
          <li>Run <code>npm start</code> to start server</li>
        </ol>

        <p class="box p-a-sm m-t-md">
          Note: any commands we tell you to run must be ran from the project's root folder.
        </p>
      </div>

      <div id="includes">
        <h2 class="m-t-lg m-b">What's include</h2>
        <p>You'll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.</p>
<pre class="box p-a">
app/
  |-- bower.json
  |-- package.json
  |-- GruntFile.js
  |-- README.md
  |-- CHANGELOG.md
  |-- dist/
  |-- libs/
  |   |-- angular/
  |   |-- jquery/
  |-- assets/
  |   |-- scss/
  |   |-- styles/
  |   |-- bootstrap/
  |   |-- fonts/
  |   |-- images/
  |-- views/
  |   |-- blocks/
  |   |-- chart/
  |   |-- form/
  |   |-- layout/
  |   |-- page/
  |   |-- table/
  |   |-- ui/
  |   |-- widget/
  |   |-- layout.html
  |   |-- layout.0.html
  |   |-- layout.1.html
  |   |-- layout.2.html
  |   |-- layout.3.html
  |   |-- layout.4.html
  |-- angular/
  |   |-- api/
  |   |-- apps/
  |   |   |-- calendar/
  |   |   |-- contact/
  |   |   |-- inbox/
  |   |   |-- note/
  |   |   |-- todo/
  |   |-- scripts/
  |   |   |-- controllers/
  |   |   |-- directives/
  |   |   |-- filters/
  |   |   |-- services/
  |   |   |-- app.js
  |   |   |-- app.ctrl.js
  |   |   |-- config.js
  |   |   |-- config.lazyload.js
  |   |   |-- config.router.js
  |   |-- index.html
  |-- html/
  |   |-- api/
  |   |-- scripts/
  |   |   |-- app.js
  |   |   |-- config.js
  |   |   |-- config.lazyload.js
  |   |   |-- config.router.js
  |   |-- index.html
</pre>
      </div>
      <div id="css">
        <h2 class="m-t-lg m-b">CSS / Scss</h2>
        <p class="text-md">You can apply any provided colors to any blocks, even on the Light, Grey, Dark, Black theme.</p>
        <p>The css file is generated by Scss files. There are many variables you can config to build the css file. many classes are extended from bootstrap css.</p>
        <h4 class="m-b">Utility classes 
            <a href="http://v4-alpha.getbootstrap.com/components/utilities/">
            <i class="fa fa-link text-muted"></i>
          </a>
        </h4>
<h6>Margin</h6>
<pre class="box p-a">
.m-0 { margin:        0 !important; }
.m-t-0 { margin-top:    0 !important; }
.m-r-0 { margin-right:  0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.m-l-0 { margin-left:   0 !important; }
.m-x-0 { margin-right:  0 !important; margin-left:   0 !important; }
.m-y-0 { margin-top:    0 !important; margin-bottom: 0 !important; }

.m-a { margin:        $spacer !important; }
.m-t { margin-top:    $spacer-y !important; }
.m-r { margin-right:  $spacer-x !important; }
.m-b { margin-bottom: $spacer-y !important; }
.m-l { margin-left:   $spacer-x !important; }
.m-x { margin-right:  $spacer-x !important; margin-left: $spacer-x !important; }
.m-y { margin-top:    $spacer-y !important; margin-bottom: $spacer-y !important; }
.m-x-auto { margin-right: auto !important; margin-left: auto !important; }

.m-a-md { margin:        ($spacer * 1.5) !important; }
.m-t-md { margin-top:    ($spacer-y * 1.5) !important; }
.m-r-md { margin-right:  ($spacer-y * 1.5) !important; }
.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; }
.m-l-md { margin-left:   ($spacer-y * 1.5) !important; }
.m-x-md { margin-right:  ($spacer-x * 1.5) !important; margin-left:   ($spacer-x * 1.5) !important; }
.m-y-md { margin-top:    ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; }

.m-a-lg { margin:        ($spacer * 3) !important; }
.m-t-lg { margin-top:    ($spacer-y * 3) !important; }
.m-r-lg { margin-right:  ($spacer-y * 3) !important; }
.m-b-lg { margin-bottom: ($spacer-y * 3) !important; }
.m-l-lg { margin-left:   ($spacer-y * 3) !important; }
.m-x-lg { margin-right:  ($spacer-x * 3) !important; margin-left:   ($spacer-x * 3) !important; }
.m-y-lg { margin-top:    ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; }

.m-a-sm { margin:        ($spacer * 0.5) !important; }
.m-t-sm { margin-top:    ($spacer-y * 0.5) !important; }
.m-r-sm { margin-right:  ($spacer-y * 0.5) !important; }
.m-b-sm { margin-bottom: ($spacer-y * 0.5) !important; }
.m-l-sm { margin-left:   ($spacer-y * 0.5) !important; }
.m-x-sm { margin-right:  ($spacer-x * 0.5) !important; margin-left:   ($spacer-x * 0.5) !important; }
.m-y-sm { margin-top:    ($spacer-y * 0.5) !important; margin-bottom: ($spacer-y * 0.5) !important; }

.m-a-xs { margin:        ($spacer * 0.25) !important; }
.m-t-xs { margin-top:    ($spacer-y * 0.25) !important; }
.m-r-xs { margin-right:  ($spacer-y * 0.25) !important; }
.m-b-xs { margin-bottom: ($spacer-y * 0.25) !important; }
.m-l-xs { margin-left:   ($spacer-y * 0.25) !important; }
.m-x-xs { margin-right:  ($spacer-x * 0.25) !important; margin-left:   ($spacer-x * 0.25) !important; }
.m-y-xs { margin-top:    ($spacer-y * 0.25) !important; margin-bottom: ($spacer-y * 0.25) !important; }
</pre>
<h6>Padding</h6>
<pre class="box p-a">
.p-a-0 { padding:        0 !important; }
.p-t-0 { padding-top:    0 !important; }
.p-r-0 { padding-right:  0 !important; }
.p-b-0 { padding-bottom: 0 !important; }
.p-l-0 { padding-left:   0 !important; }

.p-a { padding:        @spacer !important; }
.p-t { padding-top:    @spacer-y !important; }
.p-r { padding-right:  @spacer-x !important; }
.p-b { padding-bottom: @spacer-y !important; }
.p-l { padding-left:   @spacer-x !important; }
.p-x { padding-right:  @spacer-x !important; padding-left:   @spacer-x !important; }
.p-y { padding-top:    @spacer-y !important; padding-bottom: @spacer-y !important; }

.p-a-md { padding:        (@spacer-y * 1.5) !important; }
.p-t-md { padding-top:    (@spacer-y * 1.5) !important; }
.p-r-md { padding-right:  (@spacer-y * 1.5) !important; }
.p-b-md { padding-bottom: (@spacer-y * 1.5) !important; }
.p-l-md { padding-left:   (@spacer-y * 1.5) !important; }
.p-x-md { padding-right:  (@spacer-x * 1.5) !important; padding-left:   (@spacer-x * 1.5) !important; }
.p-y-md { padding-top:    (@spacer-y * 1.5) !important; padding-bottom: (@spacer-y * 1.5) !important; }

.p-a-lg { padding:        (@spacer-y * 3) !important; }
.p-t-lg { padding-top:    (@spacer-y * 3) !important; }
.p-r-lg { padding-right:  (@spacer-y * 3) !important; }
.p-b-lg { padding-bottom: (@spacer-y * 3) !important; }
.p-l-lg { padding-left:   (@spacer-y * 3) !important; }
.p-x-lg { padding-right:  (@spacer-x * 3) !important; padding-left:   (@spacer-x * 3) !important; }
.p-y-lg { padding-top:    (@spacer-y * 3) !important; padding-bottom: (@spacer-y * 3) !important; }

.p-a-sm { padding:        ($spacer * 0.5) !important; }
.p-t-sm { padding-top:    ($spacer-y * 0.5) !important; }
.p-r-sm { padding-right:  ($spacer-y * 0.5) !important; }
.p-b-sm { padding-bottom: ($spacer-y * 0.5) !important; }
.p-l-sm { padding-left:   ($spacer-y * 0.5) !important; }
.p-x-sm { padding-right:  ($spacer-x * 0.5) !important; padding-left:   ($spacer-x * 0.5) !important; }
.p-y-sm { padding-top:    ($spacer-y * 0.5) !important; padding-bottom: ($spacer-y * 0.5) !important; }

.p-a-xs { padding:        ($spacer * 0.25) !important; }
.p-t-xs { padding-top:    ($spacer-y * 0.25) !important; }
.p-r-xs { padding-right:  ($spacer-y * 0.25) !important; }
.p-b-xs { padding-bottom: ($spacer-y * 0.25) !important; }
.p-l-xs { padding-left:   ($spacer-y * 0.25) !important; }
.p-x-xs { padding-right:  ($spacer-x * 0.25) !important; padding-left:   ($spacer-x * 0.25) !important; }
.p-y-xs { padding-top:    ($spacer-y * 0.25) !important; padding-bottom: ($spacer-y * 0.25) !important; }

.padding{
  padding: 1.5rem 1.5rem;
}

.padding-out{
  margin: -1.5rem -1.5rem;
}

@include media-breakpoint-down(md) {
  .padding{
    padding: 1rem 1rem;
  }
  .padding-out{
    margin: -1rem -1rem;
  }
}

@include media-breakpoint-down(sm) {
  .padding{
    padding: 0.5rem 0.5rem;
  }
  .padding-out{
    margin: -0.5rem -0.5rem;
  }
  .no-padding-xs{
    padding: 0;
  }
}
</pre>
      </div>
      <div id="angular">
        <h2 class="m-t-lg m-b">Angular version</h2>
        <p>Lazy load modules for Angular 1.x, you can config the modules in the config.lazyload.js to load the other dependencies.</p>
        <h5>Code style</h5>
        <p><a href="https://github.com/johnpapa/angular-styleguide" target="_blank" class="text-info">https://github.com/johnpapa/angular-styleguide</a></p>
        <h5>Manage the dependencies</h5>
        <p>run <code>bower install</code> to install the modules.</p>
        <p class="box p-a">
          when run <code>bower install</code>, you may need choose the version for some modules, you can choose the latest version of them, but keep the "angular, angular-animate, angular-aria, angular-cookies, angular-messages, angular-resource, angular-sanitize, angular-touch" have the same version. 
        </p>
        <h5>Core modules</h5>
        <ul>
          <li>
            <a href="https://github.com/angular-ui/ui-router">angular-ui-router</a>
            <p>The de-facto solution to flexible routing with nested views</p>
          </li>

          <li>
            <a href="https://github.com/ocombe/ocLazyLoad">ocLazyLoad</a>
            <p>Load modules on demand (lazy load) in AngularJS.</p>
          </li>

          <li>
            <a href="https://github.com/gsklee/ngStorage">ngStorage</a>
            <p>localStorage and sessionStorage done right for AngularJS.</p>
          </li>

          <li>
            <a href="https://github.com/mgcrea/angular-strap">Angular Strap</a>
            <p>AngularJS 1.2+ native directives for Bootstrap 3/4</p>
          </li>
        </ul>
        <h5>Optional modules</h5>
        <ul>
          <li>
            <h6><a href="http://angular-ui.github.io/ui-utils/">UI.Utils</a></h6>
            <p>Swiss-Army-Knife of AngularJS tools (with no external dependencies!).</p>
          </li>

          <li>
            <h6><a href="https://github.com/angular-ui/ui-select">angular-ui-select</a></h6>
            <p>AngularJS-native version of Select2 and Selectize</p>
          </li>

          <li>
            <h6><a href="https://github.com/summernote/angular-summernote">Angular Summernote</a></h6>
            <p>AngularJS directive to Summernote</p>
          </li>

          <li>
            <h6><a href="https://github.com/Venturocket/angular-slider">venturocket-angular-slider</a></h6>
            <p>Slider directive for AngularJS.</p>
          </li>

          <li>
            <h6><a href="https://github.com/nickperkinslondon/angular-bootstrap-nav-tree">angular-bootstrap-nav-tree</a></h6>
            <p>An AngularJS directive that creates a Tree based on a Bootstrap "nav" list.</p>
          </li>

          <li>
            <h6><a href="https://github.com/danialfarid/angular-file-upload">angular-file-upload</a></h6>
            <p>An AngularJS directive for file upload using HTML5 with FileAPI polyfill for unsupported browsers</p>
          </li>

          <li>
            <h6><a href="https://github.com/alexk111/ngImgCrop">ngImgCrop</a></h6>
            <p>Image Crop directive for AngularJS</p>
          </li>

          <li>
            <h6><a href="https://github.com/lorenzofox3/Smart-Table">angular-smart-table</a></h6>
            <p>Code source of Smart Table module: a table/grid for Angularjs</p>
          </li>

          <li>
            <h6><a href="https://github.com/angular-ui/ui-map">angular-ui-map</a></h6>
            <p>Google Maps</p>
          </li>
        </ul>
      </div>
      <div id="html">
        <h2 class="m-t-lg m-b">Html version</h2>
        <p>The html version use ajax to load some blocks, you need put the files on a server to preview.</p>
        <p>Located in the "html" folder, it also use lazyload for plugins</p>
        <h5>Core modules</h5>
        <ul>
          <li>
            <h6>ui-jp</h6>
            <p>Dynamic jQuery plugin call on dom 
              <br>
              <code>&lt;div ui-jp="easyPieChart" ui-options="options">&lt;/div></code>
              <br>
              the ui-jp plugin will call the "easyPieChart" function with the options, same as
              <code>$.easyPieChart(options)</code>
              <br>
              you can config the plugins in the "html/scripts/config.lazyload.js".
            </p>
          </li>

          <li>
            <h6>ui-include</h6>
            <p>
              Include the html partials into the page
              <br>
              <code>&lt;div ui-include="'../views/blocks/navbar.brand.html'">&lt;/div></code>
              <br>
              the ui-include will be replaced with the real partial. <br>
              if you do not want to include the partials, you can just copy the real blocks and replace it. 
            </p>
          </li>
        </ul>
        <h5>Ajax</h5>
        <p>The html version using the Pjax for ajax load the page. you can disable it by remove the relative codes(remove the html/scripts/ajax.js)</p>
      </div>
    </div>
  </div>
</div>
