The Ultimate Bootstrap & Angular 6 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 | |
| angular | Angular demo projects |
| dist | Demo list |
| [..] | Demo contents |
| src | Source folder contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage |
| js | Core JS files. Refer to Javascript File Structure below |
| media | Media list such as attachement files, images, etc. |
| sass | Styles in sass. Refer to SASS File Structure below |
| vendors | List of 3rd party vendor's plugins. |
| tools | Development and deployment tools |
| gulp | The build tools gulp tasks for bundle and minify the js and css files and complile sass fi,les. |
| node_modules | NPM package installation folder |
| conf | Contains theme assets configuration in json file. |
| default.json | Theme configuration for default version |
| gulpfile.json | Gulp tasks main script. All the build tool tasks are grouped in this script |
| package.json | NPM package manager config file |
| classic | Classic HTML with no build tools. |
| demos | Demos folder. |
| [...] | List of demo directories. Eg. default, demo2, demo3, etc. |
| vendors | List of 3rd party vendor's plugins. |
| default | Default HTML folder |
| dist | Demo folder |
| [...] | List of demo directories. Eg. default, demo2, demo3, etc. |
| assets | Contains generated assets (JS, CSS, images, fonts, etc.) from build tools. Refer to folder /tools/conf/default.json |
| components | Demo pages with component's sample |
| custom | Custom pages |
| index.html | Index HTML page |
| src | Source folder contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage |
| js | Core JS files. Refer to Javascript File Structure below |
| media | Media list such as attachement files, images, etc. |
| sass | Styles in sass. Refer to SASS File Structure below |
| vendors | List of 3rd party vendor's plugins. |
| tools | Development and deployment tools |
| gulp | The build tools gulp tasks for bundle and minify the js and css files and complile sass fi,les. |
| node_modules | NPM package installation folder |
| conf | Contains theme assets configuration in json file. |
| default.json | Theme configuration for default version |
| gulpfile.json | Gulp tasks main script. All the build tool tasks are grouped in this script |
| package.json | NPM package manager config file |
Javascript
Below table explains Metronic javascript file structure. Is it located based on which version package, either defult or angular.
The table below start with the path:
[root]/theme/default/src/
| Path | Description |
|---|---|
| src | Src(stands for source) contains the raw source code of javasc,ript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage |
| js | Javascript files |
| app | Application level(global) javascript files |
| base | Application level base javascript files are minified and concatenated into the base bundle, assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name. |
| custom | Application level custom javascript files are minified and moved to assets/app/js/ to be included on demand. |
| demo | Demo level javascript files |
| default | Default demo javascript files |
| base | Demo level base javascript files are minified and concatenated into the base bundle a,ssets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name. |
| custom | Demo level custom javascript files are minified and moved toassets/demo/[demo_id]/custom/* to be included on demand. demo_id is the selected demo name. |
| ... | Other demos |
| framework | Framework components javascript files are minified and concatenated into the base bundle assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name. |
| snippets | Snippets are custom templates created for certain requirements by customizing and extending th,e theme's base components and plugins |
| base | Base snippets javascript files are minified and concatenated into the base bundle assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name. |
| custom | Application level custom javascript files are minified and moved toassets/snippets/* to be included on demand. |
SASS
Below table explains Metronic SASS file structure. Is it located based on which version package, either defult or angular.
The table below start with the path:
[root]/theme/default/src/
| Path | Description |
|---|---|
| src | Src(stands for source) contains the raw source code of ,javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage |
| sass | Javascript files |
| demo | Demo level sass files |
| default | Default demo sass files |
| style.css | style.scss is compiled, minified and concatenated into the base bundle styles,heet assets/demo/[demo_id]/base/style.bundle.css to be included globally. demo_id is the selected demo name. |
| .. | Other demos |
| framework | Framework scss files are compiled, minified and concatenated into the base bundle demo_id is the selected demo name. |
| snippets | Snippets sass files are compiled, minified and concatenated into the base bundle demo_id is the selected demo name. |
| custom | Application level custom javascript files are minified and moved to assets/snippets/* to be included on demand. |
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 6 Support
Enterprise ready Angular 6 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
60,000+ Strong
Metronic is the only theme trusted by over 60,000 developers world wide
Continuous Updates
Lifetime updates with new demos and features is guaranteed
Quality Code
Metronic is writer with a code structure that all developers will be able to pick up easily and fall in love