Introduction

JOBCY is a simple and well-organized job listing Template built-in TailwindCSS version 3.3.2 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 6 different color variants, you can easily change variants in your running application. We have written minimum CSS 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
├── admin
    ├── dist - Compiled version (Simple HTML Version)
    ├── src directory
        ├── assets
            ├── fonts
            ├── images
            ├── js
            ├── php
            └── css
                ├── custom
                ├── plugins
                ├── icons
                ├── icons.css
                └── tailwind.css
        ├── partials
            ├── body.html
            ├── footer.html
            ├── head-css.html
            ├── js.html
            ├── main.html
            ├── navbar.html
            ├── switcher.html
            ├── title-meta.html
            ├── topbar.html
            └── vendor-script.html
        └── all html pages
    ├── gulpfile.js
    ├── package.json
    ├── postcss.config.js
    ├── tailwind.config.js
    └── 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.

Violet Version (Default Version)

The Violet color version is a Violet version set by switcher.html stylesheet in the src/partials/main.html

Sky Version

For the Sky color version, replace the reference of Keep your body element with add data attribute data-theme-color="sky" to have Sky version. it is set for default(Sky) mode version.

Red Version

For the Red color version, replace the reference of Keep your body element with add data attribute data-theme-color="red" to have Red version. it is set for default(Red) mode version.

Green Version

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

Pink Version

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

Blue Version

For the Blue color version, replace the reference of Keep your body element with add data attribute data-theme-color="blue" to have Blue version. it is set for default(Blue) mode version.

Light Mode

Keep your body element with remove data attribute data-mode="light" have Light mode. it is set for default(Violet) Light mode version.

Dark Mode

Keep your body element with remove data attribute data-mode="dark" have Dark mode. it is set for default(Violet) Dark mode version.

Tips

CSS: We suggest you not to do any changes in any scss files from assets/css/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.0.0 - 5 June 2023

  • Initial released
© Themesdesign.
Crafted with by Themesdesign