Directory structure In this article, we look into the directory structure of downloaded package.

The default TheAdmin application 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:

theadmin/
├── starter/
└── theme/

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

Starter

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 TheAdmin styles and writing your custom Javascript codes (read more). The assets directory is the most important part of the starter template.

Theme

This folder contains source code and demo of TheAdmin. You may wish to import code to your project from code samples provided in this folder, but we do not recommend to start your project from this directory. You can find all of SCSS files and unconcated JS files. Also, a grunt file included in this folder to build and generate distribution directory. We highly recommend you to don't create your own admin from this file. If you do that, we can't grantee that you can easily upgrade your application to the next versions and due to your changes, we probably can't support your custom built template.

---

Assets directory

You can see this folder contains following structure:

starter/
├── css/
├── fonts/
├── img/
├── js/
├── plugin/
└── vendor

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

css

The css folder contains following files and directory:

• scss/: A host for all of your scss files
• app.css: Unminified version of TheAdmin styles
• app.min.css: Minified version of TheAdmin styles
• core.min.css: Includes necessary styles from vendors (i.e. Bootstrap, FontAwesome, etc.)
• style.css: Your custom styles
• style.min.css: Minified version of your custom styles
• style.scss: SCSS file to write your custom styles. If you use our provided Grunt task (grunt serve), your SCSS file automatically compiles to style.css and style.min.css every time you modify *.scss files. It would be better to divide your project into several .scss files and use style.scss to import those file. Place those .scss files inside scss/ directory and don't worry about creating subdirectories.

fonts

The fonts directory contains all files that used in our application. 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.

img

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

js

The js folder contains following files:

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

Apart from those files, this folder also includes a directory named script/. Basically, the purpose of this folder is to divide your script.js to several files. Look at the content of the script/ directory:

script/
├── paritials/
├── plugins/
├── config.js
├── main.js
└── util.js

Let's talk about purpose of each file and directory:

• paritials: Divide Javascript of your application into several small pieces and create a separate js file for each of those. You will include this file inside main.js
• plugins: You probably need to write some js code for each 3rd party plugins that you include in your application. Create a js file for each plugin and initialize it in this file. You will include this file inside main.js
• config.js: Configure your application by modifying available configurations.
• main.js: The main skeleton of your script.js file. Import other js files here.
• util.js: Place your custom functions inside this file.

plugin

While we included a lot of different 3rd party plugins inside vendor folder, but there is some possibilities that you would like to use other plugins in your application. This folder is the place that you should place those plugins inside.

vendor

This folder contains all of 3rd party plugins that we used in TheAdmin. To keep your app stable, it's highly recommended to don't update this plugins on your own. We regularly update TheAdmin and these plugins, so you can update all of them at once when we release a new version.