This project aims at developing a responsive e-commerce website of a tour company from scratch, using SASS. It is a concept project, and uses no CSS libraries for any aspect of the project, from grid system to the animations. The whole layout and animations are developed using inbuilt features of CSS.
The motivation behind this project was to strengthen and refresh my CSS skills and get well versed with the latest industry techniques and workflows. This was the most important factor leading to the decision of using only Vanilla CSS along with the CSS pre-processor called SCSS. This project was inspired by Jonas Schmedtmann's Advanced CSS Course on Udemy. The code is extremely organised, commented out and well-structured, so that it can further be used by developers as a CSS primer.
The project features the use of industry standard BEM (Block Element Modifier) methodology which was used for structuring the project, the CSS 7-1 Architecture for a more manageable codebase, and SASS features such as mixins, variables and partials. Also, the project involves the development of custom grid system which is coded and commented out in the HTML file for the reader's reference. This grid system is used throughout the project for content layout. The site includes the use of advanced media queries for responsive behavior that supports almost all of the popular screen sizes. Further, the project demonstrates use of advanced responsive image techniques like Density Switching and Art Direction which helped in achieving a more responsive and mobile friendly version of the site which is compatible with majority of devices available in the market. Finally, a build pipeline was setup using npm scripts to handle tasks such as concatentation, compilation, prefixing and compressing to achieve a production ready code.