Build

CSS

Generated by LESS files. There are many Variables you can config.

Margin and Padding
.no-margin	{margin: 0}
.m	{margin: 16px}
.m-xs	{margin: 4px}
.m-sm	{margin: 8px}
.m-md	{margin: 24px}
.m-lg	{margin: 32px}
.m-v-xs	{margin-top: 4px; margin-bottom: 4px;}
.m-v-sm	{margin-top: 8px;margin-bottom: 8px;}
.m-v	{margin-top: 16px;margin-bottom: 16px;}
.m-v-md	{margin-top: 24px;margin-bottom: 24px;}
.m-v-lg	{margin-top: 32px;margin-bottom: 32px;}
.m-h-xs	{margin-left:4px; margin-right: 4px;}
.m-h-sm	{margin-left:8px;margin-right: 8px;}
.m-h	{margin-left:16px;margin-right: 16px;}
.m-h-md	{margin-left:24px;margin-right: 24px;}
.m-h-lg	{margin-left:32px;margin-right: 32px;}
.m-t	{margin-top: 16px;}
.m-t-xs	{margin-top: 4px;}
.m-t-sm	{margin-top: 8px;}
.m-t-md	{margin-top: 24px;}
.m-t-lg	{margin-top: 32px;}
.m-r	{margin-right: 16px;}
.m-r-xs	{margin-right: 4px;}
.m-r-sm	{margin-right: 8px;}
.m-r-md	{margin-right: 24px;}
.m-r-lg	{margin-right: 32px;}
.m-b	{margin-bottom:16px;}
.m-b-xs	{margin-bottom:4px;}
.m-b-sm	{margin-bottom:8px;}
.m-b-md	{margin-bottom:24px;}
.m-b-lg	{margin-bottom:32px;}
.m-l	{margin-left: 16px;}
.m-l-xs	{margin-left: 4px;}
.m-l-sm	{margin-left: 8px;}
.m-l-md	{margin-left: 24px;}
.m-l-lg	{margin-left: 32px;}
.m-n	{margin: -16px}
.m-h-n	{margin-left: -16px;margin-right: -16px;}
.m-v-n	{margin-top: -16px;margin-bottom:-16px;}
.m-l-n	{margin-left: -16px;}
.m-r-n	{margin-right: -16px;}
.m-t-n	{margin-top: -16px;}
.m-b-n	{margin-bottom:-16px;}
.no-padding	{ padding: 0 !important; }
.no-padding-h	{ padding-left: 0 !important; padding-right: 0 !important; }
.no-padding-v	{ padding-top: 0 !important; padding-bottom: 0 !important; }
.p-xs	{ padding: 4px; }
.p-sm	{ padding: 8px; }
.p	{ padding: 16px; }
.p-md	{ padding: 24px; }
.p-lg	{ padding: 32px; }
.p-h	{ padding-left: 16px; padding-right: 16px; }
.p-h-xs	{ padding-left: 4px; padding-right: 4px; }
.p-h-sm	{ padding-left: 8px; padding-right: 8px; }
.p-h-md	{ padding-left: 24px; padding-right: 24px; }
.p-h-lg	{ padding-left: 32px; padding-right: 32px; }
.p-v	{ padding-top: 16px; padding-bottom: 16px; }
.p-v-xs	{ padding-top: 4px; padding-bottom: 4px; }
.p-v-sm	{ padding-top: 8px; padding-bottom: 8px; }
.p-v-md	{ padding-top: 24px; padding-bottom: 24px; }
.p-v-lg	{ padding-top: 32px; padding-bottom: 32px; }
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
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: 280px
.w-lg	width: 240px
.w-md	width: 200px
.w	width: 180px
.w-sm	width: 120px
.w-xs	width: 90px
.w-xxs	width: 60px
.w-64	width: 64px
.w-56	width: 56px
.w-48	width: 48px
.w-40	width: 40px
.w-32	width: 32px
.w-24	width: 24px
.w-20	width: 20px
.w-16	width: 16px
.w-full	width: 100%
.w-auto-xs	width: auto on extremely small screen.
.h-full	height: 100%
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-top	.left and .right arrow with top position
.pull-bottom	.left and .right arrow with bottom 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
box
.box	display: table
.box-row	display: table-row
.box-col	display: table-cell
.box-inner	for box with fluid height
.v-m	vertical align: middle
.v-t	vertical align: top
.v-b	vertical align: bottom

Modules

Managed by Grunt

angular-ui-router

The de-facto solution to flexible routing with nested views

angular-translate

i18n for your Angular apps, made easy

ngStorage

localStorage and sessionStorage done right for AngularJS.

ocLazyLoad

Load modules on demand (lazy load) in AngularJS.

UI.Utils

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

angular-loading-bar

A fully automatic loading / progress bar for your angular apps.

angular-ui-select

AngularJS-native version of Select2 and Selectize

textAngular

A radically powerful Text-Editor/Wysiwyg editor for Angular.js! Create multiple editor instances, two-way-bind HTML content, watch editors for changes and more!

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