logo Multi Demo Bootstrap Admin Dashboard Theme

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
htmlDefault HTML package 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/tools/gulp.config.json
index.htmlMain page template.
srcSource 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.
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
[apps]Other applications integration. Eg. Angular, React, Vue, etc.

Source File Structure

Below table explains Keen's components file structure including Javascript, SCSS, etc. The table below start with the path: [keen]/theme/[demo]/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
jsJavascript files
componentsTheme components plugins
layoutThe theme base layout for current demo
pagesCustom pages JS files.
vendors3rd-party vendors that are included with the theme since they does not exist in NPM.
mediaMedia files(images, videos, etc...)
plugins3rd-party vendors that are included with the theme since they does not exist in NPM.
sassSCSS files
baseBase functions and mixins of SCSS.
componentsTheme components styles
layoutThe theme base layout for current demo
pagesCustom pages SASS files.
themesMultiple themes for the template skin and changeable.
vendorsIntegration with 3rd party plugins or frameworks
_init.scssBase style initialization file
style.scssMain SCSS file of demo.