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