Build tools
aside uses Gruntfor 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-latestto install dependencies - Run
grunt buildto build dist with minified js and css - Run
npm startto 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.
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
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/ .
Thanks!