Documents
Overview
todo is 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
- 2 runable applications
CSS Extensible classes
For the bootstrap css and components, please check the Bootstrap 3.0
Icons
Use FontAwesome font icons, over 361 icons with version 3.2 and more will be added in the future, check FontAwesomefor more details to see how to use and examples
Animate.css
animate.cssis 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: #594f8d;@brand-success: #92cf5c;@brand-warning: #fcc44d;@brand-danger: #fb6b5b;@brand-info: #5dcff3;@brand-black: #2c3039;@brand-dark: #4c5566;@brand-light: #ebeef5;), also you can use the mixin wariant. use .color-variantand .font-variantto 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-lgto 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.
<code class="html"><section class="vbox flex"></code></section>
Example
.hbox
section
.vbox
header
section
box layout
you can use the .layout-box on the html tag to build the layout box
<html class="layout-box"></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
<a class="btn btn-link visible-xs" data-toggle="class:show" data-target=".nav-primary"><i class="fa fa-bars"></i></a>off screen push left
use data-toggle="class:nav-off-screen" data-target="#nav"to trigger the off screen nav
<a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav"><i class="fa fa-bars"></i></a>
use data-toggle="class:nav-off-screen" data-target="#nav"to toggle back in the body
<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>off screen push right
use data-toggle="class:nav-off-screen push-right" data-target="body"
<a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen push-right" data-target="body"><i class="fa fa-bars"></i></a>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
<button class="btn btn-white" data-toggle="class:bg-success" data-target=".nav-bar"><code class="html"> Toggle the brand background </code></button>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
<button class="btn btn-white" data-toggle="button"><code class="html"><span class="text">More</span><span class="text-active">Less</span></code></button>With icons
<button class="btn btn-white" data-toggle="button"><code class="html"><span class="text"><i class="fa fa-thumbs-up text-success"></i>25</span><span class="text-active"><i class="fa fa-thumbs-down text-danger"></i>10</span></code></button>Combodate
Use combodate for date picker, it's light and mobile friendly. check on Combodatefor more details.
Useage
Add .combodateclass to the input and use data-format="DD-MM-YYYY HH:mm"data-template="D MMM YYYY - HH : mm"to format the display
Example
- :<input type="text" class="combodate" data-format="DD-MM-YYYY HH:mm" data-template="D MMM YYYY - HH : mm" name="datetime" value="21-12-2012 20:30">File input
Check the file input plugin on File inputfor more details.
BrowseSparkline
Check more details on Sparkline.
Useage
add .sparklineto trigger the sparkline.
Basic bar
Basic line
<code class="html"></code>
Composite with x-axis
-
12:00
am -
2:00 -
4:00 -
6:00 -
8:00 -
10:00 -
12:00
pm -
2:00 -
4:00 -
6:00 -
8:00 -
10:00
<code class="html"><div class="sparkline" data-type="line" data-resize="true" data-height="185" data-width="100%" data-line-width="1" data-line-color="#afcf6f" data-spot-color="#afcf6f" data-fill-color="rgba(240,240,240,0.5)" data-highlight-line-color="#e1e5e9" data-spot-radius="4" data-data="[120,250,200,325,400,380,250,320,345,250,250,250,200,325,300,365,250,210,200,180,150,160,250,250,250,200,300,310,330,250,320,205]" data-composite-config='{"lineColor":"#dddddd","fillColor":"#ffffff","spotColor":"#dddddd","spotRadius":"4"}' data-composite-data="[325,220,250,200,350,380,250,320,345,250,250,250,200,325,300,365,250,210,200,180,150,160,250,250,250,200,300,310,330,250,320,205]"> </div> <ul class="list-inline text-muted axis"> <li>12:00<br>am</li> <li>2:00</li> </ul> </code>Easy Pie Chart
Check more details on Easy Pie Chart. use excanvas.js for IE8 rendering. if your app do not need support IE8, you can remove it.
Usage
add .easypiechartclass and use data attribute to config data-percent="75", data-size="120", data-bar-color="75", data-line-width="5", data-track-color="#eee"
Example
1%
new visits
Datepicker
Check more details on Bootstrap Datepicker.
Usage
add
.datepickerclass on input.
<input class="input-sm datepicker" size="16" type="text" value="12-02-2013" data-date-format="dd-mm-yyyy">Slider
Check more details on Slider.
Usage
add .sliderclass on input.
<input class="slider" type="text" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-selection="after"> Dropdown select
Support radio and checkbox dropdown select
Usage
add .dropdown-menuclass on dropdown-menu.
Fuelux
Check more details on Fuelux.
enhanced the pillbox.
Fullcalendar
Check more details on Fullcalendar.
Use pillbox to create an event and drag on to the calendar. it also use jquery touch-punch to support on touchable screen.
Datatables
Check more details on Datatables.
Sortable
Check more details on Sortable.
Morris
Check more details on Morris.
Parsley
Check more details on Parsley.
Select2
Check more details on Select2.
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.
Tasks
Tasks app let you create your own task and give the comments.
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.
<!--[if lt IE 9]><script src="js/ie/respond.min.js" cache="false"></script><script src="js/ie/html5.js" cache="false"></script><script src="js/ie/excanvas.js" cache="false"></script><![endif]-->