JavaTMP Bootstrap Template Documentation Index

JavaTMP Template Layout

JavaTMP templates are an AJAX based Templates with fixed navbar, sidebar, breadcrumb, and footerbar. It is implemented in main html file index.html inside web folder.

JavaTMP templates layouts are based on fixed-fluid two columns bootstrap 4 layout which you can find separate information and demos in the following pages:

The template layout options for javatmp are:

HTML element

To apply Default JavaTMP Admin Template layout it should has a class name .javatmp-default-admin-layout.

head element

head element contains title, meta tags, and references for external CSS files.

.main-javatmp-navbar element

The class .main-javatmp-navbar styles main navbar of JavaTMP which is fixed on top with .fix-top class, the following SASS file ./web/assets/src/sass/partials/navbar.scss provides main styling for navbar.

The class .sidebar styles main sidebar of JavaTMP which is Off-canvas fixed with sliding for main content on large screen and devices and on-canvas fixed on small screen and mobile devices or when the user press togger button on navbar which will activate auto show/hide off of sidebar on desktop and large screen only. The SASS file for styling sidebar is  ./web/assets/src/sass/partials/sidebar.scss,  JavaTMP’s sidebar uses a CSS transition to show hide itself by sliding main content to right. 

.main-content element

The .main-content div is a grouper for .main-breadcrumb-bar and .main-body-content-container classes, and shrink by margin-left rule when the fixed sidebar is active by class .active on the large screens and devices. The SASS file for styling .main-content is reside in ./web/assets/src/sass/partials/base.scss file.

The class .main-breadcrumb-bar styles main breadcrumb of JavaTMP which is fixed with shrink when sidebar is active on large screen and devices. The SASS file for styling .main-breadcrumb-bar is ./web/assets/src/sass/partials/breadcrumb.scss

.main-body-content-container element

The class .main-body-content-container style main AJAX container div that will hold the AJAX content for one of sidebar links. It does not has any special styling other than padding and mainly padding from top because .main-breadcrumb-bar class is fixed.

The class .main-footer-bar style main footer div which is fixed on desktop and large screen and relative on small devices and mobile. It is height about 34 pixels so we styled body element with padding from the bottom with 34 pixels too on large screen and desktop devices.

JavaTMP Navbar Layout

The main navbar of JavaTMP template is fixed on top using native bootstrap .fix-top class, so we styled the body to have a value of its height for padding-top rule.

Main features of JavaTMP navbar:

The class .main-javatmp-navbar styles main navbar of JavaTMP template and the SASS file for styling navbar .main-javatmp-navbar is located in ./web/assets/src/sass/partials/navbar.scss

The main navbar element .main-javatmp-navbar of The template consists of three main elements:

For simplicity and template consistent we styled .main-javatmp-navbar with flex-wrap: nowrap so the complete .navbar will stay same for all devices and screen sizes but we hide some element to accommodate screen sizes.

The navbar brand element is a simple link to demo home page with text only.

The .nav menu bar was not enclosed by div.collapse.navbar-collapse so it will stay same on mobile, desktop and small screen devices. It consists of set of nav-item to provide languages, messages, tasks and alerts dropdowns. Note that those dropdowns are only static and do not provide any functionalities and it is just exist to show you style for them. The main two modifications for bootstrap normal dropdown menu are .mega-on-sm and .dropdown-menu-extender classes.

It is simply a button styled using native bootstrap .navbar-toggler class and used for showing/hiding sidebar by sliding it using click event on .sidebar-toggler-button class

Although we use native bootstrap .navbar-toggler and .navbar-toggler-icon classes, it is not mandatory as this button is not used with bootstrap collapsible plugin and for custom styling you can remove or provide specific styling for it.

Note that we show .navbar-toggler button on all devices and screen sizes, so if you want to hide it on large screens and desktop devices you can add .navbar-expand-lg class to nav.main-javatmp-navbar.navbar element, but keep in mind that it will do nothing if you provide custom styling and remove .navbar-toggler class.

JavaTMP Sidebar Layout

The main sidebar of JavaTMP template is fixed and sliding off-canvas by shifting .main-content on large screen and devices, and on-canvas on small screens and mobile devices when the .sidebar-toggler-button button presses. The sidebar sliding on-canvas too when you press the toggler button which activates sidebar by mouse moving near the left side of the browser window.

Main features of sidebar:

The SASS file for styling sidebar is located in ./web/assets/src/sass/partials/sidebar.scss, JavaTMP’s .sidebar uses a CSS transition to show or hide itself by sliding main content to right.

We make .sidebar scrollable by adding .scroll-content class, which we applied a malihu-custom-scrollbar-plugin plugin to it in main Javascript file:

$('.scroll-content').mCustomScrollbar(javatmp.settings.mCustomScrollbarOptions);

So, If you want to remove malihu-custom-scrollbar-plugin plugin, you should add overflow-y: scroll; to all .scroll-content class tags, if its height is explicitly set. Also you should make sure any fixed element with explicit height are style by overflow-y: scroll;.

There are three main elements in our fixed sidebar which are:

It contains a buttons which point to demo home page using Actionable plugin which we discuss later. You can remove the div and it is styling too. 

It contains a textfield that provides simple filtration for next collapsible link items with clear button that shown when you write something on the textfield.

.main-sidebar-menu element

.main-sidebar-menu ul is a container for main sidebar collapsible menu items. The menu is initialized and activated in index.js using metismenu jQuery plugin and styled using default plugin CSS file and custom styling to apply our styling to it. The metismenu plugin is initialized in index.init method.

So if you don’t want to use metisMenu plugin and want to remove it completely from project you should do the following step:

JavaTMP Main Content Layout

The .main-content div is a grouper for .main-breadcrumb-bar and .main-body-content-container classes.

The class .main-breadcrumb-bar styles main breadcrumb of JavaTMP which is fixed with shrink when sidebar is active on large screen and devices. The SASS file for styling .main-breadcrumb-bar is ./web/assets/src/sass/partials/breadcrumb.scss.

.main-body-content-container element

The class .main-body-content-container style main AJAX container div that will hold the AJAX content for one of sidebar links. It does not has any special styling other than padding and mainly padding from top because .main-breadcrumb-bar class is fixed.

We define this element as the main AJAX container when we initialize javatmp javascript when calling index.init method. for AJAX life cycle activities and steps events it should be one and only one element selected using this name.

The class .main-footer-bar style main footer div which is fixed on desktop and large screen and relative on small devices and mobile. The main SASS file for styling .main-footer-bar element is ./web/assets/src/sass/partials/footer.scss and it is imported in ./web/assets/src/sass/main.scss file to be part of template main CSS file.

If you don’t want a footer element at all, you can simply remove .main-footer-bar div and footer.scss file and update main.scss file by removing import statement for footer.scss.

If you want to update footer by removing its fixed behavior, you can make the following changes: