Build tools

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

1. Download and install Node, which we use to manage our dependencies.
2. Run npm install -g bower grunt-cli
3. Run bower install --force-latest to install dependencies
4. Run grunt build to build dist with minified js and css
5. 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
    |-- html/
    |   |-- css/
    |   |-- images/
    |   |-- libs/
    |   |-- scripts/
    |   |   |-- app.js
    |   |-- index.html

Styles / 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-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; }
        

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

        

Scripts

Core modules

• ui-jp

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

• ui-include

  Include the html partials into the page
  <div data-ui-include="'../views/blocks/navbar.brand.html'"></div>
  the data-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

This template uses the Pjax for ajax load the page. you can disable it by remove the relative codes(remove the html/scripts/ajax.js)

Elements

Bootstrap 4 components

• Arrow
• Box
• Button
• Color
• Dropdown
• Grid
• Icon
• Label
• List Group
• Modal
• Nav
• Progress
• Social
• Streamline
• Timeline
• Widget

Browser

For material icons on ie9, please check Material Icons

"For browsers that do not support ligatures, fall back to specifying the icons using numeric character references."

But numeric character does not pass the http://validator.w3.org/ .

Libs

• Pjax
• Pace
• jScroll
• Stellar
• Sticky-kit
• Fullcalendar
• Datatables
• Footable
• JvectorMap
• Nestable
• Sortable
• Flotchart
• Chartjs
• Echarts
• Sparklines
• Easy pie chart
• Parsley
• Select2
• Summernote
• Datetimepicker