Skip to main content

Folder Structure

The <customer theme> folder structure is designed to simplify front-end development by organizing assets and resources in a clear and efficient manner. At its core is the src directory, which contains everything needed to build the theme. Let's explore its key components:

  • src/images: Holds essential image assets like favicon.ico, ensuring a visually appealing website.
  • src/fonts: Stores font files for consistent typography across the site.
  • src/scripts: Houses TypeScript files for interactive web functionalities.
  • src/styles: Contains SCSS files to define the website's layout and aesthetics.
  • src/templates: Centralizes reusable templates for different sections of the website, including base layouts, components, widgets, and specific page views.

This organized structure streamlines development, making it easier to maintain and scale the project over time. By following this framework, developers can efficiently collaborate and create exceptional web experiences.

cloudsuite_responsive

In themes based on cloudsuite_responsive, the templates reside in <customer theme>/templates/ rather than <customer theme>/src/templates/.

Examples​

Theme Based on Mosaic Templates​

Mosaic Templates theme folder structure
<customer theme>/
├── src/
│   ├── images/
│   │   ├── favicon.ico
│   │   └── ...
│   │
│   ├── fonts/
│   │   ├── roboto.woff
│   │   └── ...
│   │
│   ├── scripts/
│   │   ├── main.ts
│   │   └── ...
│   │
│   ├── styles/
│   │   ├── main.scss
│   │   └── ...
│   │
│   └── templates/
│       ├── base/
│       │   ├── js-body-custom.html
│       │   └── ...
│       │ 
│       ├── components/
│       │   └── header/
│       │       ├── search.html
│       │       └── ...
│       │   └── ...
│       │ 
│       ├── layouts/
│       │   ├── pdp.html
│       │   └── ...
│       │ 
│       ├── widgets/
│       │   ├── widget_name/
│       │   │    ├── template.html
│       │   │    └── schema.json
│       │   └── ...
│       │ 
│       ├── views/
│       │   ├── pdp/
│       │   │   └── index.html
│       │   └── ...
│       │ 
│       └── base.html
│
├── package.json
├── webpack.config.js
└── ...

Theme Based on Mosaic Templates (Monorepo)​

Mosaic Templates monorepo theme folder structure
<customer>/
├── <customer theme 1>/
│   ├── src/
│   │   ├── images/
│   │   │   ├── favicon.ico
│   │   │   └── ...
│   │   │
│   │   ├── fonts/
│   │   │   ├── roboto.woff
│   │   │   └── ...
│   │   │
│   │   ├── scripts/
│   │   │   ├── main.ts
│   │   │   └── ...
│   │   │
│   │   ├── styles/
│   │   │   ├── main.scss
│   │   │   └── ...
│   │   │
│   │   └── templates/
│   │       ├── base/
│   │       │   ├── js-body-custom.html
│   │       │   └── ...
│   │       │ 
│   │       ├── components/
│   │       │   └── header/
│   │       │       ├── search.html
│   │       │       └── ...
│   │       │   └── ...
│   │       │ 
│   │       ├── layouts/
│   │       │   ├── pdp.html
│   │       │   └── ...
│   │       │ 
│   │       ├── widgets/
│   │       │   ├── widget_name/
│   │       │   │    ├── template.html
│   │       │   │    └── schema.json
│   │       │   └── ...
│   │       │ 
│   │       ├── views/
│   │       │   ├── pdp/
│   │       │   │   └── index.html
│   │       │   └── ...
│   │       │ 
│   │       └── base.html
│   │
│   ├── package.json
│   ├── webpack.config.js
│   └── ...
│
├── <customer theme 2>/
│   ├── src/
│   │   ├── images/
│   │   │   ├── favicon.ico
│   │   │   └── ...
│   │   │
│   │   ├── fonts/
│   │   │   ├── roboto.woff
│   │   │   └── ...
│   │   │
│   │   ├── scripts/
│   │   │   ├── main.ts
│   │   │   └── ...
│   │   │
│   │   ├── styles/
│   │   │   ├── main.scss
│   │   │   └── ...
│   │   │
│   │   └── templates/
│   │       ├── base/
│   │       │   ├── js-body-custom.html
│   │       │   └── ...
│   │       │ 
│   │       ├── components/
│   │       │   └── header/
│   │       │       ├── search.html
│   │       │       └── ...
│   │       │   └── ...
│   │       │ 
│   │       ├── layouts/
│   │       │   ├── pdp.html
│   │       │   └── ...
│   │       │ 
│   │       ├── widgets/
│   │       │   ├── widget_name/
│   │       │   │    ├── template.html
│   │       │   │    └── schema.json
│   │       │   └── ...
│   │       │ 
│   │       ├── views/
│   │       │   ├── pdp/
│   │       │   │   └── index.html
│   │       │   └── ...
│   │       │ 
│   │       └── base.html
│   │
│   ├── package.json
│   ├── webpack.config.js
│   └── ...
│
├── package.json
├── webpack.config.js
└── ...

Theme based on cloudsuite_responsive​

cloudsuite_responsive theme folder structure
<customer theme>/
├── src/
│   ├── images/
│   │   ├── favicon.ico
│   │   └── ...
│   │
│   ├── fonts/
│   │   ├── roboto.woff
│   │   └── ...
│   │
│   ├── scripts/
│   │   ├── main.ts
│   │   └── ...
│   │
│   └── styles/
│       ├── main.scss
│       └── ...
│   
├── templates/
│   ├── base/
│   │   ├── js-body-custom.html
│   │   └── ...
│   │ 
│   ├── components/
│   │   └── header/
│   │       ├── search.html
│   │       └── ...
│   │   └── ...
│   │ 
│   ├── layouts/
│   │   ├── pdp.html
│   │   └── ...
│   │ 
│   ├── widgets/
│   │   ├── widget_name/
│   │   │    ├── template.html
│   │   │    └── schema.json
│   │   └── ...
│   │ 
│   ├── views/
│   │   ├── pdp/
│   │   │   └── index.html
│   │   └── ...
│   │ 
│   └── base.html
│
├── package.json
├── webpack.config.js
└── ...

Theme based on cloudsuite_responsive (monorepo)​

cloudsuite_responsive monorepo theme folder structure
<customer>/
├── <customer theme 1>/
│   ├── src/
│   │   ├── images/
│   │   │   ├── favicon.ico
│   │   │   └── ...
│   │   │
│   │   ├── fonts/
│   │   │   ├── roboto.woff
│   │   │   └── ...
│   │   │
│   │   ├── scripts/
│   │   │   ├── main.ts
│   │   │   └── ...
│   │   │
│   │   └── styles/
│   │       ├── main.scss
│   │       └── ...
│   │   
│   ├── templates/
│   │   ├── base/
│   │   │   ├── js-body-custom.html
│   │   │   └── ...
│   │   │ 
│   │   ├── components/
│   │   │   └── header/
│   │   │   │   ├── search.html
│   │   │   │   └── ...
│   │   │   └── ...
│   │   │ 
│   │   ├── layouts/
│   │   │   ├── pdp.html
│   │   │   └── ...
│   │   │ 
│   │   ├── widgets/
│   │   │   ├── widget_name/
│   │   │   │    ├── template.html
│   │   │   │    └── schema.json
│   │   │   └── ...
│   │   │ 
│   │   ├── views/
│   │   │   ├── pdp/
│   │   │   │   └── index.html
│   │   │   └── ...
│   │   │ 
│   │   └── base.html
│   │
│   ├── package.json
│   ├── webpack.config.js
│   └── ...
│
├── <customer theme 2>/
│   ├── src/
│   │   ├── images/
│   │   │   ├── favicon.ico
│   │   │   └── ...
│   │   │
│   │   ├── fonts/
│   │   │   ├── roboto.woff
│   │   │   └── ...
│   │   │
│   │   ├── scripts/
│   │   │   ├── main.ts
│   │   │   └── ...
│   │   │
│   │   └── styles/
│   │       ├── main.scss
│   │       └── ...
│   │   
│   ├── templates/
│   │   ├── base/
│   │   │   ├── js-body-custom.html
│   │   │   └── ...
│   │   │ 
│   │   ├── components/
│   │   │   └── header/
│   │   │   │   ├── search.html
│   │   │   │   └── ...
│   │   │   └── ...
│   │   │ 
│   │   ├── layouts/
│   │   │   ├── pdp.html
│   │   │   └── ...
│   │   │ 
│   │   ├── widgets/
│   │   │   ├── widget_name/
│   │   │   │    ├── template.html
│   │   │   │    └── schema.json
│   │   │   └── ...
│   │   │ 
│   │   ├── views/
│   │   │   ├── pdp/
│   │   │   │   └── index.html
│   │   │   └── ...
│   │   │ 
│   │   └── base.html
│   │
│   ├── package.json
│   ├── webpack.config.js
│   └── ...
│
└── package.json