The World’s #1 Bootstrap 4 HTML, Angular 8, React & VueJS
Admin Dashboard Theme Framework
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 |
| default | Default 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/default/[demo]/tools/gulp.config.json |
| index.html | Main page template. |
| src | Source folder. |
| assets | 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. |
| index.html | Main page template. |
| 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 |
Source File Structure
Below table explains Metronic's components file structure including Javascript, SCSS, etc. The table below start
with the path:
[metronic]/theme/default/[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 |
| assets | Assets folder |
| js | Javascript files |
| components | Theme components styles |
| integration | 3rd-party vendors that are included with the theme since they does not exist in NPM. |
| layout | The theme base layout for current demo |
| 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 |
| custom | Theme custom style examples |
| global | Global scss files |
| components | Theme components styles |
| integration | Integration with 3rd party plugins or frameworks |
| layout | The theme base layout for current demo |
| _functions.scss | Base scss functions |
| _include.scss | A file to link all other scss files structure |
| _init.scss | Base style initialization file |
| _mixins.scss | Common mixins (functions) for the scss |
| _config.scss | Global SASS config file |
| pages | Custom pages SASS files. |
| style.scss | Main SCSS file of demo. |
I run a team of 20 product managers, developers, QA and UX resources. Previously we designed everything ourselves. For our newest platform we tried out Metronic. I cannot overestimate the impact Metronic has had. It's accelerated development 3x and reduced QA issues by 50%. If you add up the reduced need for design time/resources, the increase in dev speed and the reduction in QA, it's probably saved us $100,000 on this project alone, and I plan to use it for all platforms moving forward.
The flexibility of the design has also allowed us to put out a better looking & working platform and reduced my headaches by 90%. Thank you KeenThemes!
Powerful Framework
Everything within Metronic is customizable globally to provide limitless unique styled projects
Multi Demo
Choose a perfect design for your next project among hundreds of demos
Limitless Components
A huge collection of components to power your application with the latest UI/UX trands
Angular 8 & React Support
Enterprise ready Angular and React integration with built-in authentication module and many more
Bootstrap 4
Metronic deeply customizes Bootstrap with native look and feel
Exclusive Datatable Plugin
Our super sleek and intuitive Datatable comes packed with all advanced CRUD features
75,000+ Strong
Metronic is the only theme trusted by over 70,000 developers world wide
Continuous Updates
Lifetime updates with new demos and features is guaranteed
Quality Code
Metronic is written with a code structure that all developers will be able to pick up easily and fall in love