Documents

### Build

Build your project with grunt and manage dependencies with bower.

#### Requirements

In order to utilize Grunt you will need to have installed Node.js on your computer. Also insure that you have NPM installed.
You can check if these are installed properly by opening up a Terminal (Linux or Mac) or Command Prompt (Windows)
and entering the command: `node --version` and `npm --version` These commands should output something similar to "v0.10.31" and "1.4.23" respectively.

Once you have installed these programs, you'll need to get grunt and bower. You can achieve this by running the following command: `npm install -g bower grunt-cli`
Now you should be able to exectue the commands "grunt" and "bower".

Please note that any commands we tell you to run must be ran from the project's root folder.

#### Bower Dependency Management

To ensure you have all updated the Javascript libraries managed by bower, run the command `bower install` in a terminal or command prompt while you are in the current working directory of the project.

#### Grunt Build Tool

This project supports build steps with Grunt. The supported Grunt tasks that this project ships with is:

- Less Compilation
- Bower Depenecy Inclusion
- Release Tagging (requires project to be a GIT repository)

To build your project, just run the command `grunt build:dev`. This will compile your less files and copy over your bower dependencies.

Release tagging allows you to bump your current project's version and tag it with git. It also creates a changelog based on your prevoius commit history. Checkout the grunt-changelog module for more details and how to customize.

#### Local Server Development

We've made it easy to develop and test on your local machine. Once you've installed the bower dependencies and built your project, you can start a local server by running the command `npm start`. This will start a local server and open up your browser.

### CSS

Extensible classes

#### Bootstrap CSS

For the bootstrap css and components, please check the Bootstrap 3

Angular UI Bootstrap, This project does not use bootstrap.js, but use Angular UI Bootstrap written in pure AngularJS, check UI Boostrap and Official Documents

#### LESS

This file's css is generated by LESS files. There are many Variables, Mixins you can use.

Compile, you can use the less.php to output the css.

#### Icons

- FontAwesome icons 4.1

  Check FontAwesome for more details to see how to use and examples

- Glyphicons

  Bootstrap default icons

- Simple Line Icons

#### Animate

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Page view transition, This project also used Animate css for ui-view animation, you can use `.fade-in, .fade-in-left, .fade-in-right, .fade-in-up, .fade-in-down, .fade-in-right-big, .fade-in-left-big, .fade-in-up-big, .fade-in-down-big`, if you want to use the big animation, you can use a `.smooth` class for smoothing animation.

#### Colors

8 default color palettes, build colorful widgets. you can open the less/app.variables.less to config your own colors(`@brand-primary, @brand-success, @brand-warning, @brand-danger, @brand-info, @brand-black, @brand-dark, @brand-light`).

Use less file to build your colors, You can use the mixin wariant. use `.color-variant` and `.font-variant` to build the color scheme, check more details in the css/less/app.colors.less.

.bg-light

.dker.dk.bg.lt.lter

.bg-dark

.dker.dk.bg.lt.lter

.bg-black

.dker.dk.bg.lt.lter

.bg-primary

.dker.dk.bg.lt.lter

.bg-info

.dker.dk.bg.lt.lter

.bg-success

.dker.dk.bg.lt.lter

.bg-warning

.dker.dk.bg.lt.lter

.bg-danger

.dker.dk.bg.lt.lter

#### Layout

Fix header, use `.app-header-fixed` class on ".app" to fixed header.position

Fix aside, use `.app-aside-fixed` class on ".app" to fixed aside position.

Fold aside, use `.app-aside-folded` class on ".app" to fold aside.

Hbox, use `.hbox` and `.col` to build column layout. and you can use the `.w-lg, .w-md, .w, .w-sm, .w-xs` to fix column width. and use `.hbox-auto-sm, .hbox-auto-xs` to disable hbox on small screen.

#### CSS Utilities

Margin
.m | margin: 15px
.m-xs | margin: 5px
.m-sm | margin: 10px
.m-md | margin: 20px
.m-lg | margin: 30px
.m-n | margin: 0px
.m-l | margin-left: 15px
.m-l-xs | margin-left: 5px
.m-l-sm | margin-left: 10px
.m-l-md | margin-left: 20px
.m-l-lg | margin-left: 30px
.m-l-xl | margin-left: 40px
.m-l-xxl | margin-left: 50px
.m-l-none | margin-left: 0px
.m-l-n | margin-left: -15px
.m-l-n-xxs | margin-left: -1px
.m-l-n-xs | margin-left: -5px
.m-l-n-sm | margin-left: -10px
.m-l-n-md | margin-left: -20px
.m-l-n-lg | margin-left: -30px
.m-l-n-xl | margin-left: -40px
.m-l-n-xxl | margin-left: -50px
.m-r (margin right) , m-t (margin top) , m-b (margin bottom) have the same classes as the .m-l.
Border
.b-a | border:1px solid @border-color(see app.variables.less)
.b-l | border left
.b-t | border top
.b-r | border right
.b-b | border bottom
.b-light, .b-dark, .b-primary, .b-success, .b-info, .b-warning, .b-danger, .b-black, .b-white | border with specific color.
.b-2x | border width with 2px
.b-3x | border width with 3px
.no-border | border width: 0
.no-border-xs | border width: 0 on etremely small screen.
Radius
.r | border-radius: @border-radius-base
.r-l | border-radius: @border-radius-base 0 0 @border-radius-base
.r-r | border-radius: 0 @border-radius-base @border-radius-base 0
.r-t | border-radius: @border-radius-base @border-radius-base 0 0
.r-b | border-radius: 0 0 @border-radius-base @border-radius-base
.r-2x | radius size: 2 x @border-radius-base
.r-3x | radius size: 3 x @border-radius-base
Padder and Wrapper
.padder | padding-left: 15px; padding-right: 15px
.padder-md | padding-left: 20px; padding-right: 20px
.padder-lg | padding-left: 30px; padding-right: 30px
.no-padder | padding: 0
.wrapper | padding: 15px
.wrapper-sm | padding: 10px
.wrapper-xs | padding: 5px
.wrapper-md | padding: 20px
.wrapper-lg | padding: 30px
.wrapper-xl | padding: 50px
Text
.text-u-c | text uppercase
.text-l-t | text line through
.text-u-l | text under line
.text-ellipsis | display text in one line with ellipsis
.text-center-xs | center text only on extremely small devices
.text-left-xs | align text left only on extremely small devices
.text-right-xs | align text right only on extremely small devices
Width and Height
.w-xxl | width: 360px
.w-xl | width: 320px
.w-lg | width: 280px
.w-md | width: 240px
.w | width: 200px
.w-sm | width: 158px
.w-xs | width: 90px
.w-xxs | width: 60px
.w-full | width: 100%
.w-auto-xs | width: auto on extremely small screen.
.h-full | height: 100%
Thumb
.thumb-xl | width: 128px
.thumb-lg | width: 96px
.thumb-md | width: 64px
.thumb | width: 50px
.thumb-sm | width: 48px
.thumb-xs | width: 34px
.thumb-xxs | width: 30px
.img-full | width: 100%
Avatar
.avatar | circle photo
status | status, '.on', '.off', '.busy', '.away'
status position | status position, '.left', '.right', '.bottom'
Arrow
.arrow | base class
.left | left arrow, position:middle
.right | right arrow, position:middle
.top | top arrow, position:center
.bottom | bottom arrow, position:center
.pull-left | .top and .bottom arrow with left position
.pull-right | .top and .bottom arrow with right position
.pull-up | .left and .right arrow with up position
.pull-down | .left and .right arrow with down position
Item
.item-overlay | overlay the element on an item, default display:none, with '.active' class will show
.top | top element on a item element
.bottom | bottom element on a item element
.center | center element on a item element
Button
.btn-rounded | rounded button
.btn-icon | icon only button
.btn-addon | icon addon, must have a i tag, and can use .pull-left and .pull-right
Timeline
.timeline | timeline wrapper class
.timeline-center | timeline with center position
.tl-item | timeline item
.tl-wrap | timeline item wrap
.tl-date | timeline date
.tl-content | timeline content
Streamline
.streamline | streamline class
.sl-item | streamline item, you can use .b-l and .b-info, b-danger... class to make it colorful.
Hbox
.hbox | display: table
.col | display: table-cell
.v-middle | vertical align: middle
.v-top | vertical align: top
.v-bottom | vertical align: bottom

### Core

You must know AngularJS, "ui-router" and "ui-jq" to get started your project.

#### ui-router

ui-router for Nested Routing and Nested View, check the official documents

#### ui-load

ui-load for lazy loading the js and css files.

angular.module('myModule', ['ui.load']);
uiLoad.load( ['path/style.css', 'path/script.js'] ).then(function() {
// loaded succesfully.
}).catch(function() {
// There was some error loading the files.
});

ui-load also used in the ui-router `resolve:{}` for lazy loading Angular Directives, Controllers and Services.

#### ui-jq

`ui-jq` Call the jQuery function or plugin specified on the element. check the official documents

#### ui-module

`ui-module` Load other dependences for child directive. you need config the dependences in "js/app.js" constant "MODULE_CONFIG".
example: check the "ui-select2" directive on "form/element"

#### ui-validate

The `ui-validate` directive makes it very easy to create custom validator expressions. check the official documents

### Directives

#### ui-toggle-class

Toggle class when click on the element, attr `target` for target element. `<div ui-toggle-class="show" target="#nav"></div>`

#### ui-shift

Shift element on xs screen, attr `target` for target element. `<div ui-shift="append" target="#nav"></div>`

#### ui-scroll

Scroll to element when click, attr value for target element. `<a ui-scroll="target"></a>`

#### ui-fullscreen

Request fullscreen mode for element. `<a ui-fullscreen></a>` or `<a ui-fullscreen target="#target"></a>`

### Plugins

All jQuery plugins are depended on `ui-jq`, do not need create the Angular Directive for each of the plugin. you can config in the js/app.js Angular Constant `JQ_CONFIG`, `functionName => pluginPath`, the js and css files are lazy loaded.

#### FullCalendar

Check the online document and Angular Fullcalendar Wrapper

#### Datatables

Check the online document.

#### Chosen

Check the online document.

#### File-input

Check the online document.

#### Slider

Check the online document.

#### TouchSpin

Check the online document.

#### WYSISYG

Check the online document.

#### Flotchart

Check the online document.

#### Sparklines

Check the online document.

#### Easy pie chart

Check the online document.

#### Sortable

Check the online document.

#### Nestable

Check the online document.

#### SlimScroll

Check the online document.

#### JvectorMap

Check the online document.