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

    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.