Architecture

What you’ll learn here

We’ll break down the folder hierarchy of Animmaster Vite Template: the project root, the src/ directory, components, assets, styles, and scripts.

Rule of thumb

Edit: src/ • Avoid editing: build modules & configs unless you know why.

Project root

After extracting the archive, you’ll see several folders and configuration files in the project root. Here is what they mean:

src/ — the source code of your project. This is where you work.
template.config.js — user configuration (feature toggles, paths, automation settings).
README.txt — a short “quick start” note. Worth reading once.
package.json — npm scripts + dependencies. Avoid editing unless you understand the impact.
vite.config.js — Vite configuration. Usually you don’t touch it.
template_modules/ — internal build/template modules. Do not edit unless you maintain the template.
docker-compose.yml — used only for fullstack/WordPress workflows (if enabled). Avoid editing without experience.
.vscode/ — appears after first run (editor settings/snippets if enabled).
node_modules/ + package-lock.json — created after npm i. Don’t edit.
zip/ — appears after npm run zip (exported zip build output).
backend/ — appears only if you run fullstack/WordPress modes (contains WordPress + database data).

Naming tip

Keep the project path clean: use Latin characters, no spaces, and avoid special characters like # or !.

Inside `src/`

The src/ folder contains all source files for the website and the template’s component system.

index.html — main entry page of your project.
assets/ — media files: images, fonts, svg icons, etc.
styles/ — global styling system (settings, mixins, resets, libraries).
js/ — global scripts + utilities + framework starters (React/Vue if used).
pug/ — files for PUG preprocessor (if enabled).
php/ — PHP components (used when PHP server mode is enabled).
projectpage/ — template for a generated “project pages” list.
files/ — everything here gets copied to dist/files.
components/ — all UI components + layouts + pages (main content lives here).

Most of your work

You will mostly edit src/components/, src/styles/, src/js/ and src/assets/.

Components structure

The template uses a component-first approach. UI blocks, effects, and page content are stored inside src/components/.

custom/ — your own components (recommended place for custom work).
templates/ — page templates (you can add your own layouts).
templates/main/ — main layout template (base HTML skeleton).
pages/ — page content components (each page has its own folder/files).
pages/index/ — content of the main (index) page.
effects/ — components for visual effects/animations (extendable).
forms/ — form-related components (inputs, validation, helpers, etc.).
layout/ — layout components (header, footer, navigation, etc.).
wordpress/ — WordPress theme/plugin + helpers (used only for fullstack mode if enabled):
- anim-theme/ — WordPress theme
- anim-plugin/ — WordPress plugin
- *.js — helper files (don’t edit / don’t delete unless you know what you’re doing)

Some components may contain plugins inside their own folder, for example: src/components/layout/header/plugins/scroll.

Good practice

Create new UI blocks inside src/components/custom/ so updates and core files stay clean.

Assets

All project media lives in src/assets/.

fonts/ — local fonts (used by the fonts pipeline).
img/ — images. Replace favicon.ico with your own.
svgicons/ — input folder for icon font / SVG sprite workflows.

Styles

Global styling is organized inside src/styles/. The template includes a scalable SCSS structure: settings, mixins, reusable includes, resets, and optional libraries.

style.scss — main global stylesheet (loaded on every page).
settings.scss — global tokens/variables and basic design settings.
includes/ — reusable SCSS/CSS pieces used across the project.
fonts/ — auto-generated font connection styles (created during build/dev).
index.scss — auto-included file (settings + mixins + shared imports).
mixins.scss, extends.scss — reusable mixins and placeholders.
spritemap.scss — auto-generated helpers for SVG sprite workflow.
libs/ — CSS libs that can be auto-included if enabled.
reset.css — base reset (used unless you switch to another framework/library).
tailwind.css — used only if Tailwind mode is enabled in config.

Scripts

Shared JavaScript lives in src/js/. Components can also have their own JS inside their folder, but global logic typically goes here.

app.js — main entry file for global scripts (loaded on every page).
common/ — shared utilities and helpers.
common/functions.js — useful helper functions used across components.
react/ — starter structure for React workflows (if enabled/used).
vue/ — starter structure for Vue workflows (if enabled/used).

Keep it clean

If a script belongs to a specific component — keep it inside that component folder. Global scripts should stay in src/js/.

Quick tree view

Here’s a compact overview you can quickly scan:

Project structure


root/
├─ src/
│  ├─ assets/ (fonts, img, svgicons)
│  ├─ components/ (custom, templates, pages, effects, forms, layout, wordpress)
│  │  └─ wordpress/
│  │     ├─ anim-theme/
│  │     └─ anim-plugin/
│  ├─ styles/ (style.scss, settings.scss, mixins, includes, libs)
│  ├─ js/ (app.js, common/, react/, vue/)
│  ├─ files/ (copied to dist/files)
│  ├─ projectpage/
│  ├─ pug/ (optional)
│  └─ php/ (optional)
├─ template.config.js
├─ package.json
├─ vite.config.js
└─ template_modules/

Download

Every project you start without a solid foundation costs you time. Download Animmaster Vite Template and start your next project with a structure that already works.

Download Animmaster Vite Template Save your time — start now

Architecture: files & folders How the project is organized and where to work