File structure
Finder
This is the root template folder that contains all project files.
Finder / assets
This folder contains the compiled assets for the template, generated from the source files.
Finder / assets / app-icons
This folder contains favicon images optimized for different browsers and platforms. These icons should be included in the <head> section of an HTML document.
Finder / assets / css
This folder contains compiled CSS files. These include theme.css, theme.min.css, theme.rtl.css and theme.rtl.min.css, along with their corresponding map files.
Finder / assets / fonts
This folder includes the Finder local web font files in .woff2 format (Inter font).
Finder / assets / icons
This folder contains the Finder icons font file in .woff2 format and the corresponding .css file, which are generated from the SVG icon collection found in the src/icons directory.
Finder / assets / img
This folder contains all the template's graphic assets, including images, illustrations, vector icons, etc. These assets are neatly organized within subfolders.
Finder / assets / js
This folder contains compiled versions of theme.js and its minified counterpart, theme.min.js, along with their respective map files. Additionally, it includes the theme-switcher.js file, which handles switching between light and dark modes.
Finder / assets / vendor
This folder includes the .js and .css files for all vendor plugins.
Finder / src
This folder contains the source files, organized into subfolders.
Finder / src / icons
This folder contains a collection of SVG icons, which are compiled into a font .woff2 and an associated .css file.
Finder / src / js
This folder includes the primary theme.js file and a 'components' subfolder containing various modules. The theme.js file serves as the main JavaScript source, which is compiled (bundled) and optionally minified. This process generates two distinct files: assets/js/theme.js and assets/js/theme.min.js, along with their associated map files. The minified file, theme.min.js, is then linked to all .html documents within the project.
Finder / src / scss
This folder contains all project .scss files, which are compiled and optionally minified into .css files within the assets/css folder. The resulting minified theme.min.css is then linked to all .html documents within the project.
Finder / docs
This folder contains the documentation .html files that you are currently reading. Additionally, it includes a collection of component preview pages, each accompanied by corresponding code snippets.
Finder / build
This folder contains JavaScript files that are executed by Node.js scripts within the build system. The config.js file allows you to configure your project paths (directory structure), as well as source and output file names.
Finder / package.json
This file contains essential metadata about your app or module, including a list of dependencies that will be installed from the npm repository when you run the npm install command.
Finder / manifest.json
This is a crucial configuration file for the Progressive Web App (PWA) features of your application. It specifies app metadata, settings, and behaviors recognized by browsers, such as the app name, icons, start URL, display settings, and permissions.
Finder / service-worker.js
This file is integral to the Progressive Web App (PWA) capabilities of your application. It acts as a service worker, a type of web worker that intercepts and handles network requests, including dynamically managing caching of app resources. This script runs in the background, enabling offline support, faster resource loading, and other advanced functionality that enhances user experience.