An Overview of Metronic's File Structure

Here is a quick rundown of Metronic’s file structure to get yourself familiarized with where all of our functions, folders and more are placed.

When you first unpack Metronic, you will be greeted with 3 main folders:

  1. Design
  2. Doc
  3. Theme

Design Folder

The design folder is where we place our design file preview. Our design file is made using Figma, and you can signup for a free account here (https://www.figma.com/) to start viewing it.

Doc Folder

Next up, our documentation folder is where we place our entire official documentation (located here: https://keenthemes.com/metronic/?page=docs) for your offline viewing. It is best for you to start viewing the offline documentation via the index.html file.

Theme Folder

This is where we place Metronic’s entire Admin Dashboard Template solution in and it is neatly packed with each framework angular, html, html_laravel, react and vue respectively. Each folder consists of all files and folders necessary for its respective framework solution. For example, for the angular folder, we have Metronic’s Angular version neatly packed within it.

In this article, we will be mainly focusing on our html framework because it is the most extensive and expandable framework. For all other frameworks, if you are already familiar with the framework, the files and folder structure should be similar with what you have already known and loved.

Metronic’s HTML Demos

All the demos for Metronic are packed neatly in individual folders within the html folder. Each demo folder is independent from each other demo. Therefore, if you are working with demo 1 for a specific project, you will only need to be working within the demo1 folder. You do not need to include all other demo folders within your project.

Each of our demos are split into 2 main folders: dist and src.

The dist folder is where we place all our HTML files for Metronic. If you need to locate a certain HTML code segment from the demo, all you need to do is look at the page URL you are browsing, for example “https://preview.keenthemes.com/metronic/demo1/custom/apps/inbox.html”, then you can easily find the HTML file it’s using from the path after “metronic”. In this case, it is located under demo1 > custom > apps > inbox.html

Our src folder is where we place all of Metronic’s assets within each organized folder, such as JS, SCSS, media files and plugin customizations, respectively. For example, if you need to do any JS work, you can browse our JS folder to look for the files you need to work on. Similarly with every other asset.

Our Build Tools

Within the tools folder, you will find a few files and folders. These files and folders are built to support both Gulp and Webpack workflows. This is also the folder path that you should use to run your commands within the command prompt or terminal.

Gulp files

Our Gulp file consists of 1 main config file called gulp.config.json and all of our build functions are packed within a folder called gulp. Files within the gulp folder consists of all our Gulp build functions. You do not need to modify any files within this folder.

The gulpfile.js is just a file that consists of our gulp build commands for you to run on your command prompt (for Windows) or terminal (for Macs). You do not need to modify this file as well.

To customize our Gulp build tool, you will just work on our gulp.config.json file. You can watch our video tutorial here on how customize it here: https://keenthemes.com/tutorials/build-assets-with-gulp.

Webpack files

Our Webpack build tools consists of several files. Our main Webpack config is in the tools folder called webpack.config.js. We then initialize our core scripts within the scripts.<demo>.js within the webpack folder, where the <demo> represents the demo name or folder. Lastly, we have our plugins set up within the plugins folder. Mandatory plugins initialized via the plugins.js and plugins.scss files and all other custom plugins initialized within each individual folder under the custom folder.

You can view our video tutorial explaining our Webpack build tools here: https://keenthemes.com/tutorials/build-assets-with-webpack

 

You can also check out our video on Metronic’s File Structure overview located here: https://keenthemes.com/tutorials/metronic-file-structure

Stockholm-icons / General / User Created with Sketch. by Shane
Stockholm-icons / Communication / Group-chat Created with Sketch. 0 Comments
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch. 1 month ago

Popular Tutorials

Metronic Bootstrap Admin Installation with Gulp

Having trouble trying to get Metronic running on your local machine? Check this out. We have outl...

An Overview of Metronic's File Structure

Having some trouble familiarizing with Metronic's Bootstrap Admin Template files? Check this a...

Javascript Customization With Metronic Bootstrap Admin Theme

Learn how to customize and organize Metronic Bootstrap Admin Theme's Javascript code with Gulp or...

Stay Connected

Need Some More Info?

Support Channels

Stockholm-icons / Code / Github Created with Sketch.
Github Channel

Get access to our Metronic and Keen themes private Github repositories.

Stockholm-icons / General / Clipboard Created with Sketch.
Documentation

Check our extensive Metronic and Keen themes documentation pages.

Stockholm-icons / Communication / Group Created with Sketch.
Reach Our Support

Contact our support team via support@keenthemes.com for any pre-sale and the theme support questions.

FAQ Highlights

Full FAQ Stockholm-icons / Navigation / Arrow-right Created with Sketch.

In short, administrator themes are production ready frontend UI/UX templates that you can use and integrate into your project. In some cases, projects that utilize admin themes may not need to a UI/UX designer or a frontend developer to complete their project.

Admin themes usually come in HTML with CSS and JS all readily packed within it’s application, therefore the project development will only require to have the backend logic sorted and integrate that backend with the admin theme to have a complete working application.

Whilst there are free admin themes available, premium admin themes are where things get more interesting.

The purchased package includes a full source code of SASS, Javascript, HTML, media, compiled assets, build config and documentation files.

All demos, apps, pages, components and plugins shown in the preview will be included as well.

Each purchased license is limited for a single usage, therefore for each usage a separate license is required.
No, you don't have to. All future updates are free of charge per your purchased license.
Purchased licenses have no expiration date and they do not require any recurring payment.
Yes, absolutely. You can reuse your solution that is based on Metronic in multiple projects by purchasing required number of licenses. Each usage must have a separate license.
Stockholm-icons / Navigation / Up-2 Created with Sketch.