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" 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="{{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>
{% 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 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="{{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>
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. |