File Structure

This section will show you how to keep your files organized. Our theme file structure that looks like this.

Theme folder and file structure

As mentioned previously, the default Block themes are some of the best examples of good theme development.

For instance, here is how the Block Theme organizes its file structure:

  • Block

    Folder contains all template source and production files.

    • node_modules

      Directory where npm installs dependencies.

    • src

      This folder holds all template source files and folder.

      • assets
        • css

          All CSS

        • images

          All the images are used in the theme

        • js

          All Javascript source files used in theme.

      • docs

        A Complete Documentation for theme.

      • pages

        All the theme HTML pages.

      • index.html

        Index file is start file run when the gulp

      • Vite.js

        Configuration file for Vite library. It contains all tasks you want to perform with Vite. Learn more about it from section or Working with Vite and official Vite documentation