File Structures
A guide to understanding how Thedir is structured and organized.
Download package #
Download package contains eight main demo/
, document/
, elements/
,
images/
, js/
, sass/
, starter/
and vendors/
folders.
Once downloaded, unzip the compressed folder and you'll see something like this:
thedir/
├── demo/
│ ├── automotive-service/
│ ├── food-and-restaurant/
│ ├── health-and-medical/
│ ├── hotel/
│ ├── job/
│ ├── service-finder/
│ ├── shopping/
├── document/
├── elements/
│── images/
│ ├── banner/
│ ├── blog/
│ ├── listing/
│ ├── counter/
│ ├── logo-map/
│ ├── other/
│ ├── shop/
│── js/
│── sass/
│ ├── elements/
│ ├── mixins/
│ ├── pages/
│ ├── utilities/
│ ├── vendor/
│ ├── vendors/
├── stater/
├── vendors/
│ ├── air-datepicker/
│ ├── bootstrap/
│ ├── bootstrap-slider/
│ ├── counter/
│ ├── font-awesome/
│ ├── hc-ticky/
│ ├── isotope/
│ ├── magnific-popup/
│ ├── popper/
│ ├── prismjs/
│ ├── slick/
│ ├── tinymce/
│ ├── uploader/
│ ├── waypoints/
This is the most basic form of Thedir : precompiled files for quick drop-in usage
in nearly any web project. We provide compiled CSS and JS (style.css
and
app.js
),
as well as compiled and minified CSS and JS (style.min.css
and app.min.js
).
JavaScript structure #
Core JavaScript
The foundation of the JavaScript structure in Thedir is based on one main object
which does not change the root when the new functionalities are added, but
instead, it only expands without affecting the behavior of the core object. The
name of the object is APP
and the content of this object looks like this:
(function ($) {
"use strict";
var APP = {},
$body = $('body'),
$window = $(window),
$siteWrapper = $('#site-wrapper'),
$document = $(document);
APP.isMobile = function () {
return window.matchMedia('(max-width: 1200px)').matches;
};
/*--------------------------------------------------------------
/* Site scripts
--------------------------------------------------------------*/
..............
if ($.fn.dropzone) {
Dropzone.autoDiscover = false;
}
$document.ready(function () {
APP.headerSticky.init();
APP.headerMobile.init();
APP.sidebarSticky.init();
APP.offCanvas.init();
APP.slickSlider.init();
APP.util.init();
APP.isotope.init();
APP.animation.init();
APP.custom.init();
APP.counter.init();
APP.datepicker.init();
APP.countdown.init();
APP.tinymce.init();
APP.uploader.init();
});
})(jQuery);