Multipurpose Agency HTML Template

DOCUMENTATION

  • Doc version: 4.2
  • Created: 16 August 2022
  • Last update: 01 January 2024

OVERVIEW

JobBox is a job board HTML5 template. It is a neat, clean and professional job board website template for your organization.

This responsive HTML5 template is built based on Bootstrap 5.x latest framework. This modern and professional flat design comes with lots of possibilities. JobBox is perfect for applicant, candidate, career, corporate, company, requirement agency, employment, freelancer, job board, job directory, job listing, job posting, and job seeker also.

JobBox was built with Pug, Sass and ES6 and comes packed with smart developer tools such as Gulp, Autoprefixer, Concat, Browsersync...etc... which will save you time and help you build your project faster and more efficiently.

With JobBox complete your website building process, and help to connect the people like job seekers and job givers. Try JobBox to create a job platform now!

Moreover, our HTML solution provides a set of features designed to make your website more sustainable:

  • W3C valid coding
  • Figma design file included
  • SEO-ready layout
  • Google Fonts
  • Cross-browser support
  • SCSS source files
  • PUG source files
  • Gulp Module Bundler
  • ...and many more...

JobBox was built with Gulp 4, Pug, Bootstrap 5, HTML5, CSS3 & Jquery. It is Responsive, Retina ready & Multi-Device supported. All code is beautifully written & W3C Validated.

This template written by SASS, with 7-1 pattern

We have a dedicated support center for all of your support needs. It includes our Documentation and Ticket system for any questions you have. We usually get back to you within 12-24 hours.

A quick way to integrate the Forms into your project. Get JobBox today and be setup in minutes!

Main Features

6 Homepages

Creative Design: JobBox is a bold template that organizing content to follow natural eyes, striking balance between beautiful and visual hierarchy.

Fully Responsive: The template passed Mobile-Friendly Test – by Google. We also tested carefully the template on almost devices: laptop, tablet, and phone. All elements are 100% responsive and ready for all devices.

Pixel Perfect Design

Color & Fonts is easily changed

W3C Validated Code

Gulp, Pug HTML5, Bootstrap 5.x, CSS3, ES6 used

Compatible Browsers: IE8+, Firefox, Safari, Opera, Chrome

Well documentation included

Ticket System Support

What You Get

  1. All Gulp development source files
  2. HTML template (builded from Gulp)
  3. Figma design file (Save up to $12)
  4. Documentation

Note

- All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.
- This is not a WordPress theme, It is a HTML5 template

Change log

                                VERSION 4.2
                                - Add 404 page

                                VERSION 4.1
                                - Replace Google fonts by Bunny fonts
                                - Fixed some CSS responsive issues.

                                VERSION 4.0
                                - Add Dashboard Template

                                VERSION 3.0
                                - Add 3 Homepages
                                - Optimize the source dev

                                VERSION 2.0
                                - Add candidate profile page.

                                VERSION 1.0
                                - First release.
                            

STRUCTURE

Products Files Structure

When you run 'gulp' a directory named 'dist' will be created, which is the template directory compiled from Gulp, the directory structure is as follows:

  • /assets
    • /css
      • /plugins
      • /vendors
      • /style.css
      • style.css.map
    • /fonts
    • /uicons
      • /uicons-regular-rounded.eot
      • /uicons-regular-rounded.woff
      • /uicons-regular-rounded.woff2
    • /imgs
      • /avatar
      • /brands
      • /page
      • /slider
      • /template
        • /icons
    • /js
      • /plugins
      • /vendor
      • /noUISlider.js
      • /main.js
      • /slider.js
  • /index.html
  • /index-2.html
  • /index-3.html
  • /.........

Development Source Code

Gulp Development Files Structures

To develop, please run 'gulp', then 'gulp serve' a directory named 'dist' will be created, the development directory structure is as follows:

  • /src
    • /assets
      • /css
      • /fonts
      • /imgs
      • /js
      • /scss
    • /views
      • /components
      • /layouts
      • /mixins
      • /pages
      • /section
      • /index.pug
  • /.gitignore
  • /gulpfile.js
  • /package.json
  • /package-lock.json

HTML Structure

All information within the main content area is JobBoxed within a body tag. The general template structure is pretty the same throughout the template. Here is the general structure of main page (index.html).

                                
							

CSS Structure

These are the css files that are loaded into templates in Head Section.

                                
							

Or

                                
                            

Import google fonts

                                
                            

Import third party CSS library

You can find this in: src/assets/scss/vendors/_vendors-import.scss

                                
							

JS Structure

These are the list of Javascript files that are loaded into templates in end of the Body Section.

You can find this in: src/views/components/scripts.pug

								
							

Gulp Dependencies

package.json

                                "devDependencies": {
                                    "browser-sync": "^2.27.10",
                                    "gulp": "^4.0.2",
                                    "gulp-autoprefixer": "^8.0.0",
                                    "gulp-concat": "^2.6.1",
                                    "gulp-pug": "^5.0.0",
                                    "gulp-sass": "^5.1.0",
                                    "sass": "^1.54.0"
                                }
                            

Technologies used

  • Pug/Jade https://pugjs.org (This is a template engine and is a fastest way to write HTML)
  • Sass http://sass-lang.com/ (This is a CSS preprocessor which is used to write styles)
  • Gulp 4 https://gulpjs.com (A module bundler to manager all the dependencies of your website)

Developing & Compiling

  • Start the `development server` of the project with `yarn run dev`
  • run the command `yarn run prod` and the production build is going to be generated in the `dist` folder.

UPDATE

Important Note:

- Backup your website and template folders completely to make sure you have a restore point in case of any complications.

Update using FTP

  1. Download the latest version of the template to your device.
  2. Connect to your hosting via FTP software
  3. Upload the template folder you unzipped to your site folder
  4. You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.

SOURCES & CREDITS

THANK YOU

Thank you so much for using this template.

- AliThemes Team -