Documents

For the bootstrap css and components, please check the Bootstrap

CSS Extensible classes

Overview

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.

Features:

  • 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

v.2.3
  • Add Parsley.js for form validate
  • Add Fuelux Wizard
  • Form wizard with Parsley
  • Add DataTables
v.2.2
  • Add Dropdown select
  • Add Datepicker
  • Add Slider
  • Add Fullcalendar
  • Add Fuelux
  • Add Datagrid for dynamic table
  • Add Nav slide left/right for mobile use
v.2.1
  • 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
v.2.0
  • 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
v.1.0
  • Initial Release with bootstrap 2.3.2

Credits:

Icons

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-large or .btn-small or .btn-mini for additional sizes.

Disabled state

Add .disabledfor disabled state.

Progress

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
14Inbox 3Message 


  

    

    14

    Inbox

  

  

    

    3

    Message

Panel

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 footer


  
Panel heading


   Basic panel example

  
Panel footer

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

Mobile

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.

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.

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

Combodate

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

Useage

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

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

Sparkline

Check more details on Sparkline.

Useage

add .sparkline to trigger the sparkline.

Basic bar
Basic line
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
<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.

Usage

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"

Example
75%
new visits


  75%

  


    new visits

Datepicker

Check more details on Bootstrap Datepicker.

Usage

add .datepicker class on input.

Slider

Check more details on Slider.

Usage

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

Usage

add .dropdown-menu class on dropdown-menu.

Fullcalendar

Check more details on Fullcalendar.

Fuelux

Check more details on Fuelux.

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

DataTables

Check more details on datatables.net.

Cross browser compatibility

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