Overview

DirectoryHub is a multipurpose powerful and super flexible responsive Bootstrap 4 directory and listing template for modern web sites of any kind!

10+ different layouts, 1000+ commented HTML pages, 1000+ components with various configurable features, 100+ plugins and extensions and many more bonuses such as the Starter kit with a set of blank pages will make your developer’s life so much easier! DirectoryHub is fully responsive and looks perfect on all devices including mobiles and tablets.

Dozens of powerful and easy to modify and to configure components (thanks to scss/sass!) can become the foundation of your idea and can quickly turn it into reality as well as it’s ready to be integrated into your existing project.

Built on top of modern and reliable libraries our theme adopts best practices both of Web and Mobile segments. Our thoughtful approach to choosing most convenient modern technologies along with our careful work allows DirectoryHub to be seamlessly integrated into your project bringing A LOT of value and making your life A LOT easier in the long run!

DirectoryHub is fully responsive listing template built with modern web technologies: Bootstrap 4 Framework, HTML5 and CSS3 (SASS). It has huge collection of reusable UI components and it’s also integrated with the latest jQuery plugins.

The theme itself is very lightweight and easily customizable, it’s designed with both end users and developers in mind so that it not only contains presentable components but also allows developers to easily configure and modify the components to fit all possible needs.

Large number of components is going to make your project growing fast and easy. DirectoryHub works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone device.

Support

This documentation is to help you understand the template's structure. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML, CSS and JS knowledge is required to customize this template.

If you have any questions that are beyond the scope of this help file, please feel free to get in touch.
Support requests can go through the form on my ThemeForest profile page or via email. Support for my items includes:

Item support does not include:

Before seeking support please:

Installing Nodejs, Npm, Gulp

To install Nodejs, Npm, Gulp, please take the following steps:

For Linux:
sudo apt-get install nodejs
sudo apt-get install npm
sudo npm install -g gulp
For Windows:

Click the link https://nodejs.org/en/download/ and download the installation package of version 6.9.5, then run the command: 

npm install -g gulp

Then you need to go to the root directory of the downloaded and unpacked archive, and run the command:

npm install

This command will install the necessary libraries for Nodejs, as a result, a file called node_modules must appear in the root directory, check if it is there. That's all you need to work with the source code, now let us examine the structure of directories.

Directory Structure

Root Directory

The root directory contains files:

  • dist - ready templates, styles, scripts, and images are located here.
  • docs - current documents
  • node_modules - modules for Nodejs needed to work with a source code.
  • src - source code of html templates, sass styles and scripts. The folder src/scss stores sass styles, the folder src/vendors stores javascript libraries, and the folder src/fonts stores fonts, src/js stores javascript files, src/images stores images and avatars.

Directory dist

This directory receives ready-to-use html templates with styles and scripts. This folder contains all types of layouts for a primary theme only.

Connecting files and libraries

All libraries are stored in the root directory of the template dist/vendors. We do not change the original styles of all libraries that are used in the DirectoryHub template, instead we create a separate file that contains the styles for the template.

Connection is carried out as follows, for example:

<!-- BEGIN HEAD -->
<head>
    <meta charset="UTF-8">
    <title>DirectoryHub - Multipurpose Directory & Listings HTML Template</title>

    <meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link rel="stylesheet" type="text/css" href="vendors/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="vendors/tether/css/tether.min.css">
    <link rel="stylesheet" type="text/css" href="vendors/animate-css/animate.css">
    <link rel="stylesheet" type="text/css" href="fonts/circular/styles.css">
    <link rel="stylesheet" type="text/css" href="fonts/open-sans/styles.css">
    <link rel="stylesheet" type="text/css" href="fonts/iconfont/styles.css">
    <!-- END GLOBAL MANDATORY STYLES -->

    <link rel="stylesheet" type="text/css" href="vendors/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="vendors/leaflet/leaflet.css">
    <link rel="stylesheet" type="text/css" href="vendors/owl-carousel/assets/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="vendors/jquery-flexdatalist/jquery.flexdatalist.min.css">
    <link rel="stylesheet" type="text/css" href="css/vendors/jquery-flexdatalist/jquery.flexdatalist.min.css">

    <!-- BEGIN THEME STYLES -->
    <link rel="stylesheet" type="text/css" href="css/style.min.css">
    <!-- END THEME STYLES -->
</head>
<!-- BEGIN HEAD -->

Themes

If you want to create your own color scheme, just copy the primary theme and change colors in the styles.

Resources

Plugins