Solyd

Folder Structure

Understand how the Solyd HTML project is organized.

Understanding the project organization is key for efficient development and maintenance.

Solyd includes two folder structures:

  1. Production-ready package (ready to upload/use directly)
  2. Development source package (used for editing and rebuilding)

Production-ready structure

Example: cropix-tailwind

After running bun run build, the output lives in dist/:

dist/
├── *.html                # Final compiled HTML pages
├── assets/               # Compiled CSS/JS
├── images/               # Production image files
├── fonts/                # Font files
├── vendor/               # Third-party libraries
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
└── site.webmanifest

Use this package when you only need to deploy or edit final output files.

Development structure

Example: cropix-tailwind

cropix-tailwind/
├── public/                     # Static assets (images, fonts, vendor scripts)
├── src/
│   ├── components/
│   │   ├── about/              # About page sections
│   │   ├── blog/               # Blog listing and details
│   │   ├── contact/            # Contact page sections
│   │   ├── donation/           # Donation page (some templates only)
│   │   ├── faq/                # FAQ page sections
│   │   ├── home/               # Homepage sections
│   │   ├── projects/           # Projects/portfolio pages
│   │   ├── service-details/    # Service detail sections
│   │   ├── services/           # Services pages
│   │   ├── shared/             # Header, footer, head-links, etc.
│   │   └── team/               # Team pages
│   ├── js/
│   │   ├── animation/          # All page animations
│   │   └── utils/              # Accordion, menu, swiper, smooth scroll
│   ├── styles/                 # Tailwind, typography, variables
│   └── main.js                 # JS entry
├── *.html                      # Root HTML pages (Vite inputs)
├── post-build.js               # Post-build dist fixes
├── package.json
├── vite.config.js
└── dist/                       # Created after build

Use this package when you want to customize source code and rebuild the project.

Template variations

Most templates share the same page set. A few differences to note:

  • zooxia-tailwind and oxivia-tailwind include a donation.html page and src/components/donation/ folder.
  • arcion-tailwind uses team-detail.html instead of team-details.html.

Key differences

  • Production package: only final output files, no source editing workflow
  • Development package: includes src/, tooling, and build scripts
  • dist/ folder: appears in development projects after the build process

Get Started

Set up your Solyd development & production environment and run your first site locally.

Customization

Learn how to customize Solyd in production and development mode.

Copyright © 2026