Getting Started | Jobcy Job Listing Template

Introduction

JOBCY 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.

JOBCY 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.

JOBCY 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@themesdesign.com

📁 Folder & Files Structure

├── HTML
    ├── dist - Compiled version (Simple HTML Version)
    ├── src directory
        ├── assets
            ├── css
            ├── fonts
            ├── images
            ├── js
            ├── php
            └── scss
                ├── custom
                ├── _variables.scss
                ├── _variables-dark.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
JOBCY requires Node.js installed on your computer. Make sure the version of Node Js is greater than 18.15.0. 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.

Purple Version (Default Version)

The Purple 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.

Green Version

For the Green color version, replace the reference of Keep your body element with add data attribute data-theme="green" E.g. <body data-theme="green"> to have Green version. it is set for default(Purple) mode version.

Light Mode

Keep your body element with remove data attribute data-bs-theme="light" E.g. <body> to have Light mode. it is set for default(Purple) 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@themesdesign.com

Changelog

v1.3.0 - 22 October 2024

Updated Bootstrap version to v5.3.3
Fixed Minor Issues.

v1.2.0 - 30 November 2023

Updated Bootstrap version to v5.3.2
Fixed Minor Issues.

v1.1.0 - 20 March 2023

Updated Bootstrap version to v5.3.0-alpha1
Updated Light, Dark & Colors Themes.
Fixed Minor Issues.

v1.0.0 - 21 Jan 2022

Initial released