[root] is refers to the package type version.
defaultis the default version based on HTML, jQuery and Bootstrapangularis the Angular version built with Angular-CLI
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 |
|---|---|
| dist | Theme versions folder |
| docs | The theme documentation |
| .. | Demo contents |
| 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 source files |
| media | Media(image, video, font files, etc) files |
| sass | Sass source files |
| vendors | 3rd party libraries |
| 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 |
| themes/metronic/[version_package].conf.json | Metronic build config file. Depends on which version package, either default or angular. Here you can configure the build accord,ing to your requirements |
| gulpfile.json | Gulp tasks main script. All the build tool tasks are grouped in this script |
| package.json | NPM package manager config file |
| .. | Another version package |
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]/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]/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