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.

    
        {% load static %}
        <!doctype html>
        <html lang="en" data-layout-width="boxed" data-topbar="dark" data-preloader="disable" data-card-layout="borderless" data-bs-theme="light" data-topbar-image="pattern-1">
        <head>
            <meta charset="utf-8">
            <title>{% block title %} {% endblock title %} | Judia - 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="https://img.themesbrand.com/judia/favicon.ico">
        
            {% block css %}
            {% block extra_css %}
            {% endblock extra_css %}
        
            <!-- Layout config Js -->
            <script src="{% static 'js/layout.js' %}"></script>
            <!-- Bootstrap Css -->
            <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
            <!-- Icons Css -->
            <link href="{% static 'css/icons.min.css' %}" rel="stylesheet" type="text/css">
            <!-- App Css-->
            <link href="{% static 'css/app.min.css' %}" rel="stylesheet" type="text/css">
            <!-- custom Css-->
            <link href="{% static 'css/custom.min.css' %}" rel="stylesheet" type="text/css">
        
            {% endblock css %}
        
        </head>
        
        {% block body %}
            <body>
        {% endblock body %}
        
        
            <!-- Begin page -->
            <div id="layout-wrapper">
        
                {% block topbar %}
                    {% include "partials/topbar.html" %}
                {% endblock topbar %}
        
                {% block pattern %}
                    {% include "partials/pattern.html" %}
                {% endblock pattern %}
            
                <div class="main-content">
        
                    <div class="page-content">
                        <div class="container-fluid">
        
                        {% block main_title %}
        
                        {% endblock main_title %}
        
        
                        {% 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 %}
        
                {% block javascript %}
        
                    <!-- JAVASCRIPT -->
                    <script src="{% static 'libs/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
                    <script src="{% static 'libs/simplebar/simplebar.min.js' %}"></script>
                    <script src="{% static 'js/plugins.js' %}"></script>
        
                    {% block extra_js %}
                    {% endblock extra_js %}
        
                    <!-- App js -->
                    <script src="{% static 'js/app.js' %}"></script>
        
                {% endblock javascript %}
        
        </body>
        
        </html>

Layout setup

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

<html lang="en" data-layout-width="boxed" data-topbar="dark" data-preloader="disable" data-card-layout="borderless" data-bs-theme="light" data-topbar-image="pattern-1">
data-layout-width="fluid" To set fluid layout width.
data-layout-width="boxed" To set boxed layout width.
data-card-layout="borderless" To set borderless card layouts.
data-card-layout="border" To set border card layouts.
data-layout-mode="light" To set Light layout mode.
data-layout-mode="dark" To set Dark layout mode.
data-layout-mode="brand" To set Brand layout mode.
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-topbar="brand" To set the brand color of Topbar.
data-topbar-image="pattern-1" To set the pattern One of Topbar.
data-topbar-image="pattern-2" To set the pattern Two of Topbar.
data-topbar-image="pattern-3" To set the pattern Three of Topbar.
data-preloader="enable" To enable the preloader on the Page.
data-preloader="disable" To disable the preloader on the Page.
© Judia.
Design & Develop by Themesbrand