HTML Structure

HTML Folder Structure

<= v3.5.1
>= v4.0.0

src
assets
html
- default
  - partials
    
    customizer.html / Contain the right sidebar theme customization HTML code.
    
    footer.html
    
    head-css.html / / added common css files link in this file.
    
    main.html / Body tag with attributes is stored in this common file.
    
    menu.html
    
    page-title.html / Breadcrumb is defined in this file.
    
    sidebar.html / Sidebar menu-related code is in this file.
    
    title-meta.html / Page title and meta tags are defined in this file.
    
    topbar.html / Topbar-related code is in this file.
    
    vendor-scripts.html / Common js files are linked in this file.
  - All HTML files will be here of the default theme.

HTML file structure

Overview

We have used gulp to compile the html, scss and js files.


    @@include("partials/main.html")

    <head>

        @@include("partials/title-meta.html", {"title": "Starter"})

        @@include("partials/head-css.html")

    </head>

    <body>

        <!-- Begin page -->
        <div id="layout-wrapper">

            @@include("partials/menu.html")

            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="main-content">

                <div class="page-content">
                    <div class="container-fluid">

                        @@include("partials/page-title.html", {"pagetitle": "Dashboards", "title": "Starter"})

                    </div>
                    <!-- container-fluid -->
                </div>
                <!-- End Page-content -->

                @@include("partials/footer.html")
            </div>
            <!-- end main content-->

        </div>
        <!-- END layout-wrapper -->

        @@include("partials/customizer.html")

        @@include("partials/vendor-scripts.html")

        <!-- App js -->
        <script src="assets/js/app.js">

    </body>
</html>

You can set the default layout in the src/html/default/partials/main.html file in the html tag.


                                            <html data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg">

data-layout="vertical"	To set default layout as Vertical
data-layout="horizontal"	To set default layout as Horizontal
data-layout="twocolumn"	To set default layout as Two column
data-layout="semibox"	To set default layout as Semibox
data-layout-mode="light"	To set Light layout mode.
data-layout-mode="dark"	To set Dark layout mode.
data-sidebar-size="lg" data-layout-width="fluid"	To set layout width Fluid and left sidebar large.
data-sidebar-size="sm-hover" data-layout-width="boxed"	To set layout width Boxed and left sidebar on hover show menu.
data-layout-position="fixed"	To set layout position Fixed.
data-layout-position="scrollable"	To set layout position Scrollable.
data-topbar="light"	To set the Light color of Topbar.
data-topbar="dark"	To set the dark color of Topbar.
data-sidebar-size="lg"	To set the Large left sidebar.
data-sidebar-size="md"	To set the Compact left sidebar.
data-sidebar-size="sm"	To set the Icon view left sidebar.
data-sidebar-size="sm-hover"	To set the Icon hover left sidebar.
data-layout-style="default"	To set the Default layout.
data-layout-style="detached"	To set the Detached layout.
data-sidebar="light"	To set the Light color of left Sidebar.
data-sidebar="dark"	To set the Dark color of left Sidebar.
data-sidebar="gradient"	To set the Gradient color of left Sidebar.
data-sidebar="gradient-2"	To set the Gradient-2 color of left Sidebar.
data-sidebar="gradient-3"	To set the Gradient-3 color of left Sidebar.
data-sidebar="gradient-4"	To set the Gradient-4 color of left Sidebar.
data-sidebar-image="none"	To Disable image on left Sidebar.
data-sidebar-image="img-1"	To set the img-1 Image of left Sidebar.
data-sidebar-image="img-2"	To set the img-2 Image of left Sidebar.
data-sidebar-image="img-3"	To set the img-3 Image of left Sidebar.
data-sidebar-image="img-4"	To set the img-4 Image of left Sidebar.
data-preloader="enable"	To enable the preloader on the Page.
data-preloader="disable"	To disable the preloader on the Page.

You can set the default layout in the src/html/partials/main.html file in the html tag.

<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="light" data-sidebar-size="lg" data-sidebar-image="none" 
      data-preloader="disable" data-theme="minimal" data-theme-colors="default">

data-layout="vertical"	To set default layout as Vertical
data-layout="horizontal"	To set default layout as Horizontal
data-layout="twocolumn"	To set default layout as Two column
data-layout="semibox"	To set default layout as Semibox
data-theme="default"	To set default theme as Default
data-theme="saas"	To set saas theme as Saas
data-theme="material"	To set material theme as Material
data-theme="galaxy"	To set galaxy theme as Galaxy
data-theme="corporate"	To set corporate theme as Corporate
data-theme="minimal"	To set minimal theme as Minimal
data-theme="creative"	To set creative theme as Creative
data-theme="modern"	To set modern theme as Modern
data-theme="interactive"	To set interactive theme as Interactive
data-theme="classic"	To set classic theme as Classic
data-theme="vintage"	To set vintage theme as Vintage
data-layout-mode="light"	To set Light layout mode.
data-layout-mode="dark"	To set Dark layout mode.
data-sidebar-size="lg" data-layout-width="fluid"	To set layout width Fluid and left sidebar large.
data-sidebar-size="sm-hover" data-layout-width="boxed"	To set layout width Boxed and left sidebar on hover show menu.
data-layout-position="fixed"	To set layout position Fixed.
data-layout-position="scrollable"	To set layout position Scrollable.
data-topbar="light"	To set the Light color of Topbar.
data-topbar="dark"	To set the dark color of Topbar.
data-sidebar-size="lg"	To set the Large left sidebar.
data-sidebar-size="md"	To set the Compact left sidebar.
data-sidebar-size="sm"	To set the Icon view left sidebar.
data-sidebar-size="sm-hover"	To set the Icon hover left sidebar.
data-layout-style="default"	To set the Default layout.
data-layout-style="detached"	To set the Detached layout.
data-sidebar="light"	To set the Light color of left Sidebar.
data-sidebar="dark"	To set the Dark color of left Sidebar.
data-sidebar="gradient"	To set the Gradient color of left Sidebar.
data-sidebar="gradient-2"	To set the Gradient-2 color of left Sidebar.
data-sidebar="gradient-3"	To set the Gradient-3 color of left Sidebar.
data-sidebar="gradient-4"	To set the Gradient-4 color of left Sidebar.
data-sidebar-image="none"	To Disable image on left Sidebar.
data-sidebar-image="img-1"	To set the img-1 Image of left Sidebar.
data-sidebar-image="img-2"	To set the img-2 Image of left Sidebar.
data-sidebar-image="img-3"	To set the img-3 Image of left Sidebar.
data-sidebar-image="img-4"	To set the img-4 Image of left Sidebar.
data-preloader="enable"	To enable the preloader on the Page.
data-preloader="disable"	To disable the preloader on the Page.
data-sidebar-user-show	To set sidebar user profile

Galaxy Layout setup

You can set the galaxy layout in the src/html/partials/main.html file in the html tag.


                                    <html data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-theme="galaxy" data-theme-color="default" data-body-image="img-1">

data-body-image="img-1"	To set img-1 on whole page(body).
data-body-image="img-2"	To set img-2 on whole page(body).
data-body-image="img-3"	To set img-3 on whole page(body).
data-body-image="none"	To remove image on whole page(body).

Notes:Above attributes works only in Galaxy version layout.