Documentation

About Template

Light Blue Admin Template is next-generation, well-designed and powerful front-end template. It's very useful for designing either your next web application or admin entrance for it.

It's base on super powerful Bootstrap front-end framework which uses 12-column responsive grid layout.

Structure

Light Blue package goes with following folders:

  • *root* - html templates;
  • css - compiled css stylesheets;
  • img - images;
  • js - custom javascript written for Light Blue;
  • lib - various JS libraries used in Light Blue. You can remove them depending on what you need;

Next folders are not essential and can be removed from package:

  • documentation - you're actually reading it now;
  • sass - scss stylesheets that compiled into css;
  • server - few php files used for fileupload demo;
  • white - white version of Light Blue. It has the same/copied file structure so you can just choose one between White and Transparent and remove another.

Scss

Light Blue uses scss to generate css. This choice has been made because of significant boost scss gives when developing front-end apps like this one. We used compass to compile scss to css, but what to use is absolutely up to your choice. Anyway editing css is a good old way, right? :)

The main scss file is application.scss. It includes all libraries and partial files.

  • general.scss - all application styles. Only element styles (body, a, h2, etc).

  • base.scss - all application styles. Everything except elements. Every class used in Light Blue is defined here.

    There are lots of sections like:

    /***********************************/
/**          LOGO                **/
/**********************************/

    in this file. You can simply remove sections you don't need and recompile stylesheets. The essential sections are:

    LOGO, SIDEBAR, CONTENT, WIDGET, HEADER, MESSAGES, SUPPORT, SETTINGS, ACCOUNT, BUTTONS, FORMS, TABLES, UTILS. All other sections can be removed.

  • font.scss - downloaded version of Open Sans font.

  • responsive.scss - responsive styles.

  • variables.scss - all template variables like colors, button sizes, etc.

  • svg.scss - svg-related styles. This one can be easily removed if you don't need nvd3 charts.

Support

If you have any questions or problems when installing template feel free to contact us via email - contact@keeptwo.com. We will provide as much help as possible.

Statistics Boxes

See statistics section.

Left Sidebar

Left sidebar is based on Bootstrap's collapse component. Settings.js holds additional javascript code which is used to change sidebar state and sidebar position depending on chosen option (icons, auto) and (left, right).

Top Navigation

Is simple Bootstrap's Navbar. User profile and settings popovers are implemented via Bootstrap's popover

Charts

Charts are built with D3.js-based nvd3 library. Read more in charts section

Change Log

Version 1.7.1

  • - Bootstrap 3.0.3 upgrade fix

Version 1.7

  • - 4+ level menu
  • - Libs updates & fixes
  • - Documentation update

Version 1.6

  • - Bootstrap components page
  • - Draggable Grid
  • - List Groups
  • - Jquery 2.0, lib updates
  • - Font Awesome 4.0.3

Version 1.5

  • - White version (white/) Thanks to Quang Pham for convincing me :)
  • - Landing page (landing.html)
  • - Css & Structure refactoring
  • - Drop Bootstrap 2 version from package

Version 1.4

Version 1.3

  • - Overall UI improvements
  • - New iCheck library instead of out-of-date uniform
  • - Print Optimized
  • - Invoice Page (special_invoice.html)

Version 1.2

  • - Fileupload fix
  • - Second level menu overlap fix

Version 1.1