Overview
Axel HTML Pro comes with a flexible file structure that can be easily used for small to large scope projects.
This section will explain the entire file structure and how to adapt it to your project.
| File/Folder | Description |
|---|---|
design
|
The theme's Figma design files. |
theme
|
The main theme folder. |
dist
|
The destination folder that contains of the html templates and compiled assets. |
assets
|
Static assets(js, css, images, fonts) compiled from the source folder theme/src.
|
css
|
Static stylesheet files compiled from the Sass source files theme/src/sass.
|
js
|
Static Javascript files compiled from the Javascript source files theme/src/js.
|
media
|
Static media files(images, illustrations, svg, etc) compiled from the media source files theme/src/media.
|
plugins
|
3-rd party plugins(js, css, fonts, images) bundles compiled from the media source files
tools/node_modules, src/js//vendors and src/sass//vendors.
|
global
|
Global plugins folder that contains plugins.bundle.css and plugins.bundle.js to be included in all pages.
|
custom
|
Custom plugins bundleds to be included in specific pages on demand. |
index.html
|
The main template that coontains the page layout and content. |
src
|
The source folder that contains of the Sass, Javascript and media files. Required only for development and can be excluded for production. |
js
|
Javascript source files compiled to theme/assets/js.
|
components
|
The core components source Javascript files bundled in theme/assets/js/scripts.bundle.js and globally included in all pages.
|
custom
|
Custom Javascript files moved to theme/assets/js/custom and used in specific pages on demand.
|
layout
|
The core layout source Javascript files bundled in theme/assets/js/scripts.bundle.js and globally included in all pages.
|
vendors
|
3-rd party plugins global initialization Javascript files bundled in theme/assets/plugins/global/plugins.bundle.js and globally included in all pages.
|
widgets
|
The dashboard widgets source Javascript files bundled in theme/assets/js/widgets.bundle.js and used in specific pages on demand.
|
plugins
|
The source Javascript, Stylesheet, font and images files of custom 3rd-party and in-house plugins bundled into
theme/assets/plugins/global/plugins.bundle.js and theme/assets/plugins/global/plugins.bundle.css.
|
media
|
The source files of images, illustrations, icons and flags moved to theme/assets/media to use for the core layout and other demonstration purposes.
|
tools
|
The theme build tools for command line assets compilation tasks. Required only for development and can be excluded for production. |
packages.json
|
The project packages config file used by Yarn or Npm packagers to managers the dependencies.
|
gulp
|
Gulp build tasks to compile the source files theme/src into the static assets files theme/assets.
|
gulp.config.js
|
The main config of Gulp build tasks. |
webpack
|
Webpack build tasks to compile the source files theme/src into the static assets files theme/assets.
|
webpack.config.js
|
The main config of Webpack build tasks. |
README.md
|
A tiny help file that privides a quick guide to get started with Axel HTML Pro. |
2024©
Keenthemes
