V.5

Introduction

Modern & Responsive Flask Bootstrap 5 Admin Template for All Your Web Projects

Vexa Flask is a premium Bootstrap 5 Admin Template that combines modern and minimal design with full flexibility and responsiveness. It’s crafted using HTML5,CSS3, and Bootstrap 5, offering seamless customization with SASS integration. Whether you’re building a web application, admin dashboard, or project management platform, this template ensures your site stands out with ease.

Support and Updates:

When you purchase Vexa , you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.

Dependencies for Vexa

blinker==1.9.0
click==8.3.1
colorama==0.4.6
Flask==3.1.2
itsdangerous==2.2.0
Jinja2==3.1.6
MarkupSafe==3.0.3
Werkzeug==3.1.4
node : v24.4.0
npm : v11.4.2
Sass
Gulp 5.0.0

What Do You Get with the Vexa :

Vexa provides all necessary HTML, CSS, SCSS, JS files, along with detailed Documentation to help you easily customize and implement the template.

All HTML Files
CSS Files
SCSS Files
JS Files
Documentation
Starterkit

Vexa Compatibility with Popular Browsers:

Vexa is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.

Firefox
Safari
Opera
Chrome
Edge

Folder Structure

Main Base file Structure

Main Base file structure of the Vexa template .Root:templates/layouts/base.html

The base.html file serves as the base file for all HTML pages in the Vexa template.

html

    
<!DOCTYPE html>
<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close">

    <head>

        <!-- Meta Data -->
        <meta charset="UTF-8">
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="Description" content="Vexa - Flask Bootstrap Admin & Dashboard Template">
        <meta name="Author" content="Spruko Technologies Private Limited">
        <meta name="keywords" content="admin bootstrap template, admin dashboard bootstrap, admin dashboard flask, admin dashboard template, admin panel in bootstrap, admin panel in flask, bootstrap 5 admin dashboard, bootstrap admin panel, bootstrap admin template, bootstrap ui kit, flask admin dashboard, flask bootstrap dashboard, flask bootstrap,  flask ui template, template admin bootstrap.">
        
        <!-- Title -->
        <title>{% block title %}VEXA - Flask Bootstrap Admin & Dashboard Template{% endblock %}</title>

        <!-- Favicon -->
        <link rel="icon" href="{{ url_for('static', filename='assets/images/brand-logos/favicon.ico') }}" type="image/x-icon">

        {% include 'components/styles.html' %}

        <!-- Main JS -->
        <script> src="{{ url_for('static', filename='assets/js/main.js') }}"></script>

        {% block styles %}{% endblock %}

    </head>

    <body>

        <!-- Start::main-switcher -->
        {% include 'components/switcher.html' %}
        <!-- End::main-switcher -->

        <!-- Start::Loader -->
        <div> id="loader" >
            <img src="{{ url_for('static', filename='assets/images/media/loader.svg') }}" alt="">
        </div>
        <!-- End::Loader -->

        <!-- Start::Page -->
        <div class="page">

            <!-- Start::main-header -->
            {% include 'components/main-header.html' %}
            <!-- End::main-header -->

            <!-- Start::main-sidebar -->
            {% include 'components/main-sidebar.html' %}
            <!-- End::main-sidebar -->
        
            <!-- Start::app-content -->
            <div> class="main-content app-content">
                {% block content %}{% endblock %}
            </div>
            <!-- End::app-content -->
        
            <!-- Start::main-modal -->
            {% include 'components/modal.html' %}
            <!-- End::main-modal --> 
             
            <!-- Start::main-footer -->
            {% include 'components/footer.html' %}
            <!-- End::main-footer --> 

        </div>
        <!-- End::Page-->

        <!-- Start::main-scripts -->
        {% include 'components/scripts.html' %}

        {% block scripts %}{% endblock %}

        <!-- Sticky JS -->
        <script> src="{{ url_for('static', filename='assets/js/sticky.js') }}"></script>

        <!-- Defaultmenu JS -->
        <script> src="{{ url_for('static', filename='assets/js/defaultmenu.min.js') }}"></script>

        <!-- Custom JS -->
        <script> src="{{ url_for('static', filename='assets/js/custom.js') }}"></script>

        <!-- Custom-Switcher JS -->
        <script> src="{{ url_for('static', filename='assets/js/custom-switcher.min.js') }}"></script>
        <!-- End::main-scripts --> 

    </body>

</html>

1. To ensure consistency across all pages, use the base file as the base layout for each HTML page. This allows for central management of shared elements like headers, footers, and navigation. To achieve this, include the following code at the top of each HTML file:

code

 {% extends 'layouts/base.html' %}

HTML Page View Code (for example, the HTML "example.html" file code)

code

{% extends 'layouts/base.html' %}
    
{% block styles %}

{% endblock %}


{% block content %}

{% endblock %}


{% block scripts %}
	
{% endblock %}

First, unzip the project folder that you received from us.
Navigate as shown Example: F:\project folder\templates\ Open pages folder will have 174 html pages
Navigate as shown Example: F:\project folder\templates\ Open components folder there you will find footer.html, main-header.html, main-sidebar.html, searchmodal,html, scripts.html, styles.html, and switcher.html etc files
Navigate as shown Example: F:\project folder\templates\ Open layouts folder there you will find base.html, landing-base.html, jobs-landing-base.html and custom-base.html files
Here base.html file is the base file for all the html pages.
Here custom-base.html file is the base file for all custom pages ex: sign-in-basic.html, sign-up-cover.html, error404.html, error500.html, comingsoon.html, create-password-cover.html and create-password-basic.html etc..,
Here landing-base.html file is the base file for only landing page ex: landing.html
Here jobs-landing-base.html file is the base file for only landing page ex: landing-jobs-.html

Installation Process of Python

In order to run Flask you need to install Python by the following steps

This steps are based on Windows OS

Step1: Please visite the Official Web Site of the Python python.org

Step2: Click on the Download Python button

Step3: Now your Python setup file has downloaded

Step4: Now Right click on the Python setup file and select Run as administrator click on Yes

Step5: Please click on the Check Box Add Python to PATH. And select Customize installation option

Step6: Click on Install for all users. And click on the Install button to install python on your system

Step7: To check whether Python is installed or not type python --version in your terminal

Step8: The pip package is automatically installed with your python installation

Step9: To check whether pip package is installed or not type pip --version in your terminal

NOTE: Please follow the official web site python.org to install on Linux/UNIX OS.

How to Run Flask Project in Localhost

Step:1 Quick view of Installations

Download and install the python from official site https://python.org/

Step:2 Run project

1. Unzip the Project Folder:

Begin by unzipping the project folder you received from us.

2. Open Project File in Your Editor:

Navigate to the root project location path and open the project file in your preferred editor.

3. Set Path in Terminal:

Now set the project root path in your terminal.

4. Create Virtual Environment:

In your terminal, type the following command to create a Virtualenv:

code

 python -m venv .venv

5. Activate Virtual Environment:

Activate your Virtualenv by typing the following command:

code

 .venv\scripts\activate

6. Install Required Packages:

With your Virtualenv activated, install the required packages by typing:

code

 pip install -r requirements.txt

7. Run Commands for Project Output:

Run the following commands in the terminal to generate the project output:

* Install node_modules:

code

 npm install

* Build project assets:

code

 gulp

* Run the Flask development server:

code

 python app.py

8. Access the Project:

After running the commands, the Flask development server will start at Example: http://127.0.0.1:5000
Open your web browser and enter the provided URL to access the project.

NOTE: Activating the virtual environment is critical to run the project.

NOTE: If you have any further queries in installation please refer to the official website HERE.

Purpose of a Starter Kit

Introduction to the Flask Starter Kit:

The Flask starterkit is a resource that helps developers kickstart their Flask web development projects by providing a preconfigured and ready-to-use template. It aims to simplify the initial setup and provide a foundation for building Flask Framework-based websites or applications.

Purpose of the Flask Starter Kit:

The purpose of the Flask starter kit is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in Flask projects. Instead of starting from scratch, developers can leverage the starter kit to quickly set up a project structure that adheres to best practices and industry standards.

Benefits of Using the Flask Starter Kit:

The starter kit eliminates the need to set up the basic project structure manually. It provides a well-organized file and folder structure, including commonly used directories for separating code, templates, assets, and configuration files. This allows developers to focus more on implementing business logic rather than spending time on initial setup.

Starterkit Overview

You can use the Starterkit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Vexa have more than 174 pages.

We have provided all the pre-build layouts like Sidemenu, Header, footer and blank pages etc in the Starterkit.

For further information or support regarding the template, please contact us using the provided link: https://support.spruko.com/

Take a quick look at the folder structure of the "Starterkit."
Integration of your customized HTML pages becomes easy when using the "Starterkit."
The "Starterkit" provides all the layout components, related assets, and plugins.
To explore the contents of the "Starterkit," unzip the project folder received after purchase.

Navigate to the following paths:

Example: C:/xampp/htdocs/starterkit/templates/pages/ - Add your HTML pages here if you have more.
Example: C:/xampp/htdocs/starterkit/templates/components/ - This folder contains files such as main-header.html, footer.html, scripts.html, and styles.html.
Example: C:/xampp/htdocs/starterkit/templates/layouts/ - This file such as base.html file here, if you have more.

Vexa comes with power of Gulp

Gulp is a popular JavaScript task runner that automates common development tasks, such as compiling Sass to CSS, minifying JavaScript and CSS files, optimizing images, and more. Gulp allows developers to define tasks that process files in a project, and then run those tasks automatically when files are changed or when specific commands are issued.for more information about gulp Check here.

Prerequisites:

To install and set up all the prerequisites, follow these steps:

Ensure that Node.js is installed and running on your computer. If Node.js is already installed, you can skip this step. Otherwise, install it on your computer.

If you want to install and use the latest version of Node.js, you can find the necessary instructions on the official website.

To set up gulp, you need to install it globally on your system. Run one of the following commands in your terminal:

code

 npm install -g gulp

code

 npm install --save-dev gulp

Installation

Please follow below steps to install and setup all pre requisites:

Make sure to have all above pre requisites installed & running in your computer

Open your terminal, go to your folder and enter below command. This would install all required dependencies in node_modules folder.

code

 npm install

Build Production File

After completing the above steps, run the following command from the project root (Vexa /) in your terminal or command prompt:

code

 gulp

Note:-Ensure all required node_modules are installed to run the gulp tasks successfully.

The following command performs several tasks to streamline your development workflow below are some of the task it performs :

Generates the libs/ and CSS/ Folders directory

Versions

Python : v3.13.1
Flask : v3.1.2
Bootstrap : v5.3.8
node : v24.4.0
npm : v11.4.2
Gulp : 5.0.0
Sass

FAQ'S

Step 1:

Go To style.scss (static/assets/scss/styles.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import in to styles.scss file

How to Select font Family

Step 2:

And paste Your Selected font-family in style.scss

Step 3:

And add the Your Selected font-family in _variables.scss(static/assets/scss/_variables.scss)

code

--default-font-family: "Space Grotesk", sans-serif;

Note : After changing the styles, you must run the gulp command "gulp" . For more gulp commands, see the gulp page click here.

By default menu icons are phosphoricons if you want to change To change Menu icons, open main-sidebar.html page Path:templates/components/main-sidebar.html and go through app-sidebar section, in that section you will find phosphoricons of menu in svg tag, there you can replace previous icon with your icon. Example as shown in below

Before: (phosphor icons)

html

After: (bootstrap Icons)

html

Go To "static/assets/images/brand-logos" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

Note : After changing the styles, you must run the gulp command "gulp" . For more gulp commands, see the gulp page click here.

Step1:

To clear LocalStorage loading functions you need to remove localStorageBackup2() function in custom-switcher.min.js assets/js/custom-switcher.min.js as shown below

javascript

function localStorageBackup2() {}

Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear in custom-switcher.min.js assets/js/custom-switcher.min.jsfile.Below are the some examples to find out.

javascript

localStorage.setItem( );
localStorage.removeItem( );
localStorage.getItem( )
localStorage.clear();
localStorageBackup();

Step3:

To remove complete LocalStorage saving you also need to remove main.js link present in styles.html Path:templates/components/styles.html as shown below

html


<!-- Main Theme Js -->
<script src="{{ url_for('static', filename='assets/js/main.js') }}"></script>

Step1:

To remove switcher path remove below code shown in base.html templates/layouts/base.html file

code

<!-- Start::main-switcher -->
{% include 'components/switcher.html' %}
<!-- End::main-switcher -->

Step2:

After removing switcher path in base.html page then change main-header to main-header1 for switcher icon code shown below in base.html page

code

 Before :
    <!-- Start::main-header -->
    {% include 'components/main-header.html' %}
    <!-- End::main-header -->

After :
    <!-- Start::main-header -->
    {% include 'components/main-header1.html' %}
    <!-- End::main-header -->

Step3:

Go to root path: templates/layouts/base.html open "base.html" file and then remove the"custom-switcher.min.js" link as shown below.

code

 Remove Switcher Script :
    <!-- Custom-Switcher JS -->
    <script src="{{ url_for('static', filename='assets/js/custom-switcher.min.js') }}"></script>

Step1:

To remove switcher path remove below code shown in landing-base.html templates/layouts/landing-base.html file

code

<!-- Start::main-switcher -->
{% include 'components/landingpage/switcher.html' %}
<!-- End::main-switcher -->

Step2:

After removing switcher path in landing-base.html page then change main-header to main-header1 for switcher icon code shown below in landing-base.html page

code

 Before :
    <!-- Start::main-header -->
    {% include 'components/landingpage/main-header.html' %}
    <!-- End::main-header -->

After :
    <!-- Start::main-header -->
    {% include 'components/landingpage/main-header1.html' %}
    <!-- End::main-header -->

Step3:

Now then change main-sidebar to main-sidebar1 for switcher icon code shown below in landing-base.html page

code

 Before :
    <!-- Start::main-sidebar -->
    {% include 'components/landingpage/main-sidebar.html' %}
    <!-- End::main-sidebar -->

After :
    <!-- Start::main-sidebar -->
    {% include 'components/landingpage/main-sidebar1.html' %}
    <!-- End::main-sidebar -->

Step1:

To remove switcher path remove below code shown in jobs-landing-base.html templates/layouts/jobs-landing-base.html file

code

<!-- Start::main-switcher -->
{% include 'components/landingpage/switcher.html' %}
<!-- End::main-switcher -->

Step2:

After removing switcher path in jobs-landing-base.html page then change jobs-header to jobs-header1 for switcher icon code shown below in jobs-landing-base.html page

code

 Before :
    <!-- Start::main-header -->
    {% include 'components/landingpage/jobs-header.html' %}
    <!-- End::main-header -->

After :
    <!-- Start::main-header -->
    {% include 'components/landingpage/jobs-header1.html' %}
    <!-- End::main-header -->

Step3:

Now then change jobs-sidebar to jobs-sidebar1 for switcher icon code shown below in jobs-landing-base.html page

code

 Before :
    <!-- Start::main-sidebar -->
    {% include 'components/landingpage/jobs-sidebar.html' %}
    <!-- End::main-sidebar -->

After :
    <!-- Start::main-sidebar -->
    {% include 'components/landingpage/jobs-sidebar1.html' %}
    <!-- End::main-sidebar -->

Please follow the below steps to change Primary Color

Step 1 :

To change Primary Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (static/assets/scss/_variables.scss )

Note : After changing the styles, you must run the gulp command "gulp" . For more gulp commands, see the gulp page click here.

9. How to Change Dark body Color?

Please follow the below steps to change Dark body Color

Step 1 :

Make sure the theme is set completely to dark mode by adding the following attributes to the html tag data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

Step 2 :

To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (static/assets/scss/_variables.scss )

Step 3 :

Also Change the following variable colors to the desired theme background accordingly in [data-theme-mode="dark"]

--light-rgb :
--form-control-bg :
--input-border :
--gray-3 :

Note : After changing the styles, you must run the gulp command "gulp" . For more gulp commands, see the gulp page click here.

Credit's

NPM Plugins & Reference Links

All plugins runs through npm.

If you want new plugins : Install new plugin from npm then run gulp command.

Plugin	Version	URL
@popperjs/core	^2.11.8	npmjs.com/@popperjs/core
@simonwep/pickr	^1.9.0	npmjs.com/@simonwep/pickr
@tarekraafat/autocomplete.js	^10.2.7	npmjs.com/@tarekraafat/autocomplete.js
@yaireo/dragsort	^1.3.2	npmjs.com/@yaireo/dragsort
@yaireo/tagify	^4.34.0	npmjs.com/@yaireo/tagify
animejs	^3.2.2	npmjs.com/animejs
apexcharts	^5.3.6	npmjs.com/apexcharts
autoprefixer	^10.4.19	npmjs.com/autoprefixer
bootstrap	^5.3.8	npmjs.com/bootstrap
browser-sync	^3.0.3	npmjs.com/browser-sync
chart.js	^4.5.1	npmjs.com/chart.js
choices.js	^11.1.0	npmjs.com/choices.js
clean-css	^5.3.3	npmjs.com/clean-css
cleave.js	^1.6.0	npmjs.com/cleave.js
cssnano	^7.0.4	npmjs.com/cssnano
datatables.net-bs5	^1.13.11	npmjs.com/datatables.net-bs5
dragula	^3.7.3	npmjs.com/dragula
dropzone	^6.0.0-beta.2	npmjs.com/dropzone
dual-listbox	^2.0.0	npmjs.com/dual-listbox
echarts	^6.0.0	npmjs.com/echarts
fg-emoji-picker	^1.0.1	npmjs.com/fg-emoji-picker
filepond	^4.32.11	npmjs.com/filepond
flatpickr	^4.6.13	npmjs.com/flatpickr
fullcalendar	^6.1.20	npmjs.com/fullcalendar
glightbox	^3.3.0	npmjs.com/glightbox
gmaps	^0.4.25	npmjs.com/gmaps
gridjs	^6.2.0	npmjs.com/gridjs
intl-tel-input	^19.5.7	npmjs.com/intl-tel-input
isotope-layout	^3.0.6	npmjs.com/isotope-layout
jsvectormap	^1.7.0	npmjs.com/jsvectormap
leaflet	^1.9.4	npmjs.com/leaflet
moment	2.9.0	npmjs.com/moment
node-waves	^0.7.6	npmjs.com/node-waves
nouislider	^15.8.1	npmjs.com/nouislider
particles.js	^2.0.0	npmjs.com/particles.js
plyr	^3.7.8	npmjs.com/plyr
prismjs	^1.29.0	npmjs.com/prismjs
quill	^2.0.2	npmjs.com/quill
rater-js	^1.0.1	npmjs.com/rater-js
rename	^1.0.4	npmjs.com/rename
shepherd.js	^11.2.0	npmjs.com/shepherd.js
simplebar	^6.2.7	npmjs.com/simplebar
slick-slider	^1.8.2	npmjs.com/slick-slider
sortablejs	^1.15.2	npmjs.com/sortablejs
sweetalert	^2.1.2	npmjs.com/sweetalert
sweetalert2	^11.26.17	npmjs.com/sweetalert2
swiper	^11.2.10	npmjs.com/swiper
toastify-js	^1.12.0	npmjs.com/toastify-js
uglify	^0.1.5	npmjs.com/uglify
vanilla-wizard	^0.0.7	npmjs.com/vanilla-wizard
wnumb	^1.2.0	npmjs.com/wnumb

Icons Credit

Icons	References
Bootstrap Icons	https://icons.getbootstrap.com/
Boxicons	https://boxicons.com/
Remix Icons	https://remixicon.com/
Feather Icons	https://feathericons.com/
Tabler Icons	https://tabler-icons.io/
Line Awesome Icons	https://icons8.com/line-awesome
Phosphor Icons	https://phosphoricons.com/

Images Credit

Images	References
Vecteezy	https://www.vecteezy.com/
Iconscount	https://iconscout.com/
Unsplash	https://unsplash.com/
Png Tree	https://pngtree.com/
flaticon	https://www.flaticon.com/authors/flat-icons
freepik	https://www.freepik.com

Fonts Credit

Font	References
Google Fonts	https://fonts.google.com/

Sidemenu Icons

Icon	References
phosphor Icons	https://phosphoricons.com/

Switcher styles

You can change the Theme Styles & Colors by adding the attribute to the html tag in base.html (Root:templates/layouts/base.html)

html

<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close">

Light:

html

data-theme-mode="light" data-header-styles="light" data-menu-styles="light"

Dark:

html

data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

LTR (Left to Right):

html

dir="ltr"

RTL (Right to Left):

html

dir="rtl"

Vertical:

html

data-nav-layout="vertical"

Horizontal:

html

data-nav-layout="horizontal" data-nav-style="menu-click"

Default:

Menu Click

data-nav-style="menu-click"

Menu Hover

html

data-nav-style="menu-hover"

Icon Click:

html

data-nav-style="icon-click"

Icon Hover:

html

data-nav-style="icon-hover"

Classic:

html

data-page-style="classic"

Mordern:

html

data-page-style="modern"

Flat:

html

data-page-style="flat"

Full Width:

html

data-width="full-width"

Boxed:

html

data-width="boxed"

Fixed:

html

data-menu-position="fixed"

Scrollable:

html

data-menu-position="scrollable"

Fixed:

html

data-header-position="fixed"

Scrollable:

html

data-header-position="scrollable"

Closed:

html

data-vertical-style="closed"

Icontext:

html

data-vertical-style="icontext"

Overlay:

html

data-vertical-style="overlay"

Detached:

html

data-vertical-style="detached"

Doublemenu:

html

data-vertical-style="doublemenu"

Enable:

html

loader="enable"

Disable:

html

loader="disable"

Light Style:

html

data-menu-styles="light"

Dark Style:

html

data-menu-styles="dark"

Color Style:

html

data-menu-styles="color"

Gradient Style:

html

data-menu-styles="gradient"

Transparent Style:

html

data-menu-styles="transparent"

Light Style:

html

data-header-styles="light"

Dark Style:

html

data-header-styles="dark"

Color Style:

html

data-header-styles="color"

Gradient Style:

html

data-header-styles="gradient"

Transparent Style:

html

data-header-styles="transparent"

Background Image Style-1:

html

data-bg-img="bgimg1"

Background Image Style-2:

html

data-bg-img="bgimg2"

Background Image Style-3:

html

data-bg-img="bgimg3"

Background Image Style-4:

html

data-bg-img="bgimg4"

Background Image Style-5:

html

data-bg-img="bgimg5"

Information

Updated Date

12/Apr/2025
Author

Spruko
Company

Spruko Technologies Private Limited
Company's Website

https://spruko.com/
Company's Portfolio

https://sprukomarket.com/
Created Date

12/Apr/2025

Portfolio Buy Now Preview

New : Tailwind Version Will be available soon...

Need Help ?

Support Help Desk

Technical issues? Our support team is ready to help.

Help Desk

Pre-Sales

Have questions before purchasing? Contact our pre-sales team.

Send Mail

Pre-Sales Chat

Get immediate answers through our live chat support.

Live chat

Switcher

Introduction

Modern & Responsive Flask Bootstrap 5 Admin Template for All Your Web Projects

Support and Updates:

Dependencies for Vexa

What Do You Get with the Vexa :

Vexa Compatibility with Popular Browsers:

Folder Structure

Vexa /

static/

assets/

css/ - The Folder contain all css files .

icon-fonts / - The Folder contain all scss files including plugins .

bootstrap-icons/ - The folder contains all the bootstrap icons

boxicons/ - The folder contains all the boxicons icons

feather/ - The folder contains all the feather icons

line-awesome/ - The folder contains all the line-awesome icons.

remixicon/ - The folder contains all the remixicon icons.

tabler-icons/ -The folder contains all the tabler icons.

images/ - The Folder contain all the template images.

js/ - The folder contains all the template JavaScript files.

libs/ - The Folder contain all plugins .

scss / - The Folder contain all scss files including plugins .

bootstrap/ - The folder contains all the bootstrap component files.

custom/ - The folder contains all the custom files.

menu-styles/ - The folder contains all the menu-styles styles files..

pages/ - The folder contains all the pages styles files.

util/ - The folder contains all the utilite components files..

_switcher.scss - The file contains all the switcher component files.

_variables.css - The file contains all the declared _variables.

icons.scss - The file which contains all the icons included.

styles.scss - The file which contains all the scss files included.

video/ - The folder with video files used in this template.

templates /

components/

landingpage/

custom-scripts.html

custom-styles.html

custom-switcher.html

footer.html

main-header.html

main-header1.html

main-sidebar.html

model.html

scripts.html

styles.html

switcher.html

layouts/

base.html

custom-base.html

jobs-landing-base.html

landing-base.html

pages /

9 Folders and 174+ html pages

app.py

gulpfile.mjs

package-lock.json

package.json

requirements.txt

Main Base file Structure

HTML Page View Code (for example, the HTML "example.html" file code)

Installation Process of Python

In order to run Flask you need to install Python by the following steps

This steps are based on Windows OS

How to Run Flask Project in Localhost

Step:1 Quick view of Installations

Step:2 Run project

Purpose of a Starter Kit

Introduction to the Flask Starter Kit:

Purpose of the Flask Starter Kit:

Benefits of Using the Flask Starter Kit:

Starterkit Overview

Vexa comes with power of Gulp

Prerequisites:

Installation

Build Production File

Versions

FAQ'S

1. How to Change Font Family ?

Step 1: