Documentation, User Guide

While you have a complete list of demos for the template, but you're always welcome to use this documentation too.




What's this

Introduction

Read this section to know about TheJobs and its features

TheJobs is a powerful, responsive, and high-performance job board template with awesome features for a job platform. It's based on Bootstrap and contains a lot of components to easily make a job listing website.

Features

Check out some of features that we have in this template. To know more about features of TheJobs, continue reading our documentation and check our available components.


  • Responsive

    Your website works on any device: desktop, tablet or mobile.

  • Customizable

    You can easily read, edit, and write your own code, or change everything.

  • UI Elements

    There is a bunch of useful and necessary elements for developing your website.

  • Clean code

    You can find our code well organized, commented and readable.

  • Documented

    As you can see in this online documentation, we provided a comprehensive documentation.

  • Free updates

    When you purchase this template, you'll freely receive future updates.

Unboxing

What's included

Checkout the files that you'll see upon downloading

Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.

  • assets
    • css
      • app.min.cssMinified version of all required CSS files
      • custom.cssWrite your custom styles in this file
    • fonts
    • imgHere is a place to put your media files like logo, images, videos, etc.
    • js
      • app.min.jsMinified version of all required Javascript files
      • custom.jsWrite your custom scripts in this file and also edit existence code to fits your need
    • vendors
  • index.html
  • index-2.html
  • ...
Better understanding

HTML Structure

Check the structure of HTML files


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>TheJobs</title>

    <!-- Styles -->
    <link href="assets/css/app.min.css" rel="stylesheet">
    <link href="assets/css/custom.css" rel="stylesheet">
  </head>

  <body class="nav-on-header">

    <!-- Navigation bar -->
    <nav class="navbar">

    </nav>
    <!-- END Navigation bar -->


    <!-- Site header -->
    <header class="site-header">

    </header>
    <!-- END Site header -->


    <!-- Main container -->
    <main>

    </main>
    <!-- END Main container -->


    <!-- Site footer -->
    <footer class="site-footer">

    </footer>
    <!-- END Site footer -->


    <!-- Back to top button -->
    <a id="scroll-up" href="#"><i class="ti-angle-up"></i></a>
    <!-- END Back to top button -->

    <!-- Scripts -->
    <script src="assets/js/app.min.js"></script>
    <script src="assets/js/custom.js"></script>

  </body>
</html>
Font icons

Icons

Symbolizes a command, action, or information using UI icons

TheGuide has included FontAwesome and Themify Icons in its package and will update it regularly by new releases. So you're safe to use any icon from FontAwesome or Themify Icons websites.

Project-wide use

Helper Classes

Some other helper classes in addition to Bootstrap's helper classes

Class name Description
.no-padding Equals to padding: 0;
.no-padding-x Equals to padding-left: 0; padding-right: 0;
.no-padding-y Equals to padding-top: 0; padding-bottom: 0;
.no-padding-top Equals to padding-top: 0;
.no-padding-bottom Equals to padding-bottom: 0;
.no-margin Equals to margin: 0;
.no-margin-x Equals to margin-left: 0; margin-right: 0;
.no-margin-y Equals to margin-top: 0; margin-bottom: 0;
.no-margin-top Equals to margin-top: 0;
.no-margin-bottom Equals to margin-bottom: 0;