Keen - The Ultimate Multi-Demo Bootstrap Admin Theme

The most complete UI/UX template solution for today's web projects of any size

Files Structure


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
docsThe theme documentation
themeMain theme folder
classicClassic package folder.
demosDemos folder.
[...]List of demo directories. Eg. default, demo2, demo3, etc.
assetsList of 3rd-Party vendor's plugins. Refer to Classic Package page for the vendor files structure.
defaultDefault package folder.
distTheme's preview folder.
[...]List of demo folders(e.g: default, demo2, demo3, etc).
assetsContains generated assets (JS, CSS, images, fonts, etc.) from build tools. Refer to folder [root]/theme/default/tools/conf/default.json
componentsTheme's component demos.
customTheme\s custom page demos.
index.htmlMain page.
srcSource 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
[...]Refer to Source File Structure below.
toolsDevelopment and deployment tools
gulpThe build tools gulp tasks for bundle and minify the js and css files and complile sass fi,les.
node_modulesNPM package installation folder
confContains theme assets configuration in json file.
default.jsonTheme configuration for default version
gulpfile.jsonGulp tasks main script. All the build tool tasks are grouped in this script
package.jsonNPM package manager config file

Source File Structure

Below table explains Keen's components file structure including Javascript, SCSS, etc. The table below start with the path: [root]/theme/default/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
mediaMedia files(images, videos, etc...)
themeTheme level source files
appApplication level source files
bundleJS files that will be concatenated and minified into a single bundle file.
demo-panel.jsThe JS file for offcanvas init the demo list panel.
lib.jsA helper functions for chart initializations.
offcanvas-panel.jsOffcanvas initialization JS script.
quick-panel.jsQuick-panel initialization JS script.
quick-search.jsQuick-search initialization JS script.
customCustom JS files that indivdually minified and moved to the assets folder for on-demand usage
blogBlog page components. Eg. blog post, blog list, blog list grid view, etc.
errorError page components
generalGeneral components folder.
componentsTheme's component demos.
customTheme\s custom page demos.
dashboard.jsDashboard page initialization JS scripts.
invoiceInvoice page components
pricingPricing page components
userUser page components. Eg. login page, profile page, etc.
demoDemo level source files
[...]Demo's directory(e.g: default, demo2, demo3, ...)
mediaOptional folder that contain images.
sassDemo level SASS files (demo layout code).
scriptsDemo level JS files.
bundleDemo's bundlable JS files.
aside-secondary.jsOptional file for Secondary's Aside panel for initialization.
layout.jsDemo's main initialization class.
frameworkTheme's framework components
componentsCustom SCSS components
baseBase components.
foundationRequired components for the layout.
vendors3rd-Party plugins component overrides.
coreCore libraries. Eg. Bootstrap, Angular
bootstrapCustomize and override Bootstrap components.
extendKeen's custom SCSS Bootstrap
_extend.scssExtend and Override Bootstrap Components SCSS.
_variables.scssCustom Bootstrap variables.
boostrap.scssMain Bootstrap include file called in the demo's main style.scss file.
libGlobal required JS and SASS codes.
_functions.scssGlobal functions for SASS.
mixin.scssGlobal mixins for SASS.
app.jsGlobal available JS functions to initialize the theme's base features.
util.jsGlobal available Pure JS helper functions for manipulation DOM
vendors3rd-Party plugins style customization SCSS files
_config.scssThe main SCSS framework config
_include.scssThe main SCSS include file