Documentation v8.1.6

Preview Downloads Purchase

Overview

Metronic comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain the entire file structure and how to adapt it to your project.
File/Folder Description
design The theme's Figma design files.
theme The main theme folder.
dist The destination folder that contains of the html templates and compiled assets.
assets Static assets(js, css, images, fonts) compiled from the source folder theme/src.
css Static stylesheet files compiled from the Sass source files theme/src/sass.
js Static Javascript files compiled from the Javascript source files theme/src/js.
media Static media files(images, illustrations, svg, etc) compiled from the media source files theme/src/media.
plugins 3-rd party plugins(js, css, fonts, images) bundles compiled from the media source files tools/node_modules, src/js//vendorsand src/sass//vendors.
global Global plugins folder that contains plugins.bundle.cssand plugins.bundle.jsto be included in all pages.
custom Custom plugins bundleds to be included in specific pages on demand.
index.html The main template that coontains the page layout and content.
src The source folder that contains of the Sass, Javascript and media files. Required only for development and can be excluded for production.
js Javascript source files compiled to theme/assets/js.
components The core components source Javascript files bundled in theme/assets/js/scripts.bundle.jsand globally included in all pages.
custom Custom Javascript files moved to theme/assets/js/customand used in specific pages on demand.
layout The core layout source Javascript files bundled in theme/assets/js/scripts.bundle.jsand globally included in all pages.
vendors 3-rd party plugins global initialization Javascript files bundled in theme/assets/plugins/global/plugins.bundle.jsand globally included in all pages.
widgets The dashboard widgets source Javascript files bundled in theme/assets/js/widgets.bundle.jsand used in specific pages on demand.
plugins The source Javascript, Stylesheet, font and images files of custom 3rd-party and in-house plugins bundled into theme/assets/plugins/global/plugins.bundle.jsand theme/assets/plugins/global/plugins.bundle.css.
media The source files of images, illustrations, icons and flags moved to theme/assets/mediato use for the core layout and other demonstration purposes.
tools The theme build tools for command line assets compilation tasks. Required only for development and can be excluded for production.
packages.json The project packages config file used by Yarnor Npmpackagers to managers the dependencies.
gulp Gulp build tasks to compile the source files theme/srcinto the static assets files theme/assets.
gulp.config.js The main config of Gulp build tasks.
webpack Webpack build tasks to compile the source files theme/srcinto the static assets files theme/assets.
webpack.config.js The main config of Webpack build tasks.
README.md A tiny help file that privides a quick guide to get started with Metronic.
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Video Tutorials
From guides and how-tos, to live demos and code examples to get started right away.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now