Overview
A fully responsive web app / admin dashboard template.
Features:
- Built with Bootstrap 3.0
- Flat ui with clean style
- Many components
- Mobile widgets
- Fully responsive
- Web app layouts
- Html5 Markup & CSS3
- One RESTful api application
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">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 |
| 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
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.
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
Dropdown select
Support radio and checkbox dropdown select
Usage
add .dropdown-menu class on dropdown-menu.
Plugins
Fuelux
Check the online document.
enhanced the pillbox.
Fullcalendar
Check the online document.
Use pillbox to create an event and drag on to the calendar. it also use jquery touch-punch to support on touchable screen.
Calendar
Check the online document.
Datatables
Check the online document.
Google map
Check the online document.
Markdown
Check the online document.
Nestable
Check the online document.
Slider
Check the online document.
WYSISYG
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.
Select2
Check the online document.
Combodate
Check the online document.
Datepicker
Check the online document.
File-input
Check the online document.
Intro
Check the online document.
Applications built with Backbone
Notes
Notes is web application with CRUD(create, read, update, delete) and Search function. it built with Backbone and underscore, also used moment.js for time display. it use backbone localStorage for data model. but also you can replace with the RESTful api.
It use php Slim framework for the RESTful api.
- Create a Mysql database 'app'
- Use the 'api/notes.sql' to create a note table
- Change the 'api/index.php' to config the database address/name/password
- Change the 'js/apps/notes.js', switch the 'localStorage' to 'url' in the Notelist collection. (comment the line 32 and remove the comment on line 35)
Chrome app
For more how to build chrome app, please check here
Cross browser compatibility
Use response.js to support IE8 media queries and html5.js to support html5 markups.