modern-admin/
                    ├── src/
                    |   ├── template-builder/
                    |   |   ├── templates/
                    |   |   |   ├── sections/
                    |   |   |   |   ├── footer/
                    |   |   |   |   ├── header/
                    |   |   |   |   ├── menu/
                    |   |   |   ├── horizontal-menu-template.pug
                    |   |   |   ├── vertical-menu-template-light.pug
                    |   |   |   ├── vertical-menu-template-nav.pug
                    |   |   |   ├── vertical-menu-template-semi-dark.pug
                    |   |   |   ├── vertical-menu-template.pug
                    |   |   |   ├── vertical-modern-menu-template.pug
                    |   |   |   └── vertical-overlay-menu-template.pug
                    |   |   └── base.pug
                
            

Modern build system provides built in 7 different types of templates 2 horizontal and 5 vertical templates as shown in above folder structure.

templates/ folder contain section/ folder and 7 templates pug files.

section/ folder contain header/ folder which contain different types header pug files. menu/ folder contain all layouts menu pug files. menu/ folder contain different footer pug files.

Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.

PUG Code

              
extends ../base

//- Template customization
//------------------------
block templateConfig
	- var templateCustom = "vertical-layout vertical-menu"
	- var dataMenu = "vertical-menu"

//- Page level customization
//------------------------
block pageConfig
	- var logoType = 'dark'

block navbarConfig
	- var navbarPosition = "fixed-top"
	- var navbarColor = "navbar-semi-light bg-gradient-x-grey-blue"
	// - var navbarShadow = true

block verticalMenuConfig
	- var menuType = "menu-fixed"
	- var menuColor = "menu-light"
	- var menuOpenType = "menu-accordion"
	- var menuShadow = true

block footerConfig
	- var footerType = "footer-static"
	- var footerColor = "footer-dark"
	- var footerBorder = true

//- Template includes
//-------------------
block header
	if(headerType == 'sk-header')
		include ../templates/sections/header/sk-header
	else if(headerType == 'header-back')
		include ../templates/sections/header/header-back
	else if(headerType == 'header-simple')
		include ../templates/sections/header/header-simple
	else
		include sections/header/header

block main-menu
	include sections/menu/vertical-menu

block page-header
	if blankPage != true
		include ../pages/page-headers/breadcrumbs-bottom

block footer
	include sections/footer/footer

//- Template specific dependency
//------------------------------

//- Vendor CSS
//------------------------------
//- Add Vendor specific CSS
block vendorcss

//- Page CSS
//------------------------------

//- Add custom page specific CSS
block pagecss
	link(rel='stylesheet', type='text/css', href='../app-assets/css'+rtl+'/core/menu/menu-types/vertical-menu.css')
	link(rel='stylesheet', type='text/css', href='../app-assets/css'+rtl+'/core/menu/menu-types/vertical-overlay-menu.css')
	link(rel='stylesheet', type='text/css', href='../app-assets/css'+rtl+'/core/colors/palette-gradient.css')

//- Vendor JS
//------------------------------
//- Add vendor specific JS
block vendorjs

//- Page JS
//------------------------------
//- Add custom page specific JS
block pagejs

              
              

Template level customization

PUG Template file contain template level customization variables. Below table contain different block and variables can be use to customize template. Refer line no: 5-7

Page level customization

On template file you can define common page level customization which will be applied on all pages. Refer line no: 11-28

Template Includes

Templates includes define the template header, main-menu, footer. Refer line no: 32-53

Template specific dependency

You can append vendor and custom js & css dependencies on template level using vendorcss, pagecss, vendorjs & pagejs block. Refer line no: 57-79