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.
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.
This project supports build steps with Grunt. The supported Grunt tasks that this project ships with is:
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.
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.
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
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.
Check FontAwesome for more details to see how to use and examples
Bootstrap default icons
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.
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
.bg-dark
.bg-black
.bg-primary
.bg-info
.bg-success
.bg-warning
.bg-danger
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.
| 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 |
ui-router for Nested Routing and Nested View, check the official documents
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 Call the jQuery function or plugin specified on the element. check the official documents
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"
The ui-validate directive makes it very easy to create custom validator expressions. check the official documents
Toggle class when click on the element, attr target for target element.
<div ui-toggle-class="show" target="#nav"></div>
Shift element on xs screen, attr target for target element.
<div ui-shift="append" target="#nav"></div>
Scroll to element when click, attr value for target element.
<a ui-scroll="target"></a>
Request fullscreen mode for element.
<a ui-fullscreen></a> or <a ui-fullscreen target="#target"></a>
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.