Organization

This project follows a specific file structure for better organization and maintainability. Here's an overview of the key components:

1. Main SCSS: The main.scss file serves as the main entry point for all other SCSS files used in the project, including Bootstrap 5.

Bootstrap: Additionally, we have the bootstrap-utilities.scss file, which allows us to add custom CSS following Bootstrap 5 guidelines. It's important to note that this file should not include any additional classes. Please ensure that the naming conventions align with the ones specified in the Bootstrap 5 documentation (Bootstrap 5 Docs) for consistency.

Components: Inside the COMPONENTS folder, we create separate SCSS files for each page in the CMS. For example, if there's a product template, we would create a product.scss file, and similarly, a footer.scss file for the footer section. It's crucial to name these files based on their corresponding templates. While there might be some older files that need renaming, going forward, please follow this naming convention.

Colors: The color.scss file is dedicated to defining all the colors used in the project. We store the color values in variables and reference them in other SCSS files. For instance, to apply a specific color, we use the variable notation, such as color: var(--orange-2);.