FlatLab - Bootstrap 3 Responsive Admin Template

Documentation v2.0

Overview

FlatLab is a Premium Admin Dashboard template with real flat design concept. Flat color, clean content placement, easy customization and professional coding is its core power.

FlatLab is a fully responsive admin dashboard template built with Latest Twitter Bootstrap v3.2.0 Framework, modern web technology HTML5 and CSS3. It has a huge collection of reusable UI components and integrated with latest jQuery plugins. This theme is very lightweight and easy customizable which is basically designed for the developers who want to customize it with just a finger snap . FlatLab can be used for all type of web applications like custom admin panel, project management system, admin dashboard, application backend, CMS, CRM, business website, corporate, portfolio, blog etc. A large number of widget are included here to make your work easier. FlatLab works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone device.

Template

Features

Folder Structure

FlatLab/
|-- css/
|-- js/
|-- img/
|-- fonts/
|-- assets/

HTML Structure

Page Head

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>FlatLab - Flat & Responsive Bootstrap Admin Template</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/owl.carousel.css" type="text/css">
    <!--  right slidebar -->
    <link href="css/slidebars.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>

Header

<!--header start-->
  <header class="header white-bg">
    <div class="sidebar-toggle-box">
        <div data-original-title="Toggle Navigation" data-placement="right" class="icon-reorder tooltips"></div>
    </div>
    <!--logo start-->
    <a href="#" class="logo">Flat<span>lab</span></a>
    <!--logo end-->
    <div class="nav notify-row" id="top_menu">
        <!--  notification goes here -->
    </div>
    <div class="top-nav ">
        <!--search & user info goes here-->
    </div>
</header>
<!--header end-->

Sidebar

<!--sidebar start-->
    <aside>
        <div id="sidebar"  class="nav-collapse ">
             <!-- sidebar menu goes here-->
        </div>
    </aside>
<!--sidebar end-->

Content

<!--main content start-->
  <section id="main-content">
      <section class="wrapper">
          <!--main content goes here-->
      </section>
  </section>
<!--main content end-->

End of Page

<!-- js 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>
    <script src="js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="js/jquery.sparkline.js" type="text/javascript"></script>
    <script src="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
    <script src="js/owl.carousel.js" ></script>


    <!--right slidebar-->
      <script src="js/slidebars.min.js"></script>

    <!--common script for all pages-->
    <script src="js/common-scripts.js"></script>
    <!--script for this page only-->
    <script src="js/sparkline-chart.js"></script>
    <script src="js/easy-pie-chart.js"></script>

  <script>

  </script>

  </body>
</html>

CSS Code Comment Sample

/*login page*/

.login-body {
    background-color: #f1f2f7;
}

.form-signin {
    max-width: 330px;
    margin: 100px auto 0;
    background: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

Javascript Code Comment Sample

//    sidebar dropdown menu

    jQuery('#sidebar .sub-menu > a').click(function () {
        var last = jQuery('.sub-menu.open', $('#sidebar'));
        last.removeClass("open");
        jQuery('.arrow', last).removeClass("open");
        jQuery('.sub', last).slideUp(200);
        var sub = jQuery(this).next();
        if (sub.is(":visible")) {
            jQuery('.arrow', jQuery(this)).removeClass("open");
            jQuery(this).parent().removeClass("open");
            sub.slideUp(200);
        } else {
            jQuery('.arrow', jQuery(this)).addClass("open");
            jQuery(this).parent().addClass("open");
            sub.slideDown(200);
        }
        var o = ($(this).offset());
        diff = 200 - o.top;
        if(diff>0)
            $("#sidebar").scrollTo("-="+Math.abs(diff),500);
        else
            $("#sidebar").scrollTo("+="+Math.abs(diff),500);
    });

Top Menu

Font

FlatLab uses Open Sans font from google fonts. The font imported in main css file: css/style.css 

/* Import fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,
800,800italic);

New Page

To create a new page, you can use blank.html which provides basic page layout which you can extend and modify further.

Javascript Initialization

Common javascript initialization implemented in js/common-scripts.js which is need to include in all pages. 

var Script = function () {
         //Common Script Goes Here
    }();

Reference

Below is the list of all plugins and external resources used to power this template.

Name URL
jquery-1.10.2 http://www.jquery.com
Twitter Bootstrap 3.0.2 http://getbootstrap.com/
jquery NiceScroll http://areaaperta.com/nicescroll/
jquery scrollTo https://github.com/flesler/jquery.scrollTo
Datepicker for Bootstrap http://www.eyecon.ro/bootstrap-datepicker/
Colorpicker for Bootstrap http://www.eyecon.ro/bootstrap-colorpicker/
Date Range Picker for Bootstrap https://github.com/dangrossman/bootstrap-daterangepicker
jQuery Tags Input http://xoxco.com/clickable/jquery-tags-input
CKEditor http://ckeditor.com/
jQuery Slider http://jqueryui.com/slider/
jQuery Easy Pie Chart http://rendro.github.io/easy-pie-chart/
jQuery Sparklines http://omnipotent.net/jquery.sparkline
Chartjs http://www.chartjs.org/
Morris http://www.oesmith.co.uk/morris.js/
jQuery OwlCarousel v1.21 http://www.owlgraphic.com/owlcarousel
DataTables http://www.datatables.net/blog/Twitter_Bootstrap_2
Responsive Table http://elvery.net/demo/responsive-tables/
jQuery Stepy http://wbotelhos.com/stepy
jQuery Knob http://anthonyterrien.com/knob/
FullCalendar http://arshaw.com/fullcalendar/
Gritter Notifications http://boedesign.com/demos/gritter/
jQuery Validation Plugin http://jqueryvalidation.org/
Font Awesome 4.0.3 http://fontawesome.io/
Nestable https://github.com/dbushell/Nestable
Dropzone http://www.dropzonejs.com/
Input Mask http://jasny.github.io/bootstrap/javascript.html#inputmask
FancyBox http://fancybox.net/
jQuery UI Touch Punch http://touchpunch.furf.com/
Flot Charts http://www.flotcharts.org/
jQuery Multi Select http://loudev.com/
Bootstrap Timepicker http://jdewit.github.com/bootstrap-timepicker/
Bootstrap WYSIWYG5 http://jhollingworth.github.com/bootstrap-wysihtml5/
jQuery jCrop http://github.com/tapmodo/Jcrop
Bootstrap FuelUX Input Spinner http://exacttarget.github.io/fuelux/#spinner
xChart http://tenxer.github.io/xcharts/
Sortable http://jqueryui.com/sortable/
Bootstrap FuelUX Tree http://exacttarget.github.io/fuelux/#tree
jQuery File Upload http://blueimp.github.io/jQuery-File-Upload/

Upgrade

To upgrade from v1.3.2 to v1.3.3 you may replace the assets, img, css and js folder.

Please do not forget to backup your files before the upgrade. If you encountered any problem during the upgrade please contact our support at dkmosa@gmail.com

End of Documentation

Once again, thanks for purchasing FlatLab.