Flat able v3.0 Logo
Flat able v3.0 - Documentation

Helper Documentation of Flat able v3.0 Bootstrap Admin Template.

Version :
v3.0
Last Update :
11-07-2019
Author :
Phoenixcoded
Support :
[email protected]
Structure

Following is default directory structure along with page structure. That helps you understanding the entire Flat able v3.0 template structure.


    src/
    ├── assets/
    │   ├── fonts/
    │   ├── images/
    │   ├── js/
    │   ├── json/
    │   ├── scss/
    │   ├── html/
    ├── .babelrc
    ├── gulpfile.js
    ├── package.json
    ├── package-lock.json
	├── README.MD


                                                

    <!DOCTYPE html>
    <html lang="en">

    <head>
    	<title>Flat Able - Premium Admin Template by Phoenixcoded</title>
    	<!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
    	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    	<!--[if lt IE 11]>
        	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        	<![endif]-->
    	<!-- Meta -->
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    	<meta name="description" content="" />
    	<meta name="keywords" content="">
    	<meta name="author" content="Phoenixcoded" />
    	<!-- Favicon icon -->
    	<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">

    	<!-- vendor css -->
    	<link rel="stylesheet" href="assets/css/style.css">

    </head>

    <body class="">

    	<!-- [ Pre-loader ] start -->
    	<div class="loader-bg">
    	</div>
    	<!-- [ Pre-loader ] End -->

    	<!-- [ navigation menu ] start -->
    	<nav class="pcoded-navbar">
    	</nav>
    	<!-- [ navigation menu ] end -->

    	<!-- [ Header ] start -->
    	<header class="navbar pcoded-header navbar-expand-lg navbar-light header-dark">
    	</header>
    	<!-- [ Header ] end -->

    	<!-- [ Main Content ] start -->
    	<div class="pcoded-main-container">
    		<div class="pcoded-content">

    			<!-- [ breadcrumb ] start -->
    			<div class="page-header">
    			</div>
    			<!-- [ breadcrumb ] end -->

    			<!-- [ Main Content ] start -->
    			<div class="row">
    			</div>
    			<!-- [ Main Content ] end -->

    		</div>
    	</div>
    	<!-- [ Main Content ] end -->
    	<!-- Warning Section start -->
    	<!-- Older IE warning message -->
    	<!--[if lt IE 11]>
            <div class="ie-warning">
            </div>
        <![endif]-->
    	<!-- Warning Section Ends -->

    	<!-- Required Js -->
    	<script src="assets/js/vendor-all.min.js"></script>
    	<script src="assets/js/plugins/bootstrap.min.js"></script>
    	<script src="assets/js/pcoded.min.js"></script>

    </body>
    </html>
Layouts

This Section explains everything about Page Layouts with its extra available options. Copy code snippet for each options carefully.

This table contains all classes related to the vertical layout.

Layout Description Page link
navbar Static This is default layout so you don't need to put any settings more detail
Navbar fixed add menupos-fixed class in <nav> tag more detail
Header Fixed add headerpos-fixed class in <header> tag more detail
Collapse menu add navbar-collapsed class in <nav> tag more detail

This snippet contains HTML Markup to create vertical layout.


    <!-- [ navigation menu ] start -->
    <nav class="pcoded-navbar">
    	<div class="navbar-wrapper">
    		<div class="navbar-content scroll-div">
    			<ul class="nav pcoded-inner-navbar">
    				<li class="nav-item pcoded-menu-caption"><label>Menu Title</label></li>
    				<li class="nav-item"><a href="#!" class="nav-link "><span class="pcoded-micon"><i class="feather icon-menu"></i></span><span class="pcoded-mtext">Single Link</span></a></li>
    				<li class="nav-item pcoded-hasmenu">
    					<a href="#!" class="nav-link "><span class="pcoded-micon"><i class="feather icon-sidebar"></i></span><span class="pcoded-mtext">Menu Levels 1.1</span></a>
    					<ul class="pcoded-submenu">
    						<li class="pcoded-hasmenu"><a href="#!" class="">Menu Levels 2.1</a>
    							<ul class="pcoded-submenu">
    								<li class=""><a href="#!" class="">Menu Levels 3.1</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.2</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.3</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.4</a></li>
    							</ul>
    						</li>
    						<li class="pcoded-hasmenu"><a href="#!" class="">Menu Levels 2.2</a>
    							<ul class="pcoded-submenu">
    								<li class=""><a href="#!" class="">Menu Levels 3.1</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.2</a></li>
    							</ul>
    						</li>
    						<li class=""><a href="#!" class="">Menu Levels 2.3</a></li>
    						<li class=""><a href="#!" class="">Menu Levels 2.4</a></li>
    					</ul>
    				</li>
    			</ul>
    		</div>
    	</div>
    </nav>
    <!-- [ navigation menu ] end -->


                                                

    <!-- [ navigation menu ] start -->
    <nav class="pcoded-navbar theme-horizontal">
    	<div class="navbar-wrapper">
    		<div class="navbar-content sidenav-horizontal" id="layout-sidenav">
    			<ul class="nav pcoded-inner-navbar sidenav-inner">
    				<li class="nav-item pcoded-menu-caption"><label>Menu Title</label></li>
    				<li class="nav-item"><a href="#!" class="nav-link "><span class="pcoded-micon"><i class="feather icon-menu"></i></span><span class="pcoded-mtext">Single Link</span></a></li>
    				<li class="nav-item pcoded-hasmenu">
    					<a href="#!" class="nav-link "><span class="pcoded-micon"><i class="feather icon-sidebar"></i></span><span class="pcoded-mtext">Menu Levels 1.1</span></a>
    					<ul class="pcoded-submenu">
    						<li class="pcoded-hasmenu"><a href="#!" class="">Menu Levels 2.1</a>
    							<ul class="pcoded-submenu">
    								<li class=""><a href="#!" class="">Menu Levels 3.1</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.2</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.3</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.4</a></li>
    							</ul>
    						</li>
    						<li class="pcoded-hasmenu"><a href="#!" class="">Menu Levels 2.2</a>
    							<ul class="pcoded-submenu">
    								<li class=""><a href="#!" class="">Menu Levels 3.1</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.2</a></li>
    							</ul>
    						</li>
    						<li class=""><a href="#!" class="">Menu Levels 2.3</a></li>
    						<li class=""><a href="#!" class="">Menu Levels 2.4</a></li>
    					</ul>
    				</li>
    			</ul>
    		</div>
    	</div>
    </nav>
    <!-- [ navigation menu ] end -->

    // ***************************************************************
    //  Add Below Line of code at bottom of page when body tag in over
    // ***************************************************************
    <script src="assets/js/horizontal-menu.js"></script>
    <script type="text/javascript">
          //Collapse menu
          (function() {
              if ($('#layout-sidenav').hasClass('sidenav-horizontal') || window.layoutHelpers.isSmallScreen()) {
                  return;
              }
              try {
                  window.layoutHelpers.setCollapsed(
                      localStorage.getItem('layoutCollapsed') === 'true',
                      false
                  );
              } catch (e) {}
          })();
          $(function() {
              // Initialize sidenav
              $('#layout-sidenav').each(function() {
                  new SideNav(this, {
                      orientation: $(this).hasClass('sidenav-horizontal') ? 'horizontal' : 'vertical'
                  });
              });

              // Initialize sidenav togglers
              $('body').on('click', '.layout-sidenav-toggle', function(e) {
                  e.preventDefault();
                  window.layoutHelpers.toggleCollapsed();
                  if (!window.layoutHelpers.isSmallScreen()) {
                      try {
                          localStorage.setItem('layoutCollapsed', String(window.layoutHelpers.isCollapsed()));
                      } catch (e) {}
                  }
              });
          });
          $(document).ready(function() {
              $("#pcoded").pcodedmenu({
                  themelayout: 'horizontal',
                  MenuTrigger: 'hover',
                  SubMenuTrigger: 'hover',
              });
          });
      </script>

add container & box-layout class in <body> tag


    <body class="container box-layout">
    </body>

add rtl stylesheet link is below the style.css


    <!-- rtl layouts -->
    <link rel="stylesheet" href="assets/css/layout-rtl.css">

add menu-light class in <nav> tag


    <!-- [ navigation menu ] start -->
    <nav class="pcoded-navbar menu-light">
    </nav>
    <!-- [ navigation menu ] end -->

add dark stylesheet link is below the style.css


    <!-- dark layouts -->
    <link rel="stylesheet" href="assets/css/layout-dark.css">

add navbar-dark class in <nav> tag


    <!-- [ header menu ] start -->
    <nav class="pcoded-header header-blue">
    </nav>
    <!-- [ header menu ] end -->
Plugins
Plugins Name Plugins page use Link
Bootstrap default.html View Resource
Animation animation.html View Resource
Apexcharts chart-am.html View Resource
Calender full-calendar.html View Resource
Charts chart-chartjs.html View Resource
Trumbowyg editor editor-trumbowyg.html View Resource
Color-Picker form-picker.html View Resource
Clipboard layout-static.html View Resource
Ekko-lightbox ac_lightbox.html View Resource
Data-Table tbl_datatable.html View Resource
Date Picker ac-datepicker-component.html View Resource
Highchart chart-highchart.html View Resource
knob chart chart-knob.html View Resource
Peity chart chart-peity.html View Resource
File-Upload file-upload.html View Resource
Form-Mask form-masking.html View Resource
Form-validation form-validation.html View Resource
Forms Wizard form-wizard.html View Resource
JQuery Default.html View Resource
JQuery ui ac_gridstack.html View Resource
Syntax Highlighter ac_syntax_highlighter.html View Resource
Light-Box2 ac_lightbox.html View Resource
Moment notes.html View Resource
Map-Google map-google.html View Resource
Max-length form-elements-advance.html View Resource
Multi-select form-select.html View Resource
Notification ac_notification.html View Resource
Pnotify ac_pnotify.html View Resource
Range-Slider ac_rangeslider.html View Resource
Rating ac_rating.html View Resource
Select2 form-select.html View Resource
Scroll js All Page ( Menu ) View Resource
Sweet Alert ac_alert.html View Resource
Tags form-elements-advance.html View Resource
Extra Assets References
Used Font
Font Description Link
Google Font Open-sans View Resource
Font Icons
Font Icon Description Link
Feather Icon i.e. default font icon icon-feather.html View Resource
Font Awesome Icon icon-fontawsome.html View Resource
Images reference
Link
Icon Finder
Unsplash Images
Elements Photos (i.e. not included in package)
FAQ
What is Flat able v3.0?

Flat able v3.0 is premium dashboard template comes with tons of layout options, widgets, ready to use pages which completely suitable for any complex project.

Why choose Flat able v3.0?

Flat able v3.0 is made by Phoenixcoded's experience coders and designers. Well tested bug free code, easy to use flexible structure makes Flat able v3.0 a really differ to other templates. We almost cover every possible plugins, components which helps you start immediately on your project.

What about Item Support?

6 month item support for any bugs, design issue in current version of template. We are not provides support for any custom work implementation.

What is Support Turnaround time?

When you comment or submit the ticket for support. Our team takes it seriously and respond it within a Half or Full day.

Browser Support?

Well tested on IE=>11, Edge, Chrome, Mozilla, Safari, Opera

Change Log


    26/08/2019 - Release v3.0
    ------------------------------------
    - New Menu Layouts + Versions available.
    - It's completely  different from v2.2
    - Documentation changes for v3.0
    ------------------------------------

    v2.2
    -----------
    25-11-2017 - Included Dark Version of Template in Package
    v2.1
    -----------
    31-10-2017 - v2.1 Release

    - Custom Bower Installation It reduce 90% of Package space

    v2.0
    -----------
    09-10-2017 - v2.0 Release

    - Sidebar Menu completely changed.

    v1.0
    -----------
    v1.0 - 08-05-2017