{{app.name}} uses Grunt for its CSS and JavaScript build system, it's optional, you can use this theme without grunt tools, we included all the dependencies in this theme.
grunt-cli
, with npm install -g grunt-cli
.bower install
to install dependenciesgrunt build
to build dist with minified js and cssnpm start
to start serverNote: any commands we tell you to run must be ran from the project's root folder.
You'll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.
app/ |-- bower.json |-- package.json |-- GruntFile.js |-- README.md |-- CHANGELOG.md |-- dist/ |-- libs/ | |-- angular/ | |-- jquery/ |-- assets/ | |-- scss/ | |-- styles/ | |-- bootstrap/ | |-- fonts/ | |-- images/ |-- views/ | |-- blocks/ | |-- chart/ | |-- form/ | |-- layout/ | |-- page/ | |-- table/ | |-- ui/ | |-- widget/ | |-- layout.html | |-- layout.0.html | |-- layout.1.html | |-- layout.2.html | |-- layout.3.html | |-- layout.4.html |-- angular/ | |-- api/ | |-- apps/ | | |-- calendar/ | | |-- contact/ | | |-- inbox/ | | |-- note/ | | |-- todo/ | |-- scripts/ | | |-- controllers/ | | |-- directives/ | | |-- filters/ | | |-- services/ | | |-- app.js | | |-- app.ctrl.js | | |-- config.js | | |-- config.lazyload.js | | |-- config.router.js | |-- index.html |-- html/ | |-- api/ | |-- scripts/ | | |-- app.js | | |-- config.js | | |-- config.lazyload.js | | |-- config.router.js | |-- index.html
You can apply any provided colors to any blocks, even on the Light, Grey, Dark, Black theme.
The css file is generated by Scss files. There are many variables you can config to build the css file. many classes are extended from bootstrap css.
.m-a-0 { margin: 0 !important; } .m-t-0 { margin-top: 0 !important; } .m-r-0 { margin-right: 0 !important; } .m-b-0 { margin-bottom: 0 !important; } .m-l-0 { margin-left: 0 !important; } .m-x-0 { margin-right: 0 !important; margin-left: 0 !important; } .m-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .m-a { margin: $spacer !important; } .m-t { margin-top: $spacer-y !important; } .m-r { margin-right: $spacer-x !important; } .m-b { margin-bottom: $spacer-y !important; } .m-l { margin-left: $spacer-x !important; } .m-x { margin-right: $spacer-x !important; margin-left: $spacer-x !important; } .m-y { margin-top: $spacer-y !important; margin-bottom: $spacer-y !important; } .m-x-auto { margin-right: auto !important; margin-left: auto !important; } .m-a-md { margin: ($spacer * 1.5) !important; } .m-t-md { margin-top: ($spacer-y * 1.5) !important; } .m-r-md { margin-right: ($spacer-y * 1.5) !important; } .m-b-md { margin-bottom: ($spacer-y * 1.5) !important; } .m-l-md { margin-left: ($spacer-y * 1.5) !important; } .m-x-md { margin-right: ($spacer-x * 1.5) !important; margin-left: ($spacer-x * 1.5) !important; } .m-y-md { margin-top: ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; } .m-a-lg { margin: ($spacer * 3) !important; } .m-t-lg { margin-top: ($spacer-y * 3) !important; } .m-r-lg { margin-right: ($spacer-y * 3) !important; } .m-b-lg { margin-bottom: ($spacer-y * 3) !important; } .m-l-lg { margin-left: ($spacer-y * 3) !important; } .m-x-lg { margin-right: ($spacer-x * 3) !important; margin-left: ($spacer-x * 3) !important; } .m-y-lg { margin-top: ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; } .m-a-sm { margin: ($spacer * 0.5) !important; } .m-t-sm { margin-top: ($spacer-y * 0.5) !important; } .m-r-sm { margin-right: ($spacer-y * 0.5) !important; } .m-b-sm { margin-bottom: ($spacer-y * 0.5) !important; } .m-l-sm { margin-left: ($spacer-y * 0.5) !important; } .m-x-sm { margin-right: ($spacer-x * 0.5) !important; margin-left: ($spacer-x * 0.5) !important; } .m-y-sm { margin-top: ($spacer-y * 0.5) !important; margin-bottom: ($spacer-y * 0.5) !important; } .m-a-xs { margin: ($spacer * 0.25) !important; } .m-t-xs { margin-top: ($spacer-y * 0.25) !important; } .m-r-xs { margin-right: ($spacer-y * 0.25) !important; } .m-b-xs { margin-bottom: ($spacer-y * 0.25) !important; } .m-l-xs { margin-left: ($spacer-y * 0.25) !important; } .m-x-xs { margin-right: ($spacer-x * 0.25) !important; margin-left: ($spacer-x * 0.25) !important; } .m-y-xs { margin-top: ($spacer-y * 0.25) !important; margin-bottom: ($spacer-y * 0.25) !important; }
.p-a-0 { padding: 0 !important; } .p-t-0 { padding-top: 0 !important; } .p-r-0 { padding-right: 0 !important; } .p-b-0 { padding-bottom: 0 !important; } .p-l-0 { padding-left: 0 !important; } .p-a { padding: @spacer !important; } .p-t { padding-top: @spacer-y !important; } .p-r { padding-right: @spacer-x !important; } .p-b { padding-bottom: @spacer-y !important; } .p-l { padding-left: @spacer-x !important; } .p-x { padding-right: @spacer-x !important; padding-left: @spacer-x !important; } .p-y { padding-top: @spacer-y !important; padding-bottom: @spacer-y !important; } .p-a-md { padding: (@spacer-y * 1.5) !important; } .p-t-md { padding-top: (@spacer-y * 1.5) !important; } .p-r-md { padding-right: (@spacer-y * 1.5) !important; } .p-b-md { padding-bottom: (@spacer-y * 1.5) !important; } .p-l-md { padding-left: (@spacer-y * 1.5) !important; } .p-x-md { padding-right: (@spacer-x * 1.5) !important; padding-left: (@spacer-x * 1.5) !important; } .p-y-md { padding-top: (@spacer-y * 1.5) !important; padding-bottom: (@spacer-y * 1.5) !important; } .p-a-lg { padding: (@spacer-y * 3) !important; } .p-t-lg { padding-top: (@spacer-y * 3) !important; } .p-r-lg { padding-right: (@spacer-y * 3) !important; } .p-b-lg { padding-bottom: (@spacer-y * 3) !important; } .p-l-lg { padding-left: (@spacer-y * 3) !important; } .p-x-lg { padding-right: (@spacer-x * 3) !important; padding-left: (@spacer-x * 3) !important; } .p-y-lg { padding-top: (@spacer-y * 3) !important; padding-bottom: (@spacer-y * 3) !important; } .p-a-sm { padding: ($spacer * 0.5) !important; } .p-t-sm { padding-top: ($spacer-y * 0.5) !important; } .p-r-sm { padding-right: ($spacer-y * 0.5) !important; } .p-b-sm { padding-bottom: ($spacer-y * 0.5) !important; } .p-l-sm { padding-left: ($spacer-y * 0.5) !important; } .p-x-sm { padding-right: ($spacer-x * 0.5) !important; padding-left: ($spacer-x * 0.5) !important; } .p-y-sm { padding-top: ($spacer-y * 0.5) !important; padding-bottom: ($spacer-y * 0.5) !important; } .p-a-xs { padding: ($spacer * 0.25) !important; } .p-t-xs { padding-top: ($spacer-y * 0.25) !important; } .p-r-xs { padding-right: ($spacer-y * 0.25) !important; } .p-b-xs { padding-bottom: ($spacer-y * 0.25) !important; } .p-l-xs { padding-left: ($spacer-y * 0.25) !important; } .p-x-xs { padding-right: ($spacer-x * 0.25) !important; padding-left: ($spacer-x * 0.25) !important; } .p-y-xs { padding-top: ($spacer-y * 0.25) !important; padding-bottom: ($spacer-y * 0.25) !important; } .padding{ padding: 1.5rem 1.5rem; } .padding-out{ margin: -1.5rem -1.5rem; } @include media-breakpoint-down(md) { .padding{ padding: 1rem 1rem; } .padding-out{ margin: -1rem -1rem; } } @include media-breakpoint-down(sm) { .padding{ padding: 0.5rem 0.5rem; } .padding-out{ margin: -0.5rem -0.5rem; } .no-padding-xs{ padding: 0; } }
Lazy load modules for Angular 1.x, you can config the modules in the config.lazyload.js to load the other dependencies.
https://github.com/johnpapa/angular-styleguide
run bower install
to install the modules.
when run bower install
, you may need choose the version for some modules, you can choose the latest version of them, but keep the "angular, angular-animate, angular-aria, angular-cookies, angular-messages, angular-resource, angular-sanitize, angular-touch" have the same version.
The de-facto solution to flexible routing with nested views
Load modules on demand (lazy load) in AngularJS.
localStorage and sessionStorage done right for AngularJS.
AngularJS 1.2+ native directives for Bootstrap 3/4
Swiss-Army-Knife of AngularJS tools (with no external dependencies!).
AngularJS-native version of Select2 and Selectize
AngularJS directive to Summernote
Slider directive for AngularJS.
An AngularJS directive that creates a Tree based on a Bootstrap "nav" list.
An AngularJS directive for file upload using HTML5 with FileAPI polyfill for unsupported browsers
Image Crop directive for AngularJS
Code source of Smart Table module: a table/grid for Angularjs
Google Maps
Ajax load modules and templates.
A tiny javascript hash router
JavaScript's utility, used for render template.