For the bootstrap css and components, please check the Bootstrap

CSS Extensible classes


first is a mobile first web app / admin dashboard theme with flat ui, it's lightweight but with many components suit to your need. it's fully responsive, the widgets and components are mobile first.


  • Lightweight
  • Flat ui with clean style
  • Many components
  • Mobile widgets
  • Base on Bootstrap 3(v.2)
  • Html5 Markup & CSS3
  • Easy colors change base on Color Scheme
  • Slide and Fade carousel
  • Panel and List group mobile widgets
  • Enhanced lightweight Chart components
  • Shift js let you move the Dom when screen change

Change log

  • Add Parsley.js for form validate
  • Add Fuelux Wizard
  • Form wizard with Parsley
  • Add DataTables
  • Add Dropdown select
  • Add Datepicker
  • Add Slider
  • Add Fullcalendar
  • Add Fuelux
  • Add Datagrid for dynamic table
  • Add Nav slide left/right for mobile use
  • Nav badge support
  • Add .no-touch on html if device have no touch interface
  • Add sidebar for layout use
  • Add mail app page
  • Some bugs fixed
  • Move to Bootstrap 3.0
  • Bootstrap 3.0 input ie8 fixed
  • Use new 3.0 grid system
  • Add some components
  • Add modal example
  • Nav fixed support
  • Some bugs fixed
  • Initial Release with bootstrap 2.3.2



Use FontAwesome font icons, over 361 icons with version 3.2 and more will be added in the future, check FontAwesome for more details to see how to use and examples

Circle buttons

Circle button extended the Bootstrap button class, but need put a icon in and add the .btn-circle class on the button.

Button options

Support .btn-primary, .btn-success, .btn-info, .btn-inverse, .btn-warning, .btn-danger, .btn-white

Cross browser compatibility
IE8 doesn't support rounded corners, the circle button become to a square button

Button size

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm or .btn-xs for additional sizes.

Disabled state

Add .disabledfor disabled state.


Added bar sizes on progress bar. Add .progress-mini or .progress-small

List group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Basic list group

Use .list-group for wrapper and .list-group-item for items.

  • Inbox
  • Message
  • Inbox
  • Message
With badges and chevrons
  • 14Inbox
  • 3Message
  • 14 Inbox
  • 3 Message
Linked list group


Box panel that wrap your content

Basic panel

By default, all the .panel does is apply some basic border and padding to contain some content.

Basic panel example
Basic panel example
Panel with heading and footer
Panel heading
Panel content
Panel heading
Basic panel example

For more complex content in the panel heading and panel content, please check on the Widges page.


Support three nav styles on mobile, "Pull down", "Slide left", "Slide right"

Pull down (default)

use data-toggle="class:show" data-target="#nav" to trigger the nav pull down in the header

Slide left

use data-toggle="class:slide-nav slide-nav-left" data-target="body" to trigger the slide left in the header, check it on the index.html

use data-toggle="class:slide-nav slide-nav-left" data-target="body" to toggle back in the body

<body> </body>
Slide right

use data-toggle="class:slide-nav slide-nav-right" data-target="body" to trigger the slide right in the header, check it on the buttons.html

use data-toggle="class:slide-nav slide-nav-right" data-target="body" to toggle back in the body

<body> </body>

Components Lightweight components to best practice on mobile

Toggle class

It's easy to change a dom class by click on another dom element.


Add data-toggle="class:className" and data-target="#target" to a link or button to toggle a class.



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
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

With icons


Use combodate for date picker, it's light and mobile friendly. check on Combodate for more details.


Add .combodate class to the input and use data-format="DD-MM-YYYY HH:mm" data-template="D MMM YYYY - HH : mm" to format the display

<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 input for more details.


Check more details on Sparkline.


add .sparkline to trigger the sparkline.

Basic bar
Basic line
Composite with x-axis
  • 12:00
  • 2:00
  • 4:00
  • 6:00
  • 8:00
  • 10:00
  • 12:00
  • 2:00
  • 4:00
  • 6:00
  • 8:00
  • 10:00
<div class="sparkline" data-type="line" data-resize="true" data-height="150" data-width="100%" data-line-color="#bfea5f" data-fill-color="#f3fce3" data-highlight-line-color="#e1e5e9" data-spot-radius="5" data-composite-data="[160,230,250,300,320,330,280,260,250,280,250,260,250,255,330,345,300,210,200,200,170,180,250,250,200,200,280,270,310,250,280,175]" data-composite-line-color="#a3e2fe" data-composite-fill-color="#e3f6ff" 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]"
</div><ul class="list-inline text-muted axis"> <li>12:00
am</li> <li>2:00</li> </ul>

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.


add .easypiechart class and use data attribute to config data-percent="75", data-size="120", data-bar-color="75", data-line-width="5", data-track-color="#eee"

new visits
new visits


Check more details on Bootstrap Datepicker.


add .datepicker class on input.


Check more details on Slider.


add .slider class 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">

Support radio and checkbox dropdown select


add .dropdown-menu class on dropdown-menu.


Check more details on Fullcalendar.


Check more details on Fuelux.

First used the Fuelux datagrid for danymic table. and enhanced the pillbox.


Check more details on


Check more details on Select2.

Cross browser compatibility

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