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.

    • dist

      Compiled version - Ready to use

    • node_modules

      Directory where npm installs dependencies.

    • src

      This folder holds all template source files and folder.

      • assets

        • css

          Compiled CSS

        • fonts

          All fonts are used in the theme.

        • images

          All the images are used in the theme

        • js

          All Javascript source files used in theme.

        • scss

          All SASS file and folder included in it

      • docs

        A Complete Documentation for theme.

      • pages

        All the theme HTML pages with Subfolder.

      • partials

        A specific loop header and footer files for the templating.

      • index.html

        Index file is start file run when the gulp

      • gulpfile.js

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