Introduction

JOBVIA is a simple and well-organized job listing Template built-in Bootstrap version 5.3.3. Built with the latest web technologies that are HTML5, CSS3, Gulp, and Yarn.

JOBVIA contains lots of new designs of jobs pages with responsiveness on all screens. Additionally, we have given 3 different color variants, you can easily change variants in your running application. We have written minimum SCSS and codes to increase performance.

JOBVIA is a Job Listing Template built with developer-friendly codes and easily customizeable.

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via our profile page or sent email on support@pichforest.com

📁 Folder & Files Structure
├── HTML
    ├── dist - Compiled version (Simple HTML Version)
    ├── src directory
        ├── assets
            ├── fonts
            ├── images
            ├── js
            ├── php
            └── scss
                ├── custom
                ├── _variables.scss
                ├── _variables-blue.scss
                ├── _variables-purple.scss
                ├── app.scss
                ├── app-blue.scss
                ├── app-purple.scss
                ├── bootstrap.scss
                ├── bootstrap-blue.scss
                ├── bootstrap-purple.scss
                └── icons.scss
        ├── partials
            ├── body.html
            ├── footer.html
            ├── head-css.html
            ├── main.html
            ├── page-title.html
            ├── switcher.html
            ├── title-meta.html
            ├── topbar.html
            └── vendor-script.html
        └── all html pages
    ├── gulpfile.js
    ├── package.json
    └── yarn.lock

Setup HTML

Introduction

Please follow the below steps to install and match with prerequisites:

We are using gulp which allows having complete automation for build flow. In case if you don't know Gulp then it's easy to use it. Gulp is a toolkit for automating painful or time-consuming tasks in the development workflow, so you can stop messing around while building any project. You can read it more about it here. Please follow below steps to install and setup all prerequisites:

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Yarn

    You must have Yarn installed & running on your computer. If you already have it, ignore this step. We recommend Yarn instead of NPM.

  • Nodejs

    JOBVIA requires Node.js installed on your computer. Make sure the version of Node Js is greater than 16.13.2. Use the LTS Version for the Node Js.

  • Gulp

    Make sure you have Gulp installed & running on your computer. If you already installed gulp, run command npm install -g gulp from your terminal.

  • Git

    You must have Git installed & running on your PC. Installation For setting up the admin theme, follow the below process.

Installation

To setup the admin theme, follow below-mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Command Description
yarn install This would install all the required dependencies in the node_modules folder.
gulp Runs the project locally, starts the development server and watches for any changes in your code, including your HTML, javascript, sass, etc. The development server is accessible at http://localhost:3000.

Green Version (Default Version)

The green color version is a default version set by bootstrap.min.css and app.min.css stylesheet in the src/partials/head-css.html

Blue Version

For the Blue color version, In html version we have made seperate file which is handle within head tag and replace and access by the id which is bootstrap-style and id="app-style" from this style <link href="assets/css/bootstrap-blue.min.css" id="bootstrap-style" rel="stylesheet" /> E.g. <link href="assets/css/app-blue.min.css" id="app-style" /> to have Blue version. it is set for default(Green) mode version.

Purple Version

For the Purple color version, In html version we have made seperate file which is handle within head tag and replace and access by the id which is bootstrap-style and id="app-style" from this style <link href="assets/css/bootstrap-purple.min.css" id="bootstrap-style" rel="stylesheet" /> E.g. <link href="assets/css/app-purple.min.css" id="app-style" /> to have Purple version. it is set for default(purple) mode version.

Light Mode

Keep your body element with remove data attribute data-layout-mode="dark" E.g. <body> to have Light mode. it is set for default(Green) Light mode version.

Dark Mode

Keep your body element with add data attribute data-layout-mode="dark" E.g. <body data-layout-mode="dark"> to have dark mode.

Tips

SCSS: We suggest you not to do any changes in any scss files from assets/scss/custom folders because it will trouble in future updates so we are suggesting that if you want to make any changes you can create a new custom.scss file and use that instead of the theme's file. If you have any questions beyond this documentation, feel free to contact us at support@pichforest.com

Changelog

v1.3.0 - 19 Nov 2024

  • Updated Bootstrap version to 5.3.3.
  • Fixed minor bugs

v1.2.0 - 28 Dec 2023

  • Updated Bootstrap version to 5.3.2.
  • Updated light & dark mode.
  • Fixed minor bugs

v1.1.0 - 12 Feb 2022

  • Updated Bootstrap version to 5.1.3.
  • Updated Node version to 16.13.2.
  • Fixed minor bugs

v1.0.0 - 24 Sep 2021

  • Initial released
© Pichforest.
Crafted with by Pichforest