After cloning the project, open the terminal in the project directory and run the following commands in order (if node, bower, and gulp are not installed on your PC, install these three first)

npm install

bower install

gulp

All development changes are made in the /src folder and compiled with gulp into the /build folder. Back-end developers only need the contents of the /build folder.

Tasks performed in Gulp:
-SASS compilation
-Adding prefixes with autoprefixer
-Importing layouts like header and footer using fileinclude
-Minifying js files
-Minifying css files with cleanCSS
-Renaming minified css files by adding .min suffix
-Concatenating different .js files from js/main folder into main.js

Sass files are in the /css folder under /src. All CSS changes will be made here. Folders are created using the SMACSS standard for better understanding. Here's what each folder contains:

Contains mixins and variables

Contains basic CSS files like font styles

Contains reusable elements used throughout the site like modals and pagination components

Contains layouts like footer, header, and navigation

Contains CSS files for each page, where page-specific CSS changes are made

package.json file lists all development dependencies

All frameworks and plugins used in the site are installed via bower. You can see what's installed in the bower.json file. Bower packages are installed in the /lib folder, which we reference in the site

All CSS class names follow the BEM naming convention

LiveReload is integrated into the starter. When you save file, it automatically updates the modified files and refreshes everything, eliminating the need to manually refresh the browser

Sometimes image resizing can be time-consuming. In such cases, you should deactivate .pipe(imagemin({use: [imageminMozjpeg()] })) in the imageCompile() function in gulpfile.js. You can reactivate it after completing the entire project. Resized images will be added to the build img folder