• Created: 07/04/2012
  • Latest Update: 08/06/2012
  • By: Kamrujaman Shohel
  • Email: mail@kjaman.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email by my profile email form.
ots @ tp2p

About Srabon

Srabon is very powerfull responsive admin template. Here have used all latest technology. It is bootstarp compatible so it is very easy to use. It is 3 column fluid and fixed both layout. Here is used CSS3, HTML5, Media query, IOS orientation fix, toch frienly and very much adaptive with any size viewport especially iPhone, iPad, androind phone, tablet.

Being powered by jQuery and Bootstarp with lots of plugins implemented in 23 separated HTML files and having Icons Sprites with different styles, widgets, Charts, Notifications, tooltips this has become a complete admin panel for any kind of web presence.

I always appreciate your good suggestions. If you have any suggestion or if you got any bug, errors then please send me private message by my profile email form.

  1. 100% Rsponsive Template
  2. Bootstrap Compatible
  3. 23 Html files
  4. Nice and clean Dashboard
  5. 1000+ Sprite Icons
  6. 2 Diffrent login pagse style
  7. 2 Different eror pages style
  8. Lots of cool Widgets
  9. CSS3 /html5
  10. IOS orientation fix
  11. Content post pages and preview pages
  12. Cool Typography
  13. jQuery powered
  14. jQuery UI
  15. Cool JQuery Chosen Selectbox
  16. JQuery Uniform
  17. Nice Dropdown
  18. Sticky Notification
  19. jQuery noty
  20. Sexy UI slider
  21. Tags Input
  22. Text Editor
  23. jQuery tooltip
  24. jQuery Minichart
  25. Modal and Dialoge
  26. Sexy Confirm box
  27. jQuery Colorbox
  28. Multifield Extender
  29. Elfinder File manager
  30. jQuery Accordion
  31. Check All and sliding action Menu
  32. Data Table
  33. Auto Complete
  34. Full Calendar
  35. jQuery Raty
  36. Smart Wizard
  37. jQuery Validation
  38. Collapsible Widget
  39. JQplo chart
  40. Syntax Highlighter
  41. AND many more +++

Initialize

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Admin Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Admin Panel Template">
<meta name="author" content="Westilian: Kamrujaman Shohel">
<!-- styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/themes.css" rel="stylesheet">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie/ie8.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie/ie9.css" />
<![endif]-->
<!--fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
</head>
<body>

<!--BODY HERE-->

<!-- javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</body>
</html>

Requires HTML5 doctype

This is basic startup of this tmeplate

<!DOCTYPE HTML>
<html lang="en">
<!--BODY-->
</html>   

Requires Meta Tag

Following meta tag must require to ensure devices display responsive pages properly

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Common Html Structure

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Admin Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="navbar navbar-fixed-top">
    <!--Top fixed nav here-->
</div>

<div id="sidebar">
    <!-- sidebar here-->
    <div id="side-accordion">
    <!--side accordion here-->
    </div>
    <ul class="side-nav">
   <!--side nvigation here-->
    </ul>
</div>

<div id="main-content">
    <div class="container-fluid">
     <!--Page content here-->
    </div>
</div>

</body>
</html>

Example

Here is boxy widget block preview. You can use it anywhere in the template

Conetnt Here

Widget Markup Boxy Widget

This template have a common widget block. Widget block html structure is bellow:

<div class="widget-block">
  <div class="widget-head">
    <h5><i class="black-icons money"></i> Recent Orders</h5>
    <div class="widget-control pull-right">
      <!--Widget right dropdown here-->
    </div>
  </div>
  <div class="widget-content">
    <div class="widget-selectbox">
      <!--search or filter bar here-->
    </div>
    <div class="widget-box">
      <!--Widget content here-->
    </div>
    <div class="widget-bottom">
      <!--Widget bottom here-->
      <div class="pagination">
        <!--Pagination for widget if require-->
      </div>
    </div>
  </div>
</div>

Widget Bottom Boxy Widget

If you don't want to use Widget Bottom then you can delete following markup form widget.

<div class="widget-bottom">
  <!--Widget bottom here-->
  <div class="pagination">
    <!--Pagination for widget if require-->
  </div>
</div>

Widget Head

Widget Head contain header of widget and action drop down of the widget

<div class="widget-head">
  <h5><i class="black-icons money"></i> Recent Orders</h5>
  <div class="widget-control pull-right">
    <!--Widget right dropdown here-->
  </div>
</div>
Recent Post
Content Here

Widget Markup Non Boxy Widget

Boxy widget and non boxy html structure is same> Just use nonboxy-widget class instead of widget-block class. Non Boxy widget html structure is bellow:

<div class="nonboxy-widget">
  <div class="widget-head">
    <h5><i class="black-icons money"></i> Recent Orders</h5>
  </div>
  <div class="widget-content">
    <div class="widget-selectbox">
      <!--search or filter bar here-->
    </div>
    <div class="widget-box">
      <!--Widget content here-->
    </div>
    <div class="widget-bottom">
      <!--Widget bottom here-->
      <div class="pagination">
        <!--Pagination for widget if require-->
      </div>
    </div>
  </div>
</div>

Widget Bottom Boxy Widget

If you don't want to use Widget Bottom then you can delete following markup form widget.

<div class="widget-bottom">
  <!--Widget bottom here-->
  <div class="pagination">
    <!--Pagination for widget if require-->
  </div>
</div>

Widget Head

Widget Head contain header of widget.

<div class="widget-head">
  <h5><i class="black-icons money"></i> Recent Orders</h5>
</div>
.side-nav li a .sidenav-icon {
	background:url(../img/sidenav-sprite.png) no-repeat;
}
.side-nav li ul li a .sidenav-icon {
	background:url(../img/sidenav-sprite.png) -80px 0 !important;
}
.side-nav li a .dashboard-n-icon {
	background-position: -30px 0 !important;
}
---------------- More

.collapsible-widget .widget-head { cursor:pointer;}
.widget-block .widget-head .h-icon{ width:16px; height:16px; display:block; position:absolute; top:12px; right:10px; background:url(../img/collapse.gif) no-repeat;}
.widget-block .active .h-icon{ background-position:left !important}
.widget-block .inactive .h-icon{ background-position:right !important}
.widget-block .widget-head h5 {
	padding-left: 10px;
	padding-top:11px;
	text-transform:uppercase;
	font-size:12px;
}
.widget-block .widget-bottom {
	height:40px;
	background: #f1f1f1; /* Old browsers */
	background: -moz-linear-gradient(top, #f1f1f1 0%, #dbdbdb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f1f1), color-stop(100%, #dbdbdb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f1f1f1 0%, #dbdbdb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f1f1f1 0%, #dbdbdb 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f1f1f1 0%, #dbdbdb 100%); /* IE10+ */
	background: linear-gradient(to bottom, #f1f1f1 0%, #dbdbdb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#dbdbdb', GradientType=0 ); /* IE6-9 */
	border-top: 1px solid #c2c2c2;
	-webkit-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
	-webkit-box-shadow: inset 0 1px 0 #f9f9f9, 0 0 3px #ddd;
	-moz-box-shadow: inset 0 1px 0 #f9f9f9, 0 0 3px #ddd;
	box-shadow: inset 0 1px 0 #f9f9f9, 0 0 3px #ddd;
}
<!-- styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet">
<link href="css/jquery.jqplot.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<link href="css/elfinder.min.css" rel="stylesheet">
<link href="css/elfinder.theme.css" rel="stylesheet">
<link href="css/fullcalendar.css" rel="stylesheet">
<link href="js/plupupload/jquery.plupload.queue/css/jquery.plupload.queue.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link id="themes" href="css/themes.css" rel="stylesheet">

Sometimes Internet explorer's different version may occur different type of css problem. Here I included 3 different css files in conditional commnets for fix IE7 to IE9 css issue. Always use following css files in head section:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie/ie8.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie/ie9.css" />
<![endif]-->

If you need to fix any IE7/IE8/IE9 related css issues then just place code in relevant css file. For an example in IE8 is getting extra 20px margin in any elemnts(it may be .sidebar or anywhere) then just open ie8.css and write css like .side-nav{margin:0px;}. Another example if you use filter in css by following way:

.widget-block .widget-bottom {
/*----MORE CODE---*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#dbdbdb', GradientType=0 ); /* IE6-9 */
}

Then you need to change filter:none for IE9. Now open ie9.css and write following code:

.widget-block .widget-bottom {
filter:none;
}

Normally IE5 to IE8 do not support CSS3 Media Query. But at least IE8 should support for CSS3 Media Query and that is very important for cross-browser responsive web design. This template I have included css3 media query support for less than IE9. Include following file for Less than IE9 CSS3 Media Query support.

<!-- css3-mediaqueries.js for IE less than 9 -->
 <!--[if lt IE 9]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
 <![endif]-->

You check a blog post for more about Less than IE9 CSS3 Media Query support from here http://goo.gl/jeqy7

Files and Folder

Above image define this template files and folder structures. All css files is in css folder. Data folder contain all colorbox ajax related files and images. Files folder contain all uploaded file form elfinder file manager. ico contain favico. img contain all images/icons of this template. js contain all javascript file of this template. php contain elfinder related php files. swf contain datatable plugin's table exporter files.

Plugins

I used jquery, jquery UI and twitter bootstarp for this template. And I included some nice plugins also. I used following templates for Srabon:

/*--- Syntax Highlighter ---*/
<script src="js/prettify.js"></script>

/*--- Mini Chart ---*/
<script src="js/jquery.sparkline.min.js"></script>

/*--- Touch Scroll used for sidebar ---*/
<script src="js/jquery.nicescroll.min.js"></script>

/*--- Accordion ---*/
<script src="js/accordion.jquery.js"></script>

/*--- Stepy Wizard ---*/
<script src="js/smart-wizard.jquery.js"></script>

/*--- Form Validation ---*/
<script src="js/vaidation.jquery.js"></script>

/*--- Extendable Form ---*/
<script src="js/jquery-dynamic-form.js"></script>

/*--- Calendar ---*/
<script src="js/fullcalendar.js"></script>

/*--- Start Raty ---*/
<script src="js/raty.jquery.js"></script>

/*--- Notification ---*/
<script src="js/jquery.noty.js"></script>

/*--- Text Editor ---*/
<script src="js/jquery.cleditor.min.js"></script>

/*--- Data Table ---*/
<script src="js/data-table.jquery.js"></script>
<script src="js/TableTools.min.js"></script>
<script src="js/ColVis.min.js"></script>

/*--- File Manager ---*/
<script src="js/elfinder/elfinder.min.js"></script>

/*--- Selectbox ---*/
<script src="js/chosen.jquery.js"></script>

/*--- Sexy Checkbox, Radio, file input ---*/
<script src="js/uniform.jquery.js"></script>

/*--- Tags Input ---*/
<script src="js/jquery.tagsinput.js"></script>

/*--- Color Box ---*/
<script src="js/jquery.colorbox-min.js"></script>

/*--- Check All ---*/
<script src="js/check-all.jquery.js"></script>

/*--- Input Mask ---*/
<script src="js/inputmask.jquery.js"></script>

/*--- Multiple file upload ---*/
<script src="js/plupload.full.js"></script>
<script src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
<script src="js/plupupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>

/*--- jQplot Chart ---*/
<script src="js/excanvas.min.js"></script>
<script src="js/jquery.jqplot.min.js"></script>
<script src="js/chart/jqplot.highlighter.min.js"></script>
<script src="js/chart/jqplot.cursor.min.js"></script>
<script src="js/chart/jqplot.barRenderer.min.js"></script>
<script src="js/chart/jqplot.pointLabels.min.js"></script>
<script src="js/chart/jqplot.dateAxisRenderer.min.js"></script>
<script src="js/chart/jqplot.pieRenderer.min.js"></script>
<script src="js/chart/jqplot.donutRenderer.min.js"></script>
<script src="js/chart/jqplot.categoryAxisRenderer.min.js"></script>
<script src="js/chart/jqplot.logAxisRenderer.min.js"></script>
<script src="js/chart/jqplot.canvasTextRenderer.min.js"></script>
<script src="js/chart/jqplot.canvasAxisTickRenderer.min.js"></script>

/*--- All Custom functions related on plugins ---*/
<script src="js/custom-script.js"></script>

<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

/*--- CSS3 Media Query support for IE less than 9 ---*/
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

/*--- Jquery IOS orientation change zoom fix ---*/
<script src="js/ios-orientationchange-fix.js"></script>
        
Form Elements

For left label form use<form class="form-horizontal well">. Here form-horizontal define left label form and well define light gray background with rounded corner border.

In addition to freeform text, any HTML5 text-based input appears like so.

Some value here

Note: Labels surround all the options for much larger click areas and a more usable form.

<div class="form-actions">

Markup

Overall template I followed same markup structure for forms

<div class="nonboxy-widget">
  <div class="widget-head">
    <h5><i class="icon-list"></i> Form Elements</h5>
  </div>
  <div class="widget-content">
    <div class="widget-box">
      <form class="form-horizontal well">
        <fieldset>
          <div class="control-group">
            <label class="control-label" for="input01">Text input</label>
            <div class="controls">
              <input type="text" class="input-xlarge text-tip" id="input01" title="first tooltip">
              <p class="help-block"> In addition to freeform text, any HTML5 text-based input appears like so. </p>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-info">Save changes</button>
            <button class="btn btn-warning">Cancel</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>
         
Left Label Uppercase

<form class="form-horizontal well ucase">

In addition to freeform text, any HTML5 text-based input appears like so.

Top Label

<form class="well">

Top Label Uppercase

<form class="well ucase">

Inline Form

<form class="well form-inline">

Multifiled Extend
Contact Form

Note: Labels surround all the options for much larger click areas and a more usable form.

RemoveAdd

Markup

      <div class="nonboxy-widget">
  <div class="widget-head">
    <h5><i class="icon-list"></i> Multifiled Extend</h5>
  </div>
  <div class="widget-content">
    <div class="widget-box">
      <form class=" form-horizontal well ucase">
        <fieldset>
          <legend>Contact Form</legend>
          <fieldset id="address-form">
            <!-- All extendable elements here-->
          </fieldset>
        </fieldset>
        <!-- Extendable Add Remove here-->
        <span class="extend-bar"><a id="minus2" href="#" class="remove-element" title="Remove">Remove</a><a id="plus2" href="#" class="add-element" title="Add">Add</a></span>
        <div class="form-actions">
          <button type="submit" class="btn btn-info">Save changes</button>
          <button class="btn btn-warning">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>
      

Dependent Files

/*--- Extendable Form ---*/
<script src="js/jquery-dynamic-form.js"></script>

Custom Script custom-script.js

    $("#address").dynamicForm("#plus1", "#minus1", {
        limit: 5
    });
    $("#address-form").dynamicForm("#plus2", "#minus2", {
        limit: 5
    });
      
Horizonral Stepy Wizard

Use <div id="horizontal-wizard" class="content-wizard"> for horizontal wizard and use <div id="vertical-wizard" class="content-wizard"> for vertical.

Step 1 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Step 2 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Step 3 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Step 4 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markup

<div id="horizontal-wizard" class="content-wizard">
    <ul class="clearfix">
        <li><a href="#step-1"><span class="stepNumber">1</span><span class="stepDesc"> Step 1 <small>Fill your account details</small></span></a></li>
        <li><a href="#step-2"><span class="stepNumber">2</span><span class="stepDesc"> Step 2 <small>Fill your account details</small></span></a></li>
        <li><a href="#step-3"><span class="stepNumber">3</span><span class="stepDesc"> Step 3 <small>Fill your account details</small></span></a></li>
        <li><a href="#step-4"><span class="stepNumber">4</span><span class="stepDesc"> Step 4 <small>Fill your account details</small></span></a></li>
    </ul>
    <div id="step-1">
        <h2 class="StepTitle">Step 1 Content</h2>
    </div>
    <div id="step-2">
        <h2 class="StepTitle">Step 2 Content</h2>
    </div>
    <div id="step-3">
        <h2 class="StepTitle">Step 3 Content</h2>
    </div>
    <div id="step-4">
        <h2 class="StepTitle">Step 4 Content</h2>
    </div>
</div>        

Dependent Files

/*--- Stepy Wizard ---*/
<script src="js/smart-wizard.jquery.js"></script>

Custom Script custom-script.js


$(function () {

    // Smart Wizard 	
    $('#horizontal-wizard').smartWizard({
        enableFinishButton: false,
        onFinish: onFinishCallback
    });

    function onFinishCallback() {
        $('#horizontal-wizard').smartWizard('showMessage', 'Finish Clicked');
        //alert('Finish Clicked');
    }
    $('#vertical-wizard').smartWizard();



});      

Dependent Files

/*--- Form Validation ---*/
<script src="js/vaidation.jquery.js"></script>

Custom Script custom-script.js


$(function () {
    // validate signup form on keyup and submit
    var validator = $("#signupform").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2,
                remote: "users.php"
            },
            password: {
                required: true,
                minlength: 5
            },
            password_confirm: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true,
                remote: "emails.php"
            },
            dateformat: "required",
            terms: "required"
        },
        messages: {
            firstname: "Enter your firstname",
            lastname: "Enter your lastname",
            username: {
                required: "Enter a username",
                minlength: jQuery.format("Enter at least {0} characters"),
                remote: jQuery.format("{0} is already in use")
            },
            password: {
                required: "Provide a password",
                rangelength: jQuery.format("Enter at least {0} characters")
            },
            password_confirm: {
                required: "Repeat your password",
                minlength: jQuery.format("Enter at least {0} characters"),
                equalTo: "Enter the same password as above"
            },
            email: {
                required: "Please enter a valid email address",
                minlength: "Please enter a valid email address",
                remote: jQuery.format("{0} is already in use")
            }
        },

        // set this class to error-labels to indicate valid fields
        success: function (label) {
            // set   as text for IE
            label.html(" ").addClass("checked");
        }
    });      

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Lead body copy

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Using emphasis

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Note: Feel free to use <b> and <i> in HTML5, but their usage has changed a bit. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Example addresses

Here are two examples of how the <address> tag can be used:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@gmail.com

Example abbreviations

Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.

Add the initialism class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.

HTML is the best thing since sliced bread.

An abbreviation of the word attribute is attr.

Code

To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Include an optional <small> element to cite your source and you'll get an em dash &mdash; before it for styling purposes.

 <pre class="prettyprint linenums">
 /*--html, css, php, js Code Here--*/
 </pre>
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
  <small>Someone famous</small>
</blockquote>

Default blockquotes are styled as such:

<blockquote></blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

To float your blockquote to the right, add class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Dropcap

L <span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus elit in tortor rhoncus blandit. Nunc aliquet urna lorem, eu tempor risus. Donec felis urna, tempus elementum ultrices a, convallis ut mauris. In hac habitasse platea dictumst. In non quam id lectus blandit rutrum. Mauris venenatis dignissim felis, sed blandit magna egestas et. Sed in eleifend lorem. Maecenas sollicitudin ultrices orci, at sodales metus egestas rutrum. Proin tempus pretium lacus et consequat. Nulla ultricies viverra est eu mattis. Cras eu enim ante. Cras non sem eget risus congue gravida et vitae orci. Nam dapibus mi sed sem tempus gravida. Pellentesque fermentum augue imperdiet nunc elementum vel hendrerit elit vestibulum. Vivamus et tellus orci, id condimentum arcu. Nam turpis lorem, luctus eget ultrices ut, tristique vel nulla.

P<span class="dropcapM">L</span>ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc enim orci, fringilla auctor pellentesque ut, consequat non mauris. Nunc vitae arcu sed dui venenatis tincidunt. Cras eu enim ante. Cras non sem eget risus congue gravida et vitae orci. Nam dapibus mi sed sem tempus gravida. Pellentesque fermentum augue imperdiet nunc elementum vel hendrerit elit vestibulum. Vivamus et tellus orci, id condimentum arcu. Nam turpis lorem, luctus eget ultrices ut, tristique vel nulla.

N <span class="dropcapB">L</span>am porta faucibus risus ac vehicula. Suspendisse potenti. Ut volutpat eros ac urna venenatis dapibus. Nam at laoreet justo. Donec quis faucibus mauris. Proin eros eros, adipiscing eget viverra vel, bibendum et felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eleifend laoreet orci in fringilla. Curabitur vel euismod lacus. Morbi quis sem et magna sagittis pulvinar. Fusce vel odio et purus convallis pulvinar vitae et metus. Curabitur nec mi ut magna malesuada vehicula eget et justo. Duis rutrum, diam vitae tempus venenatis, mauris lacus auctor libero, at cursus quam velit eu eros. In scelerisque purus ut sem dignissim convallis. Ut cursus eleifend magna, a interdum neque euismod adipiscing. Nam commodo mollis nibh, a suscipit justo fermentum nec. Maecenas nisi odio, lobortis at pretium feugiat, ornare sed augue. Phasellus velit massa, blandit a laoreet at, consectetur quis augue.

S <span class="dropcapC">L</span>uspendisse potenti. Vestibulum egestas ante condimentum libero tristique facilisis. Donec facilisis volutpat ornare. Nulla facilisi. Nulla ut mauris neque, vel dignissim justo. Nullam faucibus mauris in quam facilisis ut lacinia augue imperdiet. Praesent faucibus nisi bibendum nibh pellentesque porttitor. Donec viverra hendrerit augue, et iaculis lorem pharetra ut.

P <span class="dropcapG">L</span>roin eget diam est, at lobortis ante. Fusce condimentum massa congue mauris tincidunt suscipit. Maecenas nulla lectus, euismod et sagittis sed, sodales ut odio. Sed non tortor ut massa consequat interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sem dolor, venenatis nec faucibus in, aliquam eu quam. Nulla ut justo vehicula mi tincidunt tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at velit odio, quis auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum, mi vel consectetur elementum, lectus lorem vulputate massa, non convallis erat purus id ligula. Vivamus suscipit lobortis leo, quis ultrices metus blandit nec. Maecenas eleifend lacinia lectus. Suspendisse interdum elit quis purus feugiat id congue augue congue.

U <span class="dropcapL">L</span>t mi justo, lacinia ac porta sed, ullamcorper vitae felis. Fusce ornare aliquam velit ut ornare. Praesent sit amet enim in enim gravida sagittis. Donec placerat metus at libero consequat semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eleifend laoreet orci in fringilla. Curabitur vel euismod lacus. Morbi quis sem et magna sagittis pulvinar. Fusce vel odio et purus convallis pulvinar vitae et metus. Curabitur nec mi ut magna malesuada vehicula eget et justo. Duis rutrum, diam vitae tempus venenatis, mauris lacus auctor libero, at cursus quam velit eu eros. In scelerisque purus ut sem dignissim convallis. Ut cursus eleifend magna, a interdum neque euismod adipiscing. Nam commodo mollis nibh, a suscipit justo fermentum nec. Maecenas nisi odio, lobortis at pretium feugiat, ornare sed augue. Phasellus velit massa, blandit a laoreet at

Unorder List

<ul class="tick_icn">
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul class="alarm_icn">
  • Quisque laoreet risus eget lorem vehicula in egestas purus fermentum.
<ul class="award_icn">
  • Aliquam a ligula eget velit semper porta at in risus.
<ul class="help_icn">
  • Cras non enim sed mauris malesuada tincidunt eget nec enim.
<ul class="clip_icn">
  • Suspendisse blandit imperdiet arcu, et ullamcorper lectus lacinia eu.
<ul class="flag_icn">
  • Nullam non erat tellus, eget dapibus velit.
<ul class="folder_icn">
  • Maecenas id purus lectus, eget fermentum ipsum.
<ul class="globe_icn">
  • Nam tristique arcu vitae massa scelerisque id euismod ligula ullamcorper.
<ul class="heart_icn">
  • Aenean a tortor nisl, ac feugiat quam.
<ul class="info_icn">
  • Sed congue lacus vel risus mollis nec eleifend sapien consequat.
<ul class="medal_icn">
  • Vivamus porttitor sapien eleifend mauris condimentum non semper leo vestibulum.
<ul class="pin_icn">
  • Donec ac tortor quis nibh rhoncus ultricies.
<ul class="plus_icn">
  • Vestibulum sollicitudin velit quis libero adipiscing ut aliquet eros dictum.
<ul class="trophy_icn">
  • Suspendisse blandit imperdiet arcu, et ullamcorper lectus lacinia eu.

Order List

<ol class="decimal_order">
  1. Aenean a tortor nisl, ac feugiat quam.
  2. Etiam laoreet lectus sit amet leo ullamcorper sit amet semper sem tempus.
  3. Praesent sodales ipsum sed justo tristique in sollicitudin lacus malesuada.
<ol class="upper_roman">
  1. Pellentesque tempus varius odio, sit amet bibendum lacus interdum sit amet.
  2. Curabitur semper elit sit amet eros consequat volutpat.
  3. Mauris scelerisque elit eu sem pulvinar sed sodales dolor porttitor.
<ol class="lower_roman">
  1. Sed sit amet lacus mauris, et facilisis augue.
  2. Donec volutpat augue non ligula facilisis elementum.
  3. Proin eget dui pretium dui iaculis scelerisque quis non arcu.
  4. Nam eget libero a lectus adipiscing elementum quis a felis.
  5. Curabitur at ligula molestie enim ornare ornare a a diam.
<ol class="lower_alpha">
  1. Integer sed erat non libero porttitor venenatis.
  2. Nunc nec mi non mauris elementum tincidunt eget quis felis.
  3. Cras pretium nibh vel ipsum fermentum dictum.
  4. Fusce ut mi lorem, id lobortis odio.
<ol class="upper_alpha">
  1. Sed blandit elit ac tortor convallis cursus.
  2. Duis pretium sem a nunc scelerisque tincidunt ut euismod sapien.
  3. Nulla non mauris vitae est commodo mattis in a felis.
  4. Vestibulum sed enim ac nibh molestie adipiscing.

Horizontal description

<dl class="dl-horizontal">

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<blockquote> </blockquote>

Cras erat diam, consequat quis tincidunt nec, eleifend a turpis. Aliquam ultrices feugiat metus, ut imperdiet erat mollis at. Curabitur mattis risus sagittis nibh lobortis vel.

<blockquote class="quote_blue">

Cras erat diam, consequat quis tincidunt nec, eleifend a turpis. Aliquam ultrices feugiat metus, ut imperdiet erat mollis at. Curabitur mattis risus sagittis nibh lobortis vel.

<blockquote class="quote_orange">

Cras erat diam, consequat quis tincidunt nec, eleifend a turpis. Aliquam ultrices feugiat metus, ut imperdiet erat mollis at. Curabitur mattis risus sagittis nibh lobortis vel.

<blockquote class="quote_pink">

Cras erat diam, consequat quis tincidunt nec, eleifend a turpis. Aliquam ultrices feugiat metus, ut imperdiet erat mollis at. Curabitur mattis risus sagittis nibh lobortis vel.

This template I made some nice widgets and all widget html structure are same. You can use easily boxy and non boxy both widgets. In previous widget section I already given widgets html structure. Here have some special widgets those details are bellow:

Calendar Widget Dependent Files

/*--- Calendar ---*/
<link href="css/fullcalendar.css" rel="stylesheet">
<script src="js/fullcalendar.js"></script>

Custom Script Used internal script in the html page


$(function() {
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		$('#calendar-widget').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			buttonText: {
			prev: 'Prev',
			next: 'Next',
			today: 'Today',
			month: 'Month',
			week: 'Week',
			day: 'Day'
		},
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d-3, 16, 0),
					allDay: false
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+4, 16, 0),
					allDay: false
				},
				{
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false
				},
				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+1, 22, 30),
					allDay: false
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://google.com/'
				}
			]
		});
	});      

Multiple Files Upload Dependent Files

/*--- Multiple file upload ---*/
<link href="js/plupupload/jquery.plupload.queue/css/jquery.plupload.queue.css" rel="stylesheet">
<script src="js/plupload.full.js"></script>
<script src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
<script src="js/plupupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>

Custom Script custom-script.js



$(function() {
	$("#uploader").pluploadQueue({
		// General settings
		runtimes : 'gears,flash,silverlight,browserplus,html5',
		url : 'upload.php',
		max_file_size : '10mb',
		chunk_size : '1mb',
		unique_names : true,
		// Resize images on clientside if we can
		resize : {width : 320, height : 240, quality : 90},
		// Specify what files to browse for
		filters : [
			{title : "Image files", extensions : "jpg,gif,png"},
			{title : "Zip files", extensions : "zip"}
		],
		// Flash settings
		flash_swf_url : 'js/plupupload/plupload.flash.swf',
		// Silverlight settings
		silverlight_xap_url : 'js/plupupload/plupload.silverlight.xap'
	});
	// Client side form validation
	$('.upload-form').submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();
        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('upload-form')[0].submit();
                }

            });
            uploader.start();
        } else {
            alert('You must queue at least one file.');
        }
        return false;
    });
});      

Accordion Dependent Files

/*--- Accordion ---*/
<script src="js/accordion.jquery.js"></script>

Custom Script custom-script.js

    /*===================
	LIST-ACCORDION
	===================*/	  

	$('#list-accordion').accordion({
		header: ".title",
		autoheight: false
	});
     

jQuery Raty Dependent Files

/*--- Accordion ---*/
<script src="js/accordion.jquery.js"></script>

Custom Script custom-script.js

    /*===================
	LIST-ACCORDION
	===================*/	  

	$('#list-accordion').accordion({
		header: ".title",
		autoheight: false
	});
     

Fluid columns

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Percents, not pixels

The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

Fluid rows

Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.

Markup

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Fluid nesting

Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.

Fluid 12
Fluid 6
Fluid 6
<div class="row-fluid">
  <div class="span12">
    Level 1 of column
    <div class="row-fluid">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>
Buttons

btn

btn btn-primary

btn btn-info

btn btn-success

btn btn-warning

btn btn-dange

btn btn-inverse

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link
<a class="btn" href="">Link</a>
<button class="btn" type="submit">
  Button
</button>
<input class="btn" type="button"
         value="Input">
<input class="btn" type="submit"
         value="Submit">

As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Multiple Size

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.


Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

Primary link Link

Toolbars & Buttons

Refresh Checkout Delete

Comment Settings More Info



  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

<i class="icon-search icon-white"></i>

There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Progress Bar
20%
40%
60%
80%
100%
<div class="progress">
<span style="width: 20%;"><span>20%</span></span>
</div>

To chnage progress bar color just add a class <span style="width: 20%;"><span>20%</span></span> here. You can use class="green" class="orange" class="red" class="blue"

Date picker & Color Picker

Colorpicker and Datepicker both are depend on bootstrap.js

Custom Script custom-script.js

/*==Color Picker==*/
$('.colorpicker').colorpicker();
/*==Date Picker==*/
$('#datepicker').datepicker();
                
Notifications

Alert

Success

Information

Error

Confirm

Depnedent Files

/*--- Notification ---*/
<script src="js/jquery.noty.js"></script>
              

Custom Script custom-script.js


/*==============================
	  NOTY TOP
================================*/
	
	$('.alert_t').click(function() {
		
		var noty_id = noty({
			layout : 'top',
			text: 'noty - a jquery notification library!',
			modal : true,
			type:'alert',
			
			 });
		  });

	$('.error_t').click(function() {
		
		var noty_id = noty({
			layout : 'top',
			text: 'noty - a jquery notification library!',
			modal : true,
			type : 'error', 
			 });
		  });
		  
	$('.success_t').click(function() {
		
		var noty_id = noty({
			layout : 'top',
			text: 'noty - a jquery notification library!',
			modal : true,
			type : 'success', 
			 });
		  });
		  
	$('.info_t').click(function() {
		
		var noty_id = noty({
			layout : 'top',
			text: 'noty - a jquery notification library!',
			modal : true,
			type : 'information', 
			 });
		  });
	
	$('.confirm_t').click(function() {
		
		var noty_id = noty({
			layout : 'top',
			text: 'noty - a jquery notification library!',
			modal : true,
			buttons: [
				{type: 'btn btn-success', text: 'Ok', click: function($noty) {
		  
					// this = button element
					// $noty = $noty element
		  
					$noty.close();
					noty({force: true, text: 'You clicked "Ok" button', type: 'success'});
				  }
				},
				{type: 'button btn btn-warning', text: 'Cancel', click: function($noty) {
					$noty.close();
					noty({force: true, text: 'You clicked "Cancel" button', type: 'error'});
				  }
				}
				],
			 type : 'success', 
			 });
		 
});                
Additional Progressbar
<div class="progress">
<div class="progress progress-success">
<div class="progress progress-warning">
<div class="progress progress-danger">
<div class="progress progress-striped"> No IE Support
<div class="progress progress-striped active"> No IE Support
Alerts
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-error fade in">
  ...
</div>
Holy guacamole! Best check yo self, you're not looking too good.
<div class="alert alert fade in">
  ...
</div>
Well done! You successfully read this important alert message.
<div class="alert alert-success fade in">
  ...
</div>
Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info fade in">
  ...
</div>

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

<div class="alert alert-block alert-error fade in">
  ...
</div>
Modal
Launch Modal

Markup

You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal.

Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>
Heads up! If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action) and include bootstrap-transition.js.

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

$('#myModal').modal({
  keyboard: false
})
popover
hover for popover
<a id="popover" data-content="And here's some amazing content. It's very engaging. right?" rel="popover" class="btn btn-danger" href="#" data-original-title="A Title">hover for popover</a>

Enable popovers via javascript:

$('#example').popover(options)
Breadcrumbs

Markup

<ul class="breadcrumb">
    <li> <a href="#">Home</a> <span class="divider">/</span> </li>
    <li> <a href="#">Library</a> <span class="divider">/</span> </li>
    <li class="active">Data</li>
</ul>
 
Label
Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>
Badge
Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>
Tooltip

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Trigger the tooltip via javascript:

$('#example').tooltip(options)

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
Paginations
Cntered Paginations

Markup

Wrapped in a <div>, pagination is just a <ul>.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active">
      <a href="#">1</a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

To make center pagination use <div class="pagination pagination-centered">

Pager
<ul class="pager">
  <li>
    <a href="#">Previous</a>
  </li>
  <li>
    <a href="#">Next</a>
  </li>
</ul>
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</div>
Here I used a nice dynamic table plugin name data table. I included some table you can easily customize that.

Dependent files

/*--- Data Table ---*/
<script src="js/data-table.jquery.js"></script>
<script src="js/TableTools.min.js"></script>
<script src="js/ColVis.min.js"></script>
    
Data Table
OrderDate Region Rep Item Units Unit Cost Total
1/6/10 Quebec Jones Pencil 95 1.99 189.05
1/23/10 Ontario Kivell Binder 50 19.99 999.50

Markup

<table class="data-tbl-simple table table-bordered">
  <thead>
    <tr>
      <th>---</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>----</td>
    </tr>
  </tbody>
</table>

Custom Script custom-script.js

$(function () {
    $('.data-tbl-simple').dataTable({
        "sPaginationType": "full_numbers",
        "iDisplayLength": 10,
        "oLanguage": {
            "sLengthMenu": "<span class='lenghtMenu'> _MENU_</span><span class='lengthLabel'>Entries per page:</span>",
        },
        "sDom": '<"table_top clearfix"fl<"clear">>,<"table_content"t>,<"table_bottom"p<"clear">>'

    });
    $("div.table_top select").addClass('tbl_length');
/*$(".tbl_length").chosen({
        disable_search_threshold: 4    
    });
        */

});
                    
OrderDate Region Rep Item Units Unit Cost Total
1/6/10 Quebec Jones Pencil 95 1.99 189.05
1/23/10 Ontario Kivell Binder 50 19.99 999.50

Markup

<table class="data-tbl-boxy table">
  <thead>
    <tr>
      <th>---</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>----</td>
    </tr>
  </tbody>
</table>

Custom Script custom-script.js

$(function () {
    $('.data-tbl-boxy').dataTable({
        "sPaginationType": "full_numbers",
        "iDisplayLength": 10,
        "oLanguage": {
            "sLengthMenu": "<span class='lenghtMenu'> _MENU_</span><span class='lengthLabel'>Entries per page:</span>",
        },
        "sDom": '<"tbl-searchbox clearfix"fl<"clear">>,<"table_content"t>,<"widget-bottom"p<"clear">>'

    });
    $("div.tbl-searchbox select").addClass('tbl_length');
/*$(".tbl_length").chosen({
        disable_search_threshold: 4    
    });
        */

});
                    
Exportable Data Table
OrderDate Region Rep Item Units Unit Cost Total
1/6/10 Quebec Jones Pencil 95 1.99 189.05
1/23/10 Ontario Kivell Binder 50 19.99 999.50

Markup

<table class="data-tbl-tools table">
  <thead>
    <tr>
      <th>---</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>----</td>
    </tr>
  </tbody>
</table>

Custom Script custom-script.js

$(function () {

    $('.data-tbl-tools').dataTable({
        "sPaginationType": "full_numbers",
        "iDisplayLength": 10,
        "oLanguage": {
            "sLengthMenu": "<span class='lenghtMenu'> _MENU_</span><span class='lengthLabel'>Entries per page:</span>",
        },
        "sDom": '<"tbl-tools-searchbox"fl<"clear">>,<"tbl_tools"CT<"clear">>,<"table_content"t>,<"widget-bottom"p<"clear">>',

        "oTableTools": {
            "sSwfPath": "swf/copy_cvs_xls_pdf.swf"
        }
    });
    $("div.tbl-tools-searchbox select").addClass('tbl_length');
/* $(".tbl_length").chosen({
        disable_search_threshold: 4
    });*/
});              

Dependent files

<link href="css/jquery.jqplot.css" rel="stylesheet">
/*--- Chart And Graph ---*/
<script src="js/excanvas.min.js"></script>
<script src="js/jquery.jqplot.min.js"></script>
<script src="js/chart/jqplot.highlighter.min.js"></script>
<script src="js/chart/jqplot.cursor.min.js"></script>
<script src="js/chart/jqplot.barRenderer.min.js"></script>
<script src="js/chart/jqplot.pointLabels.min.js"></script>
<script src="js/chart/jqplot.dateAxisRenderer.min.js"></script>
<script src="js/chart/jqplot.pieRenderer.min.js"></script>
<script src="js/chart/jqplot.donutRenderer.min.js"></script>
<script src="js/chart/jqplot.categoryAxisRenderer.min.js"></script>
<script src="js/chart/jqplot.logAxisRenderer.min.js"></script>
<script src="js/chart/jqplot.canvasTextRenderer.min.js"></script>
<script src="js/chart/jqplot.canvasAxisTickRenderer.min.js"></script>    

Custom Script

Include all custom script in internal script of the file.

$(function () {
    var s1 = [[2002, 112000], [2003, 122000], [2004, 104000], [2005, 99000], [2006, 121000],
    [2007, 148000], [2008, 114000], [2009, 133000], [2010, 161000], [2011, 173000]];
    var s2 = [[2002, 10200], [2003, 10800], [2004, 11200], [2005, 11800], [2006, 12400],
    [2007, 12800], [2008, 13200], [2009, 12600], [2010, 13100]];
 
    plot1 = $.jqplot("chart2", [s2, s1], {
        // Turns on animatino for all series in this plot.
        animate: true,
        // Will animate plot on calls to plot1.replot({resetAxes:true})
        animateReplot: true,
        cursor: {
            show: true,
            zoom: false,
            looseZoom: true,
            showTooltip: false
        },
        series:[
            {
                pointLabels: {
                    show: true
                },
                renderer: $.jqplot.BarRenderer,
                showHighlight: false,
                yaxis: 'y2axis',
                rendererOptions: {
                    // Speed up the animation a little bit.
                    // This is a number of milliseconds.
                    // Default for bar series is 3000.
                    animation: {
                    speed: 2500
                    },
                    barWidth: 15,
                    barPadding: -15,
                    barMargin: 0,
                    highlightMouseOver: false
                }
            },
            {
                rendererOptions: {
                    // speed up the animation a little bit.
                    // This is a number of milliseconds.
                    // Default for a line series is 2500.
                    animation: {
                        speed: 2000
                    }
                }
            }
        ],
        axesDefaults: {
            pad: 0
        },
        axes: {
            // These options will set up the x axis like a category axis.
            xaxis: {
                tickInterval: 1,
                drawMajorGridlines: false,
                drawMinorGridlines: true,
                drawMajorTickMarks: false,
                rendererOptions: {
                tickInset: 0.5,
                minorTicks: 1
            }
            },
            yaxis: {
                tickOptions: {
                    formatString: "$%'d"
                },
                rendererOptions: {
                    forceTickAt0: true
                }
            },
            y2axis: {
                tickOptions: {
                    formatString: "$%'d"
                },
                rendererOptions: {
                    // align the ticks on the y2 axis with the y axis.
                    alignTicks: true,
                    forceTickAt0: true
                }
            }
        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 7.5 , tooltipLocation : 'ne'
        }
    });
   
});

$(function(){
  var data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  var plot1 = jQuery.jqplot ('chart3', [data],
    {
      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true
        }
      },
      legend: { show:true, location: 'e' }
    }
  );
});

$(function(){
  plot2 = jQuery.jqplot('chart4',
    [[['Verwerkende industrie', 9],['Retail', 0], ['Primaire producent', 0],
    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 3], ['Bewerkende industrie', 2]]],
    {
      title: ' ',
      seriesDefaults: {
        shadow: false,
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
          startAngle: 180,
          sliceMargin: 4,
          showDataLabels: true }
      },
      legend: { show:true, location: 'w' }
    }
  );
});

$(function(){
    var s1 = [200, 600, 700, 1000];
    var s2 = [460, -210, 690, 820];
    var s3 = [-260, -440, 320, 200];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = ['May', 'June', 'July', 'August'];
     
    var plot1 = $.jqplot('chart5', [s1, s2, s3], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true}
        },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Hotel'},
            {label:'Event Regristration'},
            {label:'Airfare'}
        ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '$%d'}
            }
        }
    });
});

$(function () {
    $.jqplot._noToImageButton = true;
    var prevYear = [["2011-08-01",398], ["2011-08-02",255.25], ["2011-08-03",263.9], ["2011-08-04",154.24],
    ["2011-08-05",210.18], ["2011-08-06",109.73], ["2011-08-07",166.91], ["2011-08-08",330.27], ["2011-08-09",546.6],
    ["2011-08-10",260.5], ["2011-08-11",330.34], ["2011-08-12",464.32], ["2011-08-13",432.13], ["2011-08-14",197.78],
    ["2011-08-15",311.93], ["2011-08-16",650.02], ["2011-08-17",486.13], ["2011-08-18",330.99], ["2011-08-19",504.33],
    ["2011-08-20",773.12], ["2011-08-21",296.5], ["2011-08-22",280.13], ["2011-08-23",428.9], ["2011-08-24",469.75],
    ["2011-08-25",628.07], ["2011-08-26",516.5], ["2011-08-27",405.81], ["2011-08-28",367.5], ["2011-08-29",492.68],
    ["2011-08-30",700.79], ["2011-08-31",588.5], ["2011-09-01",511.83], ["2011-09-02",721.15], ["2011-09-03",649.62],
    ["2011-09-04",653.14], ["2011-09-06",900.31], ["2011-09-07",803.59], ["2011-09-08",851.19], ["2011-09-09",2059.24],
    ["2011-09-10",994.05], ["2011-09-11",742.95], ["2011-09-12",1340.98], ["2011-09-13",839.78], ["2011-09-14",1769.21],
    ["2011-09-15",1559.01], ["2011-09-16",2099.49], ["2011-09-17",1510.22], ["2011-09-18",1691.72],
    ["2011-09-19",1074.45], ["2011-09-20",1529.41], ["2011-09-21",1876.44], ["2011-09-22",1986.02],
    ["2011-09-23",1461.91], ["2011-09-24",1460.3], ["2011-09-25",1392.96], ["2011-09-26",2164.85],
    ["2011-09-27",1746.86], ["2011-09-28",2220.28], ["2011-09-29",2617.91], ["2011-09-30",3236.63]];
 
    var currYear = [["2011-08-01",796.01], ["2011-08-02",510.5], ["2011-08-03",527.8], ["2011-08-04",308.48],
    ["2011-08-05",420.36], ["2011-08-06",219.47], ["2011-08-07",333.82], ["2011-08-08",660.55], ["2011-08-09",1093.19],
    ["2011-08-10",521], ["2011-08-11",660.68], ["2011-08-12",928.65], ["2011-08-13",864.26], ["2011-08-14",395.55],
    ["2011-08-15",623.86], ["2011-08-16",1300.05], ["2011-08-17",972.25], ["2011-08-18",661.98], ["2011-08-19",1008.67],
    ["2011-08-20",1546.23], ["2011-08-21",593], ["2011-08-22",560.25], ["2011-08-23",857.8], ["2011-08-24",939.5],
    ["2011-08-25",1256.14], ["2011-08-26",1033.01], ["2011-08-27",811.63], ["2011-08-28",735.01], ["2011-08-29",985.35],
    ["2011-08-30",1401.58], ["2011-08-31",1177], ["2011-09-01",1023.66], ["2011-09-02",1442.31], ["2011-09-03",1299.24],
    ["2011-09-04",1306.29], ["2011-09-06",1800.62], ["2011-09-07",1607.18], ["2011-09-08",1702.38],
    ["2011-09-09",4118.48], ["2011-09-10",1988.11], ["2011-09-11",1485.89], ["2011-09-12",2681.97],
    ["2011-09-13",1679.56], ["2011-09-14",3538.43], ["2011-09-15",3118.01], ["2011-09-16",4198.97],
    ["2011-09-17",3020.44], ["2011-09-18",3383.45], ["2011-09-19",2148.91], ["2011-09-20",3058.82],
    ["2011-09-21",3752.88], ["2011-09-22",3972.03], ["2011-09-23",2923.82], ["2011-09-24",2920.59],
    ["2011-09-25",2785.93], ["2011-09-26",4329.7], ["2011-09-27",3493.72], ["2011-09-28",4440.55],
    ["2011-09-29",5235.81], ["2011-09-30",6473.25]];
 
    var plot1 = $.jqplot("chart6", [prevYear, currYear], {
        seriesColors: ["#6a8c9b", "#d44703"],
        title: 'Monthly TurnKey Revenue',
        highlighter: {
            show: true,
            sizeAdjust: 1,
            tooltipOffset: 9
        },
        grid: {
            background: '#fff',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#666666',
            gridLineWidth: 1
        },
        legend: {
            show: true,
            placement: 'outside'
        },
        seriesDefaults: {
            rendererOptions: {
                smooth: true,
                animation: {
                    show: true
                }
            },
         
            markerOptions: {
            show: true,             // wether to show data point markers.
            style: 'filledCircle',  // circle, diamond, square, filledCircle.
                                    // filledDiamond or filledSquare.
            lineWidth: 2,       // width of the stroke drawing the marker.
            size: 10,            // size (diameter, edge length, etc.) of the marker.
            color: '#ff8a00',    // color of marker, set to color of line by default.
            shadow: true,       // wether to draw shadow on marker or not.
            shadowAngle: 45,    // angle of the shadow.  Clockwise from x axis.
            shadowOffset: 1,    // offset from the line of the shadow,
            shadowDepth: 3,     // Number of strokes to make when drawing shadow.  Each stroke
                                // offset by shadowOffset from the last.
            shadowAlpha: 0.07   // Opacity of the shadow
        }
        },
        series: [
            {
                fill: true,
                label: '2010'
            },
            {
                label: '2011'
            }
        ],
        axesDefaults: {
            rendererOptions: {

                baselineWidth: 1.5,
                baselineColor: '#444444',
                drawBaseline: false
            }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    formatString: "%b %e",
                    angle: -30,
                    textColor: '#dddddd'
                },
                min: "2011-08-01",
                max: "2011-09-30",
                tickInterval: "7 days",
                drawMajorGridlines: false
            },
            yaxis: {
                renderer: $.jqplot.LogAxisRenderer,
                pad: 0,
                rendererOptions: {
                    minorTicks: 1
                },
                tickOptions: {
                    formatString: "$%'d",
                    showMark: false
                }
            }
        }
    });
 
    
});

Dependent files

<link href="css/elfinder.min.css" rel="stylesheet">
<link href="css/elfinder.theme.css" rel="stylesheet">
/*--- Elfinder ---*/
<script src="js/elfinder/elfinder.min.js"></script>

Custom Script custom-script.js


$(function () {
    var elf = $('#file-manager').elfinder({
        url: 'php/connector.php' // connector URL (REQUIRED)
        // lang: 'ru',             // language (OPTIONAL)
    }).elfinder('instance');
});

Dependent files

<script src="js/jquery.colorbox-min.js"></script>

Custom Script custom-script.js

/*colorbox*/
	$(".group1").colorbox({rel:'group1'});
	$(".portfolio a").colorbox();
	$(".group4").colorbox({rel:'group4', slideshow:true});
	$(".inline-modal").colorbox({inline:true, width:"50%"});
	$(".ajax").colorbox();
	$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
	$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

In this template I included 6 predefined pages. All Pages structure are same as like as other pages.

This template I have included 8 predefined themes and fluid and fixed both layout. Here have a nice theme switcher.

Themes

Here have 8 predefined themes. In head section here have a default theme file name:

<link id="themes" href="css/themes.css" rel="stylesheet">

When you click any theme by choosing theme switcher then relevant theme file is dynamically replacing on <link id="themes" href="css/themes.css" rel="stylesheet">here

Dependent Script custom-script.js

	$(function()
	{
		
		$('#sidebar-off').click(function()
		{
			$(this).attr('disabled','disabled');
			$(this).siblings('button').removeAttr('disabled');
			$('#sidebar').addClass('side-hide');
			$('.top-nav').addClass('full-fluid');
			$('#main-content').addClass('full-fluid');
			});
			
			$('#sidebar-on').click(function()
		{
			$(this).attr('disabled','disabled');
			$(this).siblings('button').removeAttr('disabled');
			$('#sidebar').removeClass('side-hide');
			$('.top-nav').removeClass('full-fluid');
			$('#main-content').removeClass('full-fluid');
			});
			
			$('#right-sidebar').click(function()
		{
			$(this).attr('disabled','disabled');
			$(this).siblings('button').removeAttr('disabled');
			$('#sidebar').addClass('right-sidebar');
			$('.top-nav').addClass('merge-left');
			$('#main-content').addClass('merge-left');
			
			});
			
			$('#left-sidebar').click(function()
		{
			$(this).attr('disabled','disabled');
			$(this).siblings('button').removeAttr('disabled');
			$('#sidebar').removeClass('right-sidebar');
			$('.top-nav').removeClass('merge-left');
			$('#main-content').removeClass('merge-left');
			
			});
		});
		
		$(function()
		{
			$('.theme-color').click(function()
			{
				var stylesheet = $(this).attr('title').toLowerCase();
				$('#themes').attr('href','css'+'/'+stylesheet+'.css');
				});
			});

How you add new theme?

It is very easy to make new theme here. For an example if you want to make brown theme then first make a css file name theme-brown.css and then place all classes properties and values as like as other themes css files. Make all relevant classen with brown color as your choice. After complete css file then add it in theme switcher.

How to add a theme in theme switcher

Just go to top fixed nav themes dropdown menu form here:

<div class="nav-collapse collapse">
<ul class="nav">

In nav go to <li class=" clearfix color-block"> here in dropdown menu. Here have all themes in list. Individual themes code is:

<span class="theme-color theme-blue" title="theme-blue"></span> 

Add new theme here. If your theme is theme-brown.css then add html code by following way.

<span class="theme-color theme-brown" title="theme-brown"></span> 

In above code .theme-color define height width abd .theme-brown define color thumb of theme. And title="" define theme name.

I have included following 8 predefine themes:

<link href="css/theme-default.css" rel="stylesheet">
<link href="css/theme-chrome.css" rel="stylesheet">
<link href="css/theme-blue.css" rel="stylesheet">
<link href="css/theme-gray.css" rel="stylesheet">
<link href="css/theme-light-blue.css" rel="stylesheet">
<link href="css/theme-orange.css" rel="stylesheet">
<link href="css/theme-pink.css" rel="stylesheet">
<link href="css/theme-blue.css" rel="stylesheet">

Layout

This template have fluid and fixed both layout. Both layout is responsive. You can switch layout by theme switcher. Layout switch dependent css is in styles.css. Layout switch depend on following codes:

/*===============
Theme Settings
=================*/
.color-block {
	margin-left:10px;
}
.theme-color {
	width:20px;
	height:20px;
	display:inline-block;
	float:left;
	margin-right:3px;
	margin-bottom:3px;
	cursor:pointer;
}
.theme-settings {
	margin-left:10px;
}
.theme-settings .btn-group {
	padding:0px;
}
.theme-settings label {
	margin-right:10px;
}
.side-hide {
	display:none !important;
}
.right-sidebar {
	left:auto !important;
	right:-1px !important;
	border-left:#1D1C1C 1px solid;
}
.merge-left {
	margin-right:210px !important;
	margin-left:0px !important;
}
.full-fluid {
	margin:0px !important;
}

This is very mordern template where is used CSS3. No image is used for themes and layout unless icons and background pattern. No PSD file is require for this template. Everything is depend on css. So here .psd file is not important. I included two .psd files though psd is no need here. Those two file I made only make a visual outline for my work. one is for layout and another is for error page. If you need it may help you but I think no need that at all.

Plugins

Plugins Source
jQuery Chosen http://harvesthq.github.com/chosen/
jQuery Uniform http://uniformjs.com/
Bootstrap http://twitter.github.com/bootstrap/
jQuery Noty http://needim.github.com/noty/
Tags Input http://xoxco.com/clickable/jquery-tags-input
Text Editor http://premiumsoftware.net/cleditor
Min Chart sparkline
colorBox http://www.jacklmoore.com/colorbox
iOS orientationchange https://github.com/scottjehl/iOS-Orientationchange-Fix
UI Touch Punch http://touchpunch.furf.com/
NIce Scroll http://areaaperta.com/nicescroll
css3 mediaquery.js http://code.google.com/p/css3-mediaqueries-js/
Multi Field Extender http://code.google.com/p/jquery-dynamic-form/
eLfinder http://elfinder.org/
Check All https://github.com/mjball/jQuery-CheckAll
Data Table http://datatables.net/
Full Calendar http://arshaw.com/fullcalendar/
Input Mask http://digitalbush.com/projects/masked-input-plugin/
Raty http://www.wbotelhos.com/raty/
Smart Wizard http://techlaboratory.net/products.php?product=smartwizard
Accordion http://jquery.bassistance.de/accordion/demo/
jQuery Validation http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Chart http://www.jqplot.com/
Multi File Upload http://www.plupload.com/
Few CSS inspiration http://www.webinterfacelab.com
Sliding Actions Menu http://tympanus.net/codrops/

Icons

Name Source
Iconsweets http://iconsweets.com/ by yummygum
Led Icons Led Icons by Gasyoun
glyphicons Glyphicons
pc.de http://pc.de/ico/ http://creativecommons.org/licenses/by-sa/3.0/deed.de

Images & Patterns

Name Source
Patterns http://subtlepatterns.com/