Structure

A comprehensive guide to understanding the file organization and tools used in the project.

This guide walks you through the steps to clone, set up, and run the project on your local machine. Follow the instructions below to get started quickly.

Main Directories

./src (Source Files)

Contains the source code for the project, which is compiled and processed using the task manager. Developers should edit files in this directory.

./src
├── includes/
├── js/
├── scss/
└── gulpfile.js

./build (Final Files)

Holds the final, compiled, and minified files that are ready for deployment or use. These are the output files generated after running the task manager.

./build
├── css/
├── js/
├── images/
├── fonts/
└── index.html

Tools Used

Gulp.js

Gulp.js is an open-source task manager and build tool based on JavaScript. It automates repetitive tasks such as compiling files, minification, and live reloading.

Purpose in the Project

Automates the compilation of source files from ./src to ./build and improves the development workflow.

Pug.js

Pug.js is a powerful template engine for generating clean and efficient HTML. It simplifies writing HTML through a more concise syntax.

Purpose in the Project

Used to create modular and reusable templates for pages and components in the ./src/templates/ directory.

Sass (SCSS)

Sass is an advanced extension of CSS that improves maintainability by introducing variables, mixins, nesting, and inheritance.

Purpose in the Project

Enhances the styling workflow, organized using the 7-1 Pattern for better file management.

Techniques Used

7-1 Pattern for Sass File Organization

The 7-1 Pattern organizes Sass files into seven folders and one main file. This structure ensures clean, maintainable, and scalable styles.

styles/
├── abstracts/
├── base/
├── components/
├── layout/
├── pages/
├── themes/
├── vendors/
└── main.scss

BEM Methodology for Class Naming

The BEM (Block Element Modifier) methodology is used for naming CSS classes in the project. It improves code readability and reusability.

                  
 HTML
                    Copy
                  
<div class="card">
   <div class="card__header">Header</div>
    <div class="card__body">Body</div>
    <div class="card__footer card__footer--highlighted">Footer</div>
</div>

Last updated 3 months ago

• Installation
• Browser support