TheSaaS - Html

Directory structure

In this article, we look into the directory structure of the downloaded package. The default directory structure is intended to provide a great starting point for both large and small applications. Of course, you are free to organize your application however you like.

Root directory

Once downloaded, unzip the compressed folder and you’ll see something like this:

├── source/
└── theme/

Let's see what's inside each directory and what are the pupose of each one.


This folder contains source code of TheSaaS. You can find all of the SCSS files here. Also, a grunt file included in this folder to build and generate distribution directory. We highly recommend you to don't start your project from this directory, unless you have enough experience with SCSS files and Grunt. However, if you start your project from this directory, we can't grantee that you can easily upgrade your template to the next versions and due to your changes, we probably can't support your custom built template.


This folder is the most important one for your development. Basically, you should make a copy of this folder to start your project. It's a place for creating HTML files, overwriting TheSaaS styles and writing your custom Javascript codes. The assets directory is the most important part of the project. We look into the assets folder in the rest of article.

Assets directory

You can see this folder contains following structure:

├── css/
├── fonts/
├── img/
├── js/
├── php/
└── plugin/

As you can see, the name of sub-folders represent its responsibility.


The css folder contains following files and directory:

  • core.min.css: Includes necessary styles from vendors (i.e. Bootstrap, FontAwesome, etc.)
  • style.css: Your custom styles
  • thesaas.css: Unminified version of TheSaaS styles
  • thesaas.min.css: Minified version of TheSaaS styles

The fonts directory contains all files that used in our template. If you want to use local fonts and import them in your css file, you'd better to place your font files inside this folder.


This folder houses your image files that you want to use in your template, such as logo, favicon, etc.


The js folder contains following files:

  • core.min.js: Includes necessary scripts from vendors (i.e. jQuery, Bootstrap, Tether, etc.)
  • script.js: Your application configurations and custom Javascripts
  • thesaas.js: Unminified version of TheSaaS Javascripts
  • thesaas.min.js: Minified version of TheSaaS Javascripts

This directory contains all the PHP files which is somehow required for functionality of template, such as sending emails for contact us page. 


While we included necessary 3rd party plugins inside core.min.js, but there is some possibilities that you would like to use other plugins in your template. This folder is the place that you should place those plugins inside.