Introduction

Vexa Django 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.

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.

Vexa Compatibility with Popular Browsers:

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

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:

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

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

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

{% load static %}

{% 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\app\templates in that template folder will have 174+ html pages.
• Navigate as shown Example: F:\project folder\app\templates\ Open components folder there you will find base.html, custom-base.html, landing-base.html, landing-jobs-base.html files.
• Navigate as shown Example: F:\project folder\app\templates\components\layouts Open layouts folder there you will find footer.html, main-header.html, main-sidebar.html, modal,html, scripts.html, styles.html, and switcher.html files etc..
• 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 landing-jobs-base.html file is the base file for only landing jobs page ex: landing.html

In order to run Django 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 in your terminal or console

python --version 

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

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

pip --version

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

1. Extract the zip folder of the Django project in the path: EX: C:\Users\ADMIN01\ that you have received after purchase.

2. Another process for accessing the Django project is to open the command prompt or terminal and set your project root path: Example: C:\Users\ADMIN01\

3. To create Virtualenv type in your terminal or console.

 python -m venv env 

4. Now you need to activate your Virtualenv by typing .

 env\scripts\activate 

5. Now then, in your terminal, type.

 pip install -r requirements.txt 

6. The above command will download all the required packages by using the requirements.txt file.

7. Go to the project root path.

 cd Vexa 

8. Run the command line:

 python manage.py runserver 

8. The Django development server has started at started: http://127.0.0.1:8000/ now type the URL in the browser to access the project.

Introduction to the Django Starter Kit:

The Django starterkit is a resource that helps developers kickstart their Django 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 Django Framework-based websites or applications.

Purpose of the Django Starter Kit:

The purpose of the Django starter kit is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in Django 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 Django 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:/projectname/app/templates/components/- This folder contains files such as base.html files.
• Example: C:/projectname/app/templates/components/layouts/- This folder contains files such as main-header.html, main-sidebar.html and footer.html, and switcher.html pages and and etc..,..
• Example: C:/projectname/app/templates/- This folder contains files such as index.html, files and etc..,.

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:

 npm install -g gulp

 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.

 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:

 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 :

1. Generates the libs/ and CSS/ Folders directory