Modern builder's folder structure

---

                    
                        modern_admin/
                        ├── html(Generated templates from build process)/
                        |   ├── ltr/
                        |   |   ├── vertical-menu-template/
                        |   |   |   ├── dashboard-project.html
                        |   |   |   └── etc..
                        |   ├── rtl/
                        |   |   ├── vertical-menu-template/
                        |   |   |   ├── dashboard-project.html
                        |   |   |   └── etc..
                        ├── src/
                        |   ├── template-builder/
                        |   |   ├── contents/
                        |   |   |   ├── dashboard-project.html
                        |   |   |   └── etc...
                        |   |   ├── includes/
                        |   |   |   ├── head.pug
                        |   |   |   ├── mixins.pug
                        |   |   |   ├── scripts.pug
                        |   |   |   └── styles.pug
                        |   |   ├── pages/
                        |   |   |   ├── page-headers/
                        |   |   |   ├── dashboard-project.pug
                        |   |   |   └── etc...
                        |   |   ├── templates/
                        |   |   |   ├── sections/
                        |   |   |   |   ├── footer/
                        |   |   |   |   ├── header/
                        |   |   |   |   ├── menu/
                        |   |   |   ├── horizontal-menu-template.pug
                        |   |   |   ├── horizontal-menu-template-nav.pug
                        |   |   |   ├── vertical-menu-template.pug
                        |   |   |   ├── vertical-menu-template-light.pug
                        |   |   |   ├── vertical-menu-template-nav-dark.pug
                        |   |   |   ├── vertical-menu-template-semi-dark.pug
                        |   |   |   ├── vertical-modern-menu-template.pug
                        |   |   |   └── vertical-overlay-menu-template.pug
                        |   |   └── base.pug
                    
                

Above section describe the modern build process visual diagram & folder structure.

Getting started

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

Before you start, you must have to be ready with node packages installation, please refer Building Tools for more information.

We have defined all the task by default for all 7 templates. Grunt will compile pug, scss files and generate template html files in html/ folder with selected text direction & template.

Template Build Process

Below table contain Monitor, Pug Compile & Dist command for Vertical Menu Template LTR Version, for all templates commands please refer Building Tools.

Here we are explaining the process of vertical menu template LTR build system.

Once you run the grunt command for vertical menu template, i.e for dist-html grunt dist-html --Layout="vertical-menu-template" --LayoutName="vertical-menu-template" --TextDirection="LTR" it will start building process.

First of all build process will use base.pug file which define basic template structure.

As we are building vertical menu template, it use vertical-menu-template.pug file template configuration, please refer PUG Template Structure for template configuration & customization.

Vertical menu template includes the all common section of pages like header, menu & footer. It also contain template specific CSS & JS dependencies PUG Block.

You can customize any template by including predefined header and footer based on your requirements, please refer PUG Template Structure.

Vertical menu template use vertical-menu.pug file to generate menu for this template.

You can define page title, sub-title & description in page var block, also you set page breadcrumbs, page-header, content & page specific dependencies in page pug file.

Vertical menu template use all pug pages from pages folder to generate the template final html files in html folder.

All other template follow the same build process as described above.

Create your own new template

Copy and paste any template pug file from 7 predefined template and rename it and customize template configuration as per your requirements.