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.
Once downloaded, unzip the compressed folder and you’ll see something like this:
thesaas/ ├── 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.
You can see this folder contains following structure:
assets/ ├── 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.)
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.