The Ultimate Bootstrap & Angular 7 Admin Theme Framework For Next Generation Applications
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 |
|---|---|
| docs | The theme documentation |
| theme | Main theme folder |
| classic | Classic package folder. |
| assets | Compiled theme css,js files and 3rd-Party vendors plugins. Refer to Classic Package page for the vendor files structure. |
| demos | Demos html files folder. |
| [demo1] | List of demo directories. Eg. demo1, demo2, demo3, etc. |
| default | Default package folder. |
| 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. |
| [demo1] | List of demo folders(e.g: demo1, demo2, demo3, etc). |
| assets | Contains generated assets (JS, CSS, images, fonts, etc.) from build tools. Refer to folder [root]/theme/default/tools/build.json |
| 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 complile sass fi,les. |
| node_modules | Yarn/NPM package installation folder |
| build.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 |
Source File Structure
Below table explains Metronic's components file structure including Javascript, SCSS, etc. The table below start
with the path:
[root]/theme/default/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 |
| theme | Theme JS scripts |
| core | Core JS scripts |
| demos | Demo level source files |
| [demo1] | Demo's directory(e.g: demo1, demo2, demo3, ...) |
| layout.js | Main JS script that handles the layout. |
| vendors | 3rd-party vendors that are included with the theme since they does not exist in NPM. |
| media | Media files(images, videos, etc...) |
| sass | SCSS files |
| theme | Theme level source files |
| core | Core styles |
| demos | Demo level source files |
| [demo1] | Demo's directory(e.g: demo1, demo2, demo3, ...) |
| _config.scss | Demo level SASS config file that overrides the global SASS config file. |
| style.scss | Main SCSS file of demo. |
| pages | Custom pages SASS files. |
| _config.scss | Global SASS config file |
| demos | Demos HTML templates. |
| [demo1] | List of demo directories. Eg. demo1, demo2, demo3, etc. |
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 7 Support
Enterprise ready Angular 7 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
70,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