UI Kit

Quick Setup

This document is aimed to run a Metronic based web project in just 10 minutes. It's assumed that you already purchased a license.

Download your prefered HTML Demo from Metronic Downloads by providing your Purchase Code.
Refer to File Structure and install Gulp or Webpack build tools to generate assets for your project.
The build tools are required in your development environment only just to build the assets upon code changes in the source folder and the end product uses the compiled assets folder in server.
Editing the compiled assets is not recommended. Instead, edit the source code in src folder and compile the changes into assets folder using Gulp or Webpack build tools.
Use Layout Builder to configure a layout with prefered options and export it as HTML partials for quicker server side integration. Change the demo number in the URL as ../demo5/layout-builder..html to access other demos Layout Builder.
Unpack the exported HTML partials and use your server side language to construct and render your page by including the layout partials according to the instruction given in the HTML code comments.
Refer to Template Markup and include mandatory and optinal assets for your project.
Refer to RTL Version and Dark Mode guides if your project requires the RTL and Dark mode support.

File Structure

Metronic comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain the entire file structure and how to adapt it to your project.

File/Folder	Description
`design`	The theme's Figma design files.
`theme`	The main theme folder.
`dist`	The destination folder that contains of the html templates and compiled assets.
`assets`	Static assets(js, css, images, fonts) compiled from the source folder `theme/src`.
`css`	Static stylesheet files compiled from the Sass source files `theme/src/sass`.
`js`	Static Javascript files compiled from the Javascript source files `theme/src/js`.
`media`	Static media files(images, illustrations, svg, etc) compiled from the media source files `theme/src/media`.
`plugins`	3-rd party plugins(js, css, fonts, images) bundles compiled from the media source files `tools/node_modules`, `src/js//vendors` and `src/sass//vendors`.
`global`	Global plugins folder that contains `plugins.bundle.css` and `plugins.bundle.js` to be included in all pages.
`custom`	Custom plugins bundleds to be included in specific pages on demand.
`index.html`	The main template that coontains the page layout and content.
`src`	The source folder that contains of the Sass, Javascript and media files. Required only for development and can be excluded for production.
`js`	Javascript source files compiled to `theme/assets/js`.
`components`	The core components source Javascript files bundled in `theme/assets/js/scripts.bundle.js` and globally included in all pages.
`custom`	Custom Javascript files moved to `theme/assets/js/custom` and used in specific pages on demand.
`layout`	The core layout source Javascript files bundled in `theme/assets/js/scripts.bundle.js` and globally included in all pages.
`vendors`	3-rd party plugins global initialization Javascript files bundled in `theme/assets/plugins/global/plugins.bundle.js` and globally included in all pages.
`widgets`	The dashboard widgets source Javascript files bundled in `theme/assets/js/widgets.bundle.js` and used in specific pages on demand.
`plugins`	The source Javascript, Stylesheet, font and images files of custom 3rd-party and in-house plugins bundled into `theme/assets/plugins/global/plugins.bundle.js` and `theme/assets/plugins/global/plugins.bundle.css`.
`media`	The source files of images, illustrations, icons and flags moved to `theme/assets/media` to use for the core layout and other demonstration purposes.
`tools`	The theme build tools for command line assets compilation tasks. Required only for development and can be excluded for production.
`packages.json`	The project packages config file used by `Yarn` or `Npm` packagers to managers the dependencies.
`gulp`	Gulp build tasks to compile the source files `theme/src` into the static assets files `theme/assets`.
`gulp.config.js`	The main config of Gulp build tasks.
`webpack`	Webpack build tasks to compile the source files `theme/src` into the static assets files `theme/assets`.
`webpack.config.js`	The main config of Webpack build tasks.
`README.md`	A tiny help file that privides a quick guide to get started with Metronic.