logo

Keen Admin

Bootstrap 4 Admin Dashboard Framework

Files Structure

Overview

Keen comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain Keen's entire file structure and how to adapt it to your project.
Path Description
docThe theme documentation
themeMain theme folder
[demo1]Demo's directory(e.g: demo1, demo2, demo3, ...)
distThis folder will be generated after run the gulp compile.
assetsContains generated assets (JS, CSS, images, fonts, etc.) from build tools. Refer to folder [keen]/theme/[demo]/tools/gulp.config.json
index.htmlMain page template.
srcSource folder.
assetsSource 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.htmlMain page template.
toolsBuild tools for development and deployment
gulpThe build tools gulp tasks for bundle and minify the js and css files and compile sass files.
webpackThe build tools webpack for bundle and minify the js and css files and compile sass files.
node_modulesYarn/NPM package installation folder
build.config.jsonContains theme assets configuration in json file.
gulpfile.jsonGulp tasks main script. All the build tool tasks are grouped in this script
package.jsonYarn/NPM package manager config file
webpack.config.jsonWebpack main logic config file

Source File Structure

Below table explains Keen's components file structure including Javascript, SCSS, etc. The table below start with the path: [keen]/theme/src/
Path Description
srcThis 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
assetsAssets folder
jsJavascript files
themeTheme JS scripts
coreCore JS scripts
demosDemo level source files
[demo1]Demo's directory(e.g: demo1, demo2, demo3, ...)
layout.jsMain JS script that handles the layout.
vendors3rd-party vendors that are included with the theme since they does not exist in NPM.
mediaMedia files(images, videos, etc...)
sassSCSS files
themeTheme level source files
coreCore styles
demosDemo level source files
[demo1]Demo's directory(e.g: demo1, demo2, demo3, ...)
_config.scssDemo level SASS config file that overrides the global SASS config file.
style.scssMain SCSS file of demo.
pagesCustom pages SASS files.
_config.scssGlobal SASS config file
demosDemos HTML templates.
[demo1]List of demo directories. Eg. demo1, demo2, demo3, etc.

Keen’s Key Features

Keen empowers your project with virtually limitless array of options
to create endless unique 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