# Documents

#### Over a dozen reusable components to build awesome web project, We provided AnguarJS and Html versions for you.

##### Contents

Get this theme

## Intro

##### Base on the world's most popular css framework Bootstrap 4 and the popular js framework AngularJS, Flatkit provide the easy way to build your next web project.

## Build tools

Flatkit uses Grunt 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.

1. Download and install Node, which we use to manage our dependencies.
2. Run `npm install -g bower grunt-cli`
3. Run `bower install --force-latest` to install dependencies
4. Run `grunt build` to build dist with minified js and css
5. Run `npm start` to start server

Note: any commands we tell you to run must be ran from the project's root folder.

## What's include

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.

    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

## CSS / Scss

You can apply any provided colors to any blocks, even on the Light, Grey, Dark, Black theme.

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.

#### Utility classes

###### Margin

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

###### Padding

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

## Angular version

Lazy load modules for Angular 1.x, you can config the modules in the config.lazyload.js to load the other dependencies.

##### Code style

https://github.com/johnpapa/angular-styleguide

##### Manage the dependencies

run `bower install` to install the modules.

when run `bower install`, 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.

##### Core modules

- angular-ui-router

  The de-facto solution to flexible routing with nested views

- ocLazyLoad

  Load modules on demand (lazy load) in AngularJS.

- ngStorage

  localStorage and sessionStorage done right for AngularJS.

- Angular Strap

  AngularJS 1.2+ native directives for Bootstrap 3/4

##### Optional modules

- ###### UI.Utils

  Swiss-Army-Knife of AngularJS tools (with no external dependencies!).

- ###### angular-ui-select

  AngularJS-native version of Select2 and Selectize

- ###### Angular Summernote

  AngularJS directive to Summernote

- ###### venturocket-angular-slider

  Slider directive for AngularJS.

- ###### angular-bootstrap-nav-tree

  An AngularJS directive that creates a Tree based on a Bootstrap "nav" list.

- ###### angular-file-upload

  An AngularJS directive for file upload using HTML5 with FileAPI polyfill for unsupported browsers

- ###### ngImgCrop

  Image Crop directive for AngularJS

- ###### angular-smart-table

  Code source of Smart Table module: a table/grid for Angularjs

- ###### angular-ui-map

  Google Maps

## Html version

The html version use ajax to load some blocks, you need put the files on a server to preview.

Located in the "html" folder, it also use lazyload for plugins

##### Core modules

- ###### ui-jp

  Dynamic jQuery plugin call on dom
  `<div ui-jp="easyPieChart" ui-options="options"></div>`
  the ui-jp plugin will call the "easyPieChart" function with the options, same as `$.easyPieChart(options)`
  you can config the plugins in the "html/scripts/config.lazyload.js".

- ###### ui-include

  Include the html partials into the page
  `<div ui-include="'../views/blocks/navbar.brand.html'"></div>`
  the ui-include will be replaced with the real partial.
  if you do not want to include the partials, you can just copy the real blocks and replace it.

##### Ajax

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)

BUY

## Theme Switcher

Folded Aside Boxed Layout Fullscreen Mode

Colors:

Themes:

Light Grey Dark Black

## Demos

Default Zero One Two Three Four Five
...