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);