Introduction
JOBVIA is a simple and well-organized job listing Template built-in Bootstrap version 5.3.2. 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
├── admin
├── dist - Compiled version (Simple HTML Version)
├── src directory
├── assets
├── fonts
├── images
├── js
├── php
└── scss
├── custom
├── _variables.scss
├── _variables-dak.scss
├── app.scss
├── bootstrap.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, replace the reference of
Keep your body element with add data attribute
data-theme="blue" E.g.
<body data-theme="blue"> to
have Blue version. it is set for default(Green) mode version.
Purple Version
For the Purple color version, replace the reference of
Keep your body element with add data attribute
data-theme="purple" E.g.
<body data-theme="purple"> to
have Purple version. it is set for default(Green) mode version.
Light Mode
Keep your body element with remove data attribute
data-bs-theme="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-bs-theme="dark" E.g.
<body data-bs-theme="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.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