The World’s #1 Bootstrap 4 HTML, Angular 10, React, VueJS & LaravelAdmin Dashboard Theme
Files Structure
Overview
Metronic comes with a flexible file structure that can be easily used for small to large scope projects. This
section will explain Metronic's entire file structure and how to adapt
it to your project.
| Path | Description |
|---|---|
| doc | The theme documentation |
| theme | Main theme folder |
| html | Default HTML package folder. |
| [demo1] | Demo's directory(e.g: demo1, demo2, demo3, ...) |
| dist | This folder will be generated after run the gulp compile. |
| assets | Contains generated assets (JS, CSS, images, fonts, etc.) from build tools. Refer to folder [metronic]/theme/html/tools/gulp.config.json |
| index.html | Main page template. |
| src | Source folder contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated by gulp tasks onto assets folder for production usage. Refer to Source File Structure below. |
| tools | Build tools for development and deployment |
| gulp | The build tools gulp tasks for bundle and minify the js and css files and compile sass files. |
| webpack | The build tools webpack for bundle and minify the js and css files and compile sass files. |
| node_modules | Yarn/NPM package installation folder |
| build.config.json | Contains theme assets configuration in json file. |
| gulpfile.json | Gulp tasks main script. All the build tool tasks are grouped in this script |
| package.json | Yarn/NPM package manager config file |
| webpack.config.json | Webpack main logic config file |
| [apps] | Other applications integration. Eg. Angular, React, Vue, etc. |
Source File Structure
Below table explains Metronic's components file structure including Javascript, SCSS, etc. The table below start
with the path:
[metronic]/theme/html/[demo]/src/
| Path | Description |
|---|---|
| src | This source folder contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated upon running build tasks onto the assets folder for production usage |
| js | Javascript files |
| components | Theme components plugins |
| layout | The theme base layout for current demo |
| pages | Custom pages JS files. |
| vendors | 3rd-party vendors that are included with the theme since they does not exist in NPM. |
| media | Media files(images, videos, etc...) |
| plugins | 3rd-party vendors that are included with the theme since they does not exist in NPM. |
| sass | SCSS files |
| base | Base functions and mixins of SCSS. |
| components | Theme components styles |
| layout | The theme base layout for current demo |
| pages | Custom pages SASS files. |
| themes | Multiple themes for the template skin and changeable. |
| vendors | Integration with 3rd party plugins or frameworks |
| _init.scss | Base style initialization file |
| style.scss | Main SCSS file of demo. |