HTML Structure

  1. Docs
  2. HTML Structure
HTML Folder Structure

HTML file structure

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


    <!DOCTYPE html>
    <html lang="en" {% block html %} data-layout="vertical" data-sidebar="dark" data-sidebar-size="lg" data-preloader="disable" data-theme="default" data-topbar="light" data-bs-theme="light" {% endblock html %} >
    
    <head>
        <meta charset="utf-8">
        <title>{% block title %} {% endblock title %} | Steex - Admin & Dashboard Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Minimal Admin & Dashboard Template" name="description">
        <meta content="Themesbrand" name="author">
        <!-- App favicon -->
        <link rel="shortcut icon" href="{{url_for('static' ,filename='images/favicon.ico')}}">
    
        <!-- Fonts css load -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link id="fontsLink" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    
        {% block css %}
        {% block extra_css %}
        {% endblock extra_css %}
    
            <!-- Layout config Js -->
            <script src="{{url_for('static' ,filename='js/layout.js')}}"></script>
            <!-- Bootstrap Css -->
            <link href="{{url_for('static' ,filename='css/bootstrap.min.css')}}" rel="stylesheet" type="text/css">
            <!-- Icons Css -->
            <link href="{{url_for('static' ,filename='css/icons.min.css')}}" rel="stylesheet" type="text/css">
            <!-- App Css-->
            <link href="{{url_for('static' ,filename='css/app.min.css')}}" rel="stylesheet" type="text/css">
            <!-- custom Css-->
            <link href="{{url_for('static' ,filename='css/custom.min.css')}}" rel="stylesheet" type="text/css">
    
        {% endblock css %}
    
    </head>
    
    <body>
        <!-- start end layout -->
        <div id="layout-wrapper">
    
            {% block header %}
                {% include "partials/topbar.html" %}
            {% endblock header %}
    
            {% block sidebar %}
                {% include "partials/sidebar.html" %}
            {% endblock sidebar %}
    
            <div class="main-content">
    
                <div class="page-content">
                    <div class="container-fluid">
    
                        {% block content %}
                        {% endblock content %}
    
                    </div>
                    <!-- container-fluid -->
                </div>
                <!-- End Page-content -->
    
                {% block footer %}
                    {% include "partials/footer.html" %}
                {% endblock footer %}
    
            </div>
            <!-- end main content-->
        </div>
        <!-- end layout wrapper -->
    
        {% block extra_content %}
        {% endblock extra_content %}
    
        <!-- start right sidebar -->
    
        {% block right_sidebar %}
            {% include "partials/customizer.html" %}
        {% endblock right_sidebar %}
    
        <!-- end right sidebar -->
    
        {% block javascript %}
    
            <!-- JAVASCRIPT -->
            <script src="{{url_for('static' ,filename='libs/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
            <script src="{{url_for('static' ,filename='libs/simplebar/simplebar.min.js')}}"></script>
            <script src="{{url_for('static' ,filename='js/plugins.js')}}"></script>
    
            {% block extra_js %}
            {% endblock extra_js %}
    
            <!-- App js -->
            <script src="{{url_for('static' ,filename='js/app.js')}}"></script>
    
        {% endblock javascript %}
    
    </body>
    </html>

Theme Setup

You can set the theme in the templates/partials/base.html file in the html tag.

<html data-theme="default">
data-theme="default" To set default theme
data-theme="Material" To set material theme
data-theme="Creative" To set creative theme
data-theme="Minimal" To set minimal theme
data-theme="Modern" To set modern theme
data-theme="Interaction" To set interaction theme

Layout setup

You can set the default layout in the templates/partials/base.html file in the html tag.

<html lang="en" {% block html %} data-layout="vertical" data-sidebar="dark" data-sidebar-size="lg" data-preloader="disable" data-theme="default" data-topbar="light" data-bs-theme="light" {% endblock html %} >
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-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.
© Steex.
Design & Develop by Themesbrand