Get this theme

Intro

Base on the world's most popular css framework Bootstrap 4 and the popular js framework AngularJS, {{app.name}} provide the easy way to build your next web project.

Build tools

{{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.

Download and install Node, which we use to manage our dependencies.
Run npm install -g bower grunt-cli
Run bower install --force-latest to install dependencies
Run grunt build to build dist with minified js and css
Run npm start to start server

Note: any commands we tell you to run must be ran from the project's root folder.

What's include

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

CSS / Scss

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.

Utility classes

Margin

.m-0 { margin:        0 !important; }
.m-t-0 { margin-top:    0 !important; }
.m-r-0 { margin-right:  0 !important; }
.mb-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; }

Padding

.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;
  }
}

Angular version

Lazy load modules for Angular 1.x, you can config the modules in the config.lazyload.js to load the other dependencies.

Code style

https://github.com/johnpapa/angular-styleguide

Manage the dependencies

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.

Core modules

angular-ui-router
The de-facto solution to flexible routing with nested views
ocLazyLoad
Load modules on demand (lazy load) in AngularJS.
ngStorage
localStorage and sessionStorage done right for AngularJS.
Angular Strap
AngularJS 1.2+ native directives for Bootstrap 3/4

Optional modules

UI.Utils

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

AngularJS-native version of Select2 and Selectize
Angular Summernote

AngularJS directive to Summernote
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

Html version

The html version use ajax to load some blocks, you need put the files on a server to preview.

Located in the "html" folder, it also use lazyload for plugins

Core modules

ui-jp

Dynamic jQuery plugin call on dom
<div ui-jp="easyPieChart" ui-options="options"></div>
the ui-jp plugin will call the "easyPieChart" function with the options, same as $.easyPieChart(options)
you can config the plugins in the "html/scripts/config.lazyload.js".
ui-include

Include the html partials into the page
<div ui-include="'../views/blocks/navbar.brand.html'"></div>
the ui-include will be replaced with the real partial.
if you do not want to include the partials, you can just copy the real blocks and replace it.

Ajax

The html version using the Pjax for ajax load the page. you can disable it by remove the relative codes(remove the html/scripts/ajax.js)

Documents

Over a dozen reusable components to build awesome web project, We provided AnguarJS and Html versions for you.

Contents

Intro

Base on the world's most popular css framework Bootstrap 4 and the popular js framework AngularJS, {{app.name}} provide the easy way to build your next web project.

Build tools

What's include

CSS / Scss

Utility classes

Margin

Padding

Angular version

Code style

Manage the dependencies

Core modules

Optional modules

UI.Utils

angular-ui-select

Angular Summernote

venturocket-angular-slider

angular-bootstrap-nav-tree

angular-file-upload

ngImgCrop

angular-smart-table

angular-ui-map

Html version

Core modules

ui-jp

ui-include

Ajax