Overview

A fully responsive web app / admin dashboard template.

Features:

  • Built with Bootstrap 3
  • Flat ui with clean style
  • Many components
  • Mobile widgets
  • Fully responsive
  • Web app layouts
  • Html5 Markup & CSS3

CSS Extensible classes

For the bootstrap css and components, please check the Bootstrap 3.0

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.

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.

.w-f means this vbox have a footer

.flex vbox let you put a flex height of the header/footer.

<section class="vbox flex">
</section>
Example

.hbox

section

.vbox

header
footer
section
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
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
Others
.padder padding-left:15px; padding-right:15px
.padder-v padding-top:15px; padding-bottom:15px
.wrapper padding:15px
.text-uc text uppercase
.text-lt text line through
.text-ul text under line

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.

Usage

Add data-toggle="shift:insertBefore" and data-target="#target" to the dom that you want to shift.

Put me before "Usage" on mobile
 Put me before "Usage" on mobile

it also support data-toggle="shift:appendTo", data-toggle="shift:prependTo", data-toggle="shift:insertAfter"

Button state

Change the button state when click on it. add .text .text-active

Example
With icons

Support radio and checkbox dropdown select

Usage

add .dropdown-menu class on dropdown-menu.

Plugins

Fullcalendar

Check the online document

Calendar

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.

Typehead

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.

Intro

Check the online document.

Touchspin

Check the online document.

Cross browser compatibility

Use response.js to support IE8 media queries and html5.js to support html5 markups.