Get 2024 Templates Mega Bundle! 14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Home / Learn / Tutorials / Keen Tutorials / An Overview of Keen's File Structure

An Overview of Keen's File Structure

By Shane L on 3 years ago

Here is a quick rundown of Keen’s file structure to get yourself familiarized with where all of our functions, folders and more are placed.

When you first unpack Keen, you will be greeted with 3 main folders:

  1. Design
  2. Doc
  3. Theme

Design Folder

The design folder is where we place our design file preview. Our design file is made using Figma, and you can signup for a free account here (https://www.figma.com/) to start viewing it.

Doc Folder

Next up, our documentation folder is where we place our entire official documentation (located here: https://keenthemes.com/keen/?page=docs) for your offline viewing. It is best for you to start viewing the offline documentation via the index.html file.

Theme Folder

This is where we place Keen’s entire Admin Dashboard Template solution in. You will notice some demo folders and a tools folder within it.

Keen’s Demos

All the demos for keen are packed neatly in individual folders. Each demo folder is independent from each other demo. Therefore, if you are working with demo 1 for a specific project, you will only need to be working within the demo1 folder. You do not need to include all other demo folders within your project.

Each of our demos are split into 2 main folders: dist and src.

The dist folder is where we place all our HTML files for Keen. If you need to locate a certain HTML code segment from the demo, all you need to do is look at the page URL you are browsing, for example “https://preview.keenthemes.com/keen/demo1/custom/apps/inbox.html”, then you can easily find the HTML file it’s using from the path after “keen”. In this case, it is located under demo1 > custom > apps > inbox.html

Our src folder is where we place all of Keen’s assets within each organized folder, such as JS, SCSS, media files and plugin customizations, respectively. For example, if you need to do any JS work, you can browse our JS folder to look for the files you need to work on. Similarly with every other asset.

Our Build Tools

Within the tools folder, you will find a number of files and folders. These files and folders are built to support both Gulp and Webpack workflows. This is also the folder path that you should use to run your commands within the command prompt or terminal.

Gulp files

Our Gulp file consists of 1 main config file called gulp.config.json and all of our build functions are packed within a folder called gulp. Files within the gulp folder consists of all our Gulp build functions. You do not need to modify any files within this folder.

The gulpfile.js is just a file that consists of our gulp build commands for you to run on your command prompt (for Windows) or terminal (for Macs). You do not need to modify this file as well.

To customize our Gulp build tool, you will just work on our gulp.config.json file. You can watch our video tutorial here on how customize it here: https://keenthemes.com/tutorials/keen-build-assets-with-gulp.

Webpack files

Our Webpack build tools consists of a number of files. Our main Webpack config is located in the tools folder called webpack.config.js. We then initialize our core scripts within the scripts.demo1.js within the webpack folder. Lastly, we have our plugins set up within the plugins folder. Mandatory plugins initialized via the plugins.js and plugins.scss files and all other custom plugins initialized within each individual folder under the custom folder.

You can view our video tutorial explaining our Webpack build tools coming soon!

You can also check out our video on Keen’s File Structure overview located here: https://keenthemes.com/tutorials/keen-file-structure-overview

Shane L
Shane L | Keenthemes Team

Comments (0)

Text format options
Here's a how to add some HTML formatting to your comment:
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li> or <ol><li> to make lists
  • <h3> or <h4> to make headings
  • <pre></pre> for code blocks
  • <code></code> for a few words of code
  • <a></a> for links
  • <img> to paste in an image (it'll need to be hosted somewhere else though)
  • <blockquote></blockquote> to quote somebody
  • happy :)
  • shocked :|
  • sad :(
Text format options
Here's a how to add some HTML formatting to your comment:
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li> or <ol><li> to make lists
  • <h3> or <h4> to make headings
  • <pre></pre> for code blocks
  • <code></code> for a few words of code
  • <a></a> for links
  • <img> to paste in an image (it'll need to be hosted somewhere else though)
  • <blockquote></blockquote> to quote somebody
  • happy :)
  • shocked :|
  • sad :(

Popular Blog Posts

Metronic 8 is Live!

Keenthemes team elevates the most advanced and multifunctional admin dashboard theme to a new lev...

5 reasons to use Bootstrap admin template

It’s no doubt that when a development takes longer to complete, additional costs to integra...

Getting Started with Datatables

Datatables are basically HTML tables that consists of large quantities of data within each row...