Treva - Bootstrap Documentation

Treva - Documentation

Helper Documentation of Treva UIkit.

Version :	v1.0
Last Update :	16-12-2019
Author :	Codedthemes
Support :	https://codedthemes.support-hub.io/

Structure

Following is default directory structure along with page structure. That helps you understanding the entire Treva template structure.

Directory Structure
Page Structure


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


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

    <head>
        <title>Treva - UIKit</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">
        <meta name="description" content="" />
        <meta name="keywords" content="">
        <meta name="author" content="" />

        <!-- Favicon icon -->
        <link rel="icon" href="assets/images/favicon.png" type="image/x-icon">

        <!-- vendor css -->
        <link rel="stylesheet" href="assets/css/style.css">
        <script src="assets/js/vendor-all.min.js"></script>
    </head>

    <body class="">

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

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

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

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

                    <!-- ============================== -->
                    <!-- ===  Your Content put hear === -->
                    <!-- ============================== -->

                    <!-- [ Dashboard ] end -->
                </div>
                <!-- [ Main Content ] end -->
            </div>
        </div>

        <!-- 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/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.

Vertical
Horizontal

This snippet contains HTML Markup to create vertical layout.


    <!-- [ navigation menu ] start -->
    <nav class="pcoded-navbar menupos-fixed">
    	<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 -->

This snippet contains HTML Markup to create horizontal layout.


    <!-- [ 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>

Header background


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

add header-blue class in <header> to set Blue Header


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

add header-red class in <header> to set Red Header


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

add header-purple class in <header> to set Purple Header


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

add header-info class in <header> to set info Header


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

add header-dark class in <header> to set Dark Header


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

Menu brand background


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

add brand-blue class in <nav> to set Blue color in Menu caption


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

add brand-red class in <nav> to set Red color in Menu caption


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

add brand-purple class in <nav> to set Purple color in Menu caption


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

add brand-info class in <nav> to set info color in Menu caption


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

add brand-dark class in <nav> to set Dark color in Menu caption


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

Menu background

add navbar-blue class in <nav> to set Blue navigation


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

add navbar-red class in <nav> to set Red navigation


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

add navbar-purple class in <nav> to set Purple navigation


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

add navbar-info class in <nav> to set info navigation


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

add navbar-Dark class in <nav> to set Dark navigation


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

Plugins

Plugins Name	Plugins page use	Link
Bootstrap	All Page	View Resource
Apexcharts	adm-dashboard.html	View Resource
Calender	adm-projects-details.html	View Resource
Color-Picker	bc-f-picker.html	View Resource
Clipboard	All page [ comaponant ]	View Resource
Ekko-lightbox	ac-lightbox.html	View Resource
Data-Table	tbl-datatable.html	View Resource
Date Picker	bc-datepickers.html	View Resource
File-Upload	bc-uploadareas.html	View Resource
Form-Mask	bc-f-masking.html	View Resource
Form-validation	bc-f-validation.html	View Resource
Forms Wizard	bc-f-wizard.html	View Resource
JQuery	All Page	View Resource
Syntax Highlighter	ac-syn-highlighter.html	View Resource
Light-Box2	ac-lightbox.html	View Resource
Notification	ac-notification.html	View Resource
Pnotify	ac-pnotify.html	View Resource
Select2	bc-f-select.html	View Resource
Scroll js	All Page ( dashboard )	View Resource
Sweet Alert	ac-sweetalert.html	View Resource

Extra Assets References

Used Font

Font	Description	Link
Google Font	Rubik	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 Treva?

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

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

Change Log


    v1.1
	-----------
	14-12-2019
	-----------

	- Advance search include in hole page of theme
	- Live customizer included in theme package
    - Diffrent types of Header ( Topbar ), Menu ( Sidebar ), Brand colors options included.

    v1.0
	-----------
	10-12-2019
	-----------

	- Initial release
	- Figma , Full version folders included in download package.

Treva - Documentation

Version :

Last Update :

Author :

Support :