CrabFrame v1.0 - Admin Template

About CrabFrame
-----------------------------------------------------------------------------

CrabFrame is a responsive admin template, developed using Bootstrap and jQuery. The
clean, fast, light dashboard template will help you build your own application, and save a lot
of time. It comes with huge collection icons, plugins and examples. Also in package you will
find some Plugins, font icons package and documentation. CrabFrame supports all major
latest browsers and IE9+ version.

CrabFrame support available 12/24

If you have any questions or suggestions – contact me with email. I will do my best to help
you!

CrabFrame Features
-----------------------------------------------------------------------------

1. 
   

   1)  Responsvie 4+ columns layout



2. 
   

   2)  Cross-browser compatible



3. 
   

   3)  Built using HTML5, CSS3 and JavaScript



4. 
   

   4)  Integrated plugins:

a) Bootstrap Responsive v2.3.1
b) jQuery

5) Interface elements

1. 
   

   a)  2 types of navigation



2. 
   

   b)  Middle navigation buttons



3. 
   

   c)  Responsive alert blocks(warning,error,success,info) with hide effect



4. 
   

   d)  Styled and responsive Bootstrap v2.3.1 elements

 

 

1. 
   

   6)  Form elements:

   
   
   
   
   1. 
      

      a)  Masked input features

   
   
   2. 
      

      b)  Styled input fields with placeholder, readonly, disabled, grid

   
   
   3. 
      

      c)  Dynamically resizable styled textarea

   
   
   4. 
      

      d)  WYSIWYG editors

   
   
   5. 
      

      e)  Tags input

   
   


2. 
   

   7)  Tables:

a) Simple tables with features

8) Charts:
a) Google Column Chart, Pie Chart, Scatter Chart, Line Chart, Bar Chart, Area Chart

1. 
   

   9)  Calculator



2. 
   

   10)  Calendar



3. 
   

   11)  Editors



4. 
   

   12)  Progress Bars



5. 
   

   13)  Typography:

   
   
   
   
   1. 
      

      a)  Simple and customizable gallery grid

   
   
   2. 
      

      b)  13 valid HTML pages

   
   
   3. 
      

      c)  140 Icons by Glyphicons

   
   
   4. 
      

      d)  Brankic1979 and Font Awesome icons set

   
   
   5. 
      

      e)  And much more...

   
   

Plugins Used
-----------------------------------------------------------------------------

 Calculator
 Calendar
 Editors
 Elfinder
 Google Charts Snippet

 Google Maps

 

 

 
 

HowToUse?
-----------------------------------------------------------------------------

CrabFrame is a simple Admin template, Users can easily integrate and use. In CrabFrame we
used Bootstrap so its integration is very easy. CrabFrame configurations are follows.

HTML Contents – (HTML comment tree)

Here you can see how the content will come in the html, I commented the html based on
this document

<!-- Start: Header Area -->

<header>
<!-- LOGO -->here is the logo coming<!-- Start: Iconmenu Top -->
Here is the top iconmenu coming
<!-- End: Iconmenu Top -->

<!-- Start: Top Navigation -->

Top navigation comes here

<!-- End: Top Navigation -->
</header>

<!-- End: Header Area -->

<!-- Start: Content Area -->

<!-- Start: Notification -->

Here is the top floating notification box comes, I put 3 notification boxes here

<!-- End: Notification -->

<!-- Start: left icon navigation -->

Here is left menu navigation icons comes, but menus are comes in <! - - Start: Left navigation -->
section

<!-- End: left icon navigation -->
<!-- Start: Left area -->

<!-- Start: Search -->

Left searchbox comes here

<!-- End: Search -->

<!-- Start: Left Navigation -->

icons navigation menu comes here

<!-- End: Left Navigation -->

 

 

<!-- Start: Band width -->

Here is Bandwidth progressbar coming

<!-- End: Band width -->

<!-- Start: Disk Space Usage -->

Here is Disc space coming

<!-- End: Disk Space Usage -->
<!-- End: Left area -->

<!-- Start: Right contents -->

<!-- Start: User Area -->

Here is the user area with photo and logout comes, also breadcrumbs comes here I
commented it with <!-- BREADCRUMBS -->
<!-- End: User Area -->

<!-- MAIN HEADING --> Main Heading comes here

<!-- Start: Messages Area -->

Here is the notification messages comes there is different type of message boxes also it
have a close button.

<!-- End: Messages Area -->

<!-- Start: Top Button area -->

button widgets comes here

<!-- End: Top Button area -->

<!-- Start: Content Box area -->

Here is the content box comes, you can change its width with Grid structure.

<!-- End: Content Box area -->
<!-- End: Right contents -->

<!-- End: Content Area -->

CSS Files

I created this theme with Bootstrap, so you can follow all the styling supports in bootstrap.
I included a “main.css” in the header. In main.css I linked all the style sheets needed in this
theme ie,

 

 

 

1 bootstrap.css
2. style.css
3. bootstrap-responsive.css
4. font-awesome.min.css

Need to attach plugin css separately.

Form Elements
I given All the elements in the templates pages, you can refer the pages and add the codes
given in that pages, all the elements are pre-styled, just change the property if needed.

JS Files

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/system.js"></script>
<script type="text/javascript" src="jjs/bootstrap.min.js"></script>

We need to include these script fils in our templates, other scripts you can use based on
the plugins and other stuffs

Plugins and Usage

1. Calculator

Include bottom file in the <header>

<script type="text/javascript" src="plugins/calculator/js/jquery.blackcalculator.beta.min.js"></script>

Add this html in the content area

<div class="calculator">
<div class="calculator_close"><a href="#" id="calculator_close_ioc">X</a></div>
</div>

 

 

 

2. Calender
Include bottom file in the <header>

<link rel='stylesheet' type='text/css' href="plugins/calender/cupertino/theme.css" />
<link rel='stylesheet' type='text/css' href='plugins/calender/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='plugins/calender/fullcalendar/fullcalendar.print.css' media='print'
/>
<script type='text/javascript' src='plugins/calender/jquery/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='plugins/calender/fullcalendar/fullcalendar.min.js'></script>

Add this html in the content area

<div id='calendar'></div>

3. Editors
Include bottom file in the <header>

<script type="text/javascript" src="plugins/editor/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="plugins/editor/jscripts/tiny_mce/editor_all.js"></script>

Add this html in the content area

<textarea id="elm1" name="elm1" rows="15" cols="80" style="width:100%">This is a sample
Editor</textarea>

4. Elfinder (File Manager)
Include bottom file in the <header>

<link rel="stylesheet" type="text/css" media="screen"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-
ui.min.js"></script>
<!-- elFinder CSS (REQUIRED) -->
<link rel="stylesheet" type="text/css" media="screen" href="plugins/elfinder/css/elfinder.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="plugins/elfinder/css/theme.css">
<!-- elFinder JS (REQUIRED) -->
<script type="text/javascript" src="plugins/elfinder/js/elfinder.min.js"></script>
<!-- elFinder translation (OPTIONAL) -->
<script type="text/javascript" src="plugins/elfinder/js/i18n/elfinder.ru.js"></script>

<script type="text/javascript" src="plugins/elfinder/elfinder_run.js"></script>

 

 

 
Add this html in the content area

<!-- File Manager -->
<div id="elfinder"></div>
<!-- File Manager -->

3. Chart
Include bottom file in the <header>

<!-- Chart -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="plugins/graph/all-charts.js"></script>
<!-- Chart -->

Add this html in the content area

<div id="column_chart_div" class="home_graph_full"></div>
You can use different chart by using different IDs instead of “column_chart_div”,

that is pie_chart_div, scatter_chart_div, linechart_chart_div, bar_chart_div, area_chart_div

 

 

Sources & Credits
-----------------------------------------------------------------------------

http://twitter.github.com/bootstrap/
http://fortawesome.github.com/Font-Awesome/
https://github.com/rcoelros/jquery-blackCalculator
http://arshaw.com/fullcalendar/
http://www.tinymce.com/

http://elfinder.org/
https://google-developers.appspot.com/
http://maps.google.co.in/
http://jquery.com/

 

 

 

 

 

 

 

 

 

 

Once again, thank you so much for purchasing this theme.
As I said at the beginning, I'd be glad to help you if you have any questions
relating to this theme. No guarantees, but I'll do my best to assist.