Mash able v4.0 - Documentation
Helper Documentation of Mash able v4.0 Bootstrap Admin Template.
Version : |
v4.0 |
Last Update : |
20-03-2020 |
Structure
Following is default directory structure along with page structure. That helps you understanding the entire Mash able v4.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>Mash Able - Bootstrap 4 Admin Template</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 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">
<!-- [ 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 -->
<!--[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 -->
Brand color
Plugins
Extra Assets References
Used Font
Font | Description | Link |
---|---|---|
Google Font | Mada | 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 Mash able v4.0?
Why choose Mash able v4.0?
Mash able v4.0 is made by Codedthemes's experience coders and designers. Well tested bug free code, easy to use flexible structure makes Mash able v4.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
20/03/2020 - Release v4.0
------------------------------------
- New Menu Layouts + Versions available.
- It's completely different from v3.1
- Documentation changes for v4.0
- No migration support from older version v3.1
- If you need older verion of Mash Able - Please contact us we will send it over external link.
------------------------------------
19-03-2018 - v3.1
------------------------------------
No change in HTML version
Angular 5 supported.
New CLI version supported.
Angular 4 & 5 both included in package.
------------------------------------
11-09-2017 - v3.0
------------------------------------
New Google font "Mada" implemented and improve speed performance for both Angular 4 + HTML version
Documentation changes
Angular 4 doc changes.
------------------------------------
v2.0
------------------------------------
Released 30-08-2017