This is Metronic 7 documentation!
Upon purchase you can get Metronic 7 version from our Github Repository.
Request Github access
The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel
foundation with a solid light and dark mode design system,
extensive utility classes and custom made in-house components.
View Metronic 8 documentation
To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/
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. |