Flask Folder Structure

Flask file structure

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


<!doctype html>
<html lang="en">

    <head>
        
        <meta charset="utf-8" />
        <title>{% block title %} {% endblock title %} | Skote - Admin & Dashboard Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
        <meta content="Themesbrand" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="{{url_for('static' ,filename='images/favicon.ico')}}">

        {% block css %}
        {% block extra_css %}
        {% endblock extra_css %}
        <!-- Bootstrap Css -->
        <link href="{{url_for('static' ,filename='css/bootstrap.min.css')}}" id="bootstrap-style" 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')}}" id="app-style" rel="stylesheet" type="text/css" />
        {% endblock css %}
        <!-- App js -->
        <script src="{{url_for('static' ,filename='js/plugin.js')}}"></script>

    </head>

    <body data-sidebar="dark">
    


    <!-- <body data-layout="horizontal" data-topbar="dark"> -->

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

        {% block header %}
        {% include 'partials/header.html' %}
        {% endblock %}
        {% block sidebar %}
        {% include 'partials/sidebar.html' %}
        {% endblock %}
        
        

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

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


                {% block content %}
                {% endblock content %}

                {% block extra_content %}
                {% endblock extra_content %}

                
                {% block footer %}
                {% include 'partials/footer.html' %}
                {% endblock %}
            </div>
            <!-- end main content-->

        </div>
        <!-- END layout-wrapper -->
        {% block right_sidebar %}
        {% include 'partials/rightsidebar.html' %}
        {% endblock right_sidebar %}

        
        {% block javascript %}
        <!-- JAVASCRIPT -->
        <script src="{{url_for('static' ,filename='libs/jquery/dist/jquery.min.js')}}"></script>
        <script src="{{url_for('static' ,filename='libs/bootstrap/dist/js/bootstrap.bundle.min.js')}}"></script>
        <script src="{{url_for('static' ,filename='libs/metismenu/dist/metisMenu.min.js')}}"></script>
        <script src="{{url_for('static' ,filename='libs/simplebar/dist/simplebar.min.js')}}"></script>
        <script src="{{url_for('static' ,filename='libs/node-waves/dist/waves.min.js')}}"></script>

        {% block extra_javascript %}
        {% endblock extra_javascript%}

        <!-- 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 Body tag. 

<body data-bs-theme="light data-topbar="light" data-sidebar="dark" ">
data-bs-theme="light" To set Light layout.
data-bs-theme="dark" To set Dark layout.
data-sidebar="light" To set Light Sidebar.
data-sidebar="dark" To set Dark Sidebar.
data-topbar="light" To set Light Topbar.
data-topbar="dark" To set Dark Topbar.
© Skote.