Overview
A fully responsive web app template.
CSS Extensible classes
For the bootstrap css and components, please check the Bootstrap 3
LESS
This file's css is generated by LESS files. you can use the less.php to output the css. There are many Variables, Mixins you can use.
Icons
Use FontAwesome font icons, over 369 icons with version 4.0 and more will be added in the future, check FontAwesome for more details to see how to use and examples
Animate.css
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. do not use animate css to an element which contains the dropdown-menu, it will cut the edge.
animate.css on landing page: you can add animate css on the dom element when it appear in the viewpoint. <div data-ride="animated" data-animation="fadeInUp" data-delay="250"></div>
Colors use less file to build your colors
8 default color palettes, build colorful widgets. you can open the less/app.variables.less to config your own colors(@brand-primary, @brand-success, @brand-warning, @brand-danger, @brand-info, @brand-black, @brand-dark, @brand-light
).
You can use the mixin wariant. use .color-variant
and .font-variant
to build the color scheme, check more details in the less/app.colors.less.
.bg-light
.dker
.dk
.bg-light
.lt
.lter
.bg-dark
.dker
.dk
.bg-dark
.lt
.lter
.bg-black
.dker
.dk
.bg-black
.lt
.lter
.bg-primary
.dker
.dk
.bg-primary
.lt
.lter
.bg-success
.dker
.dk
.bg-success
.lt
.lter
.bg-info
.dker
.dk
.bg-info
.lt
.lter
.bg-warning
.dker
.dk
.bg-warning
.lt
.lter
.bg-danger
.dker
.dk
.bg-danger
.lt
.lter
Layout
use .vbox(vertical box) and .hbox(horizontal box) to build the web application layout. you can build the complicated layout as you want.
hbox
hbox is a horizontal wrapper that you can put columns in it. you can put <aside>
and <section>
in it.
<section class="hbox"><aside class="aside-lg"></aside><section></section></section>
you can use .aside, .aside-sm, .aside-md, .aside-lg
to set the width of an aside wrapper. also you can use the Bootstrap grid system, like .col-6, .col-7
...
.stretch box has the 100% height. <section class="hbox stretch"></section>
vbox
vbox is a vertical wrapper that you can put the row in it.
<section class="vbox"><header class="header"></header><section class="w-f"></section><footer class="footer"></footer></section>
.w-f means this vbox have a footer
.flex vbox let you put a flex height of the header/footer.
<section class="vbox flex"><header></header><section><section><section></section></section></section><footer></footer></section>
Example
.hbox
.vbox
Application layout
you can use the .app on the html tag to build the app layout <html class="app"></html>
Off screen nav
Support three nav styles on mobile, "Pull down", "push left", "push right"
Pull down
use data-toggle="class:show" data-target=".nav-primary"
to trigger the nav pull down in the header
off screen push left
use data-toggle="class:nav-off-screen" data-target="#nav"
to trigger the off screen nav
use data-toggle="class:nav-off-screen" data-target="#nav"
to toggle back in the body
off screen push right
use data-toggle="class:nav-off-screen push-right" data-target="body"
CSS Utilities
Button size (Specific button size) | |
.btn-s-xs | width:90px |
.btn-s-sm | width:100px |
.btn-s-md | width:120px |
.btn-s-lg | width:150px |
.btn-s-xl | width:200px |
.btn-rounded | rounded button |
.btn-icon | square icon button |
Vertical align (When you use the .hbox you can use these classes on the aside) | |
.v-middle | vertical align: middle |
.v-top | vertical align: top |
.v-bottom | vertical align: bottom |
Margin | |
.m | margin: 15px |
.m-xs | margin: 5px |
.m-sm | margin: 10px |
.m-md | margin: 20px |
.m-lg | margin: 30px |
.m-n | margin: 0px |
.m-l | margin-left: 15px |
.m-l-xs | margin-left: 5px |
.m-l-sm | margin-left: 10px |
.m-l-md | margin-left: 20px |
.m-l-lg | margin-left: 30px |
.m-l-xl | margin-left: 40px |
.m-l-none | margin-left: 0px |
.m-l-n | margin-left: -15px |
.m-l-n-xxs | margin-left: -1px |
.m-l-n-xs | margin-left: -5px |
.m-l-n-sm | margin-left: -10px |
.m-l-n-md | margin-left: -20px |
.m-l-n-lg | margin-left: -30px |
.m-l-n-xl | margin-left: -40px |
.m-r (margin right) , m-t (margin top) , m-b (margin bottom) have the same classes as the .m-l. | |
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 |
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 |
Padder and Wrapper | |
.padder | padding-left: 15px; padding-right: 15px |
.padder-v | padding-top: 15px; padding-bottom: 15px |
.padder-md | padding-top: 20px; padding-bottom: 20px |
.padder-lg | padding-top: 30px; padding-bottom: 30px |
.no-padder | padding: 0 |
.wrapper | padding: 15px |
.wrapper-sm | padding: 10px |
.wrapper-xs | padding: 5px |
.wrapper-md | padding: 20px |
.wrapper-lg | padding: 30px |
.wrapper-xl | padding: 50px |
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 extra small devices |
.text-left-xs | align text left only on extra small devices |
.text-right-xs | align text right only on extra small devices |
Item | |
.item-overlay | overlay the element on an item, default display:none, with '.active' class will show |
.opactiy | background with transparent |
.gd | background with gradient |
.top | top element on a item element |
.bottom | bottom element on a item element |
.center | center element on a item element |
Media | |
.img-full | width: 100% |
.thumb-lg | width: 128px |
.thumb-md | width: 64px |
.thumb | width: 50px |
.thumb-sm | width: 48px |
.thumb-xs | width: 38px |
Avatar | |
.avatar | circle photo |
status | status, '.on', '.off', '.busy', '.away' |
status position | status position, '.right', '.bottom' |
status size | status size, '.sm', '.md' |
Components Lightweight components to best practice on mobile
Toggle class
It's easy to change a dom class by click on another dom element.
Usage
Add data-toggle="class:className"
and data-target="#target"
to a link or button to toggle a class.
Example
Toggle the background
Shift
Shift js let you change the dom which have different position from mobile to desktop, it avoid to use duplicate elements.
Add data-toggle="shift:insertBefore"
and data-target="#target"
to the dom that you want to shift.
<div class="shift" data-toggle="shift:insertBefore" data-target="#shift-target">
Put me before "Usage" on mobile
</div>
it also support data-toggle="shift:appendTo"
, data-toggle="shift:prependTo"
, data-toggle="shift:insertAfter"
Bjax
Bjax let you load page via ajax method
Usage
Add data-bjax
to a link or button.
data-url
load content url
data-target
load content to a target element
data-el
just get element from the loaded content
data-replace
replace the location
Example
Load Me Load Page Element Load PageLoad Page Element
Button state
Change the button state when click on it. add .text
.text-active
Example
With icons
Dropdown select
Support radio and checkbox dropdown select
Usage
add .dropdown-menu
class on dropdown-menu.
<div class="btn-group">
<ul class="dropdown-menu dropdown-select">
<li class="active">Option1</li>
<li>Option2</li>
<li>Option3</li>
<li class="disabled">I'm disabled</li>
</ul>
</div>
<div class="btn-group">
<ul class="dropdown-menu dropdown-select">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
<li>Option4</li>
<li>Option5</li>
</ul>
</div>
Plugins
jPlayer
Check the online document
Datatables
Check the online document.
Google map
Check the online document.
JvectorMap
Check the online document.
Markdown
Check the online document.
Nestable
Check the online document.
Slider
Check the online document.
WYSISYG
Check the online document.
Wizard
Check the online document.
Tiles
Check the online document.
Sortable
Check the online document.
Flotchart
Check the online document.
Sparklines
Check the online document.
Easy pie chart
Check the online document.
Parsley
Check the online document.
Chosen
Check the online document.
Datepicker
Check the online document.
File-input
Check the online document.
Cross browser compatibility
Use response.js to support IE8 media queries and html5.js to support html5 markups.