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
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 |
|---|---|
| docs | The theme documentation |
| theme | Main theme folder |
| classic | Classic package folder. |
| demos | Demos folder. |
| [...] | List of demo directories. Eg. default, demo2, demo3, etc. |
| assets | List of 3rd-Party vendor's plugins. Refer to Classic Package page for the vendor files structure. |
| default | Default package folder. |
| dist | Theme's preview folder. |
| [...] | List of demo folders(e.g: default, demo2, demo3, etc). |
| assets | Contains generated assets (JS, CSS, images, fonts, etc.) from build tools. Refer to folder [root]/theme/default/tools/conf/default.json |
| components | Theme's component demos. |
| custom | Theme\s custom page demos. |
| index.html | Main page. |
| src | Source 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. |
| 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 |
| conf | Contains theme assets configuration in json file. |
| default.json | Theme configuration for default version |
| gulpfile.json | Gulp tasks main script. All the build tool tasks are grouped in this script |
| package.json | NPM 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 |
|---|---|
| src | This 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 |
| media | Media files(images, videos, etc...) |
| theme | Theme level source files |
| app | Application level source files |
| bundle | JS files that will be concatenated and minified into a single bundle file. |
| demo-panel.js | The JS file for offcanvas init the demo list panel. |
| lib.js | A helper functions for chart initializations. |
| offcanvas-panel.js | Offcanvas initialization JS script. |
| quick-panel.js | Quick-panel initialization JS script. |
| quick-search.js | Quick-search initialization JS script. |
| custom | Custom JS files that indivdually minified and moved to the assets folder for on-demand usage |
| blog | Blog page components. Eg. blog post, blog list, blog list grid view, etc. |
| error | Error page components |
| general | General components folder. |
| components | Theme's component demos. |
| custom | Theme\s custom page demos. |
| dashboard.js | Dashboard page initialization JS scripts. |
| invoice | Invoice page components |
| pricing | Pricing page components |
| user | User page components. Eg. login page, profile page, etc. |
| demo | Demo level source files |
| [...] | Demo's directory(e.g: default, demo2, demo3, ...) |
| media | Optional folder that contain images. |
| sass | Demo level SASS files (demo layout code). |
| scripts | Demo level JS files. |
| bundle | Demo's bundlable JS files. |
| aside-secondary.js | Optional file for Secondary's Aside panel for initialization. |
| layout.js | Demo's main initialization class. |
| framework | Theme's framework components |
| components | Custom SCSS components |
| base | Base components. |
| foundation | Required components for the layout. |
| vendors | 3rd-Party plugins component overrides. |
| core | Core libraries. Eg. Bootstrap, Angular |
| bootstrap | Customize and override Bootstrap components. |
| extend | Keen's custom SCSS Bootstrap |
| _extend.scss | Extend and Override Bootstrap Components SCSS. |
| _variables.scss | Custom Bootstrap variables. |
| boostrap.scss | Main Bootstrap include file called in the demo's main style.scss file. |
| lib | Global required JS and SASS codes. |
| _functions.scss | Global functions for SASS. |
| mixin.scss | Global mixins for SASS. |
| app.js | Global available JS functions to initialize the theme's base features. |
| util.js | Global available Pure JS helper functions for manipulation DOM |
| vendors | 3rd-Party plugins style customization SCSS files |
| _config.scss | The main SCSS framework config |
| _include.scss | The main SCSS include file |
Keen’s Key Features
Keen empowers your project with virtually limitless array of options
to create endless unique projects.
- Based On Bootstrap 4.x
- Multi-Demo Concept
- Enterprise Ready Architect
- Integrated Build Tools: Gulp, NPM, Yarn, SASS
- Full RTL Support
- Included Classic(without build tool) Version
- Enterprise Ready Core Framework
- Full SASS Support
- Re-Usable Component System
- And many more...
We truly hope that our love and dedication to produce an incredibly powerful high level solution suits all your project needs. We will continue to deliver incredible enterprise ready solutions for Angular, React and VueJS to serve you better. We sincerely hope you enjoyed using Keen as much as we enjoyed building it.