This is a project of the Coder Coder Sass, BEM, & Responsive Design course. The website feautures the basics of Sass, BEM (block-element-modifier), and the principles of responsive design.
The project aims to create a grid component using Sass with a main widget and three sidebar widgets. The widgets were filled with lorem ipsum placeholders. The project was structured following a similar architecture of the 7-1 pattern.
Shorter namespaces were used to refer modules (to avoid variable namimg conflicts) . It was done by writing @use "<url>" as <namespace>.
The Live Sass Compiler VS Code extesion was used to complie Scss files to CSS at realtime with live browser reload.
Helper/Utility classes were used to set background colors to widgets instead of BEM modifiers in order to reuse them in other components.
Live site: https://alffonti.github.io/grid/index.html