Basic template Structure
The template has a responsive layout and is based on the Bootstrap 4 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.
HTML Structure
Here is the general HTML structure of the template:
<!DOCTYPE html>
<html lang="en">
<head>
[Page meta, page css, page title etc...]
</head>
<body>
<div class="app">
<div class="app-wrap">
<!--=================================
preloader -->
<div class="loader">
[LOADER CONTENT]
</div>
<!--=================================
preloader -->
<!--=================================
header start-->
<nav class="admin-header...... ">
[HEADER CONTENT]
</nav>
<!--=================================
header End-->
<!--=================================
Main content -->
<div class="app-container">
<div class="app-navbar">
<!-- Left Sidebar start-->
<div class="sidebar-nav">
[SIDE MENU CONTENT]
</div>
<!-- Left Sidebar End-->
<!--=================================
wrapper Start-->
<div class="app-main">
[MAIN PAGE CONTENT]
</div>
<!--=================================
wrapper End-->
<!--=================================
footer Start-->
<footer class="footer">
[FOOTER CONTENT]
</footer>
<!--=================================
footer End-->
</div>
</div>
</div>
</div>
[PAGE JAVASCRIPTS HERE]
</body>
</html>
CSS Structure
Here is the general CSS structure of the template:
<!-- css --> <link rel="stylesheet" type="text/css" href="css/vendors.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
This is a main stylesheets of the template, This file contains the styling for the actual Template. In this file, you can also find all vendors CSS imported on the top of the file. If you don’t need any of these plugins you can simply remove import plugin line from this file. Check below list of plugins which is already imported in style.css file.
- bootstrap.min.css: Bootstrap 4 css file. You must need this file. Do not remove this.
- metisMenu.css: metis menu for sidebar navigation
- fontawesome.css: font wesome icon css
- dashicons.css: dash icon css
- dripicons.css: drip icon css
- feather.css: feather icon css
- ionicons.css: ion icon css
- linea-weather.css: linea weather icons
- material-icons.css: material icons
- themify-icons.css: themify icons
- cryptocurrency-icons.css: cryptocurrency icon
- morris.css: morris chart
- jquery-ui.css: jQuery UI
- chartist.min.css: chartist chart
- c3.css: c3 chart
- dataTables.bootstrap4.min.css: datables bootstrap 4 css
- tableexport.min.css: table export
- fullcalendar.css: full calendar
- jquery.mCustomScrollbar.css: custom scrollbar
- summernote-bs4.css: summernote editor
- quill.snow.css: quill editor
- bootstrap-duallistbox.min.css: dual listbox
- bootstrap-datepicker.css: datepicker
- jquery.nestable.min.css: nestable
- owl.carousel.css: owl carousel
- owl.theme.default.min.css: owl carousel theme
- magnific-popup.css: magnific popup
- sweetalert2.min.css: sweet alert
- toastr.min.css: toastr
- select2.css: select 2
- bootstrap-tagsinput.css: tags input
- bootstrap-tagsinput-typehead.css: tagsinput typehead
- ion.rangeSlider.css: ion rangeslider
- ion.rangeSlider.skinFlat.css: ion rangeslider skin
Javascript Structure
Here is the general Javascript structure of the template:
<!-- vendors js --> <script src="js/vendors-min.js"></script> <!-- custom js --> <script src="js/app.js"></script>