apple-iSass

Live Demo

https://anhtungbui.github.io/apple-iSass/

A clone of Apple's landing page layout as of July 2020 to practice Sass language (Syntactically Awesome Style Sheets) 
No copyright infringement intended

Project Structure

The Sass organizing structure that we used was heavily based on SMACSS (Scalable and Modular Architecture for CSS) methodology

scss
 ┣ base
 ┃ ┣ _base.scss
 ┃ ┣ _mixins.scss
 ┃ ┗ _variables.scss
 ┣ layout
 ┃ ┗ _layout.scss
 ┣ module
 ┃ ┣ _covid.scss
 ┃ ┣ _featured-1.scss
 ┃ ┣ _featured-2.scss
 ┃ ┣ _footer-extras.scss
 ┃ ┣ _footer-nav.scss
 ┃ ┣ _footnotes.scss
 ┃ ┣ _hero.scss
 ┃ ┣ _navbar.scss
 ┃ ┣ _ribbon.scss
 ┃ ┣ _unit-1.scss
 ┃ ┣ _unit-2.scss
 ┃ ┣ _unit-3.scss
 ┃ ┣ _unit-4.scss
 ┃ ┣ _unit-5.scss
 ┃ ┗ _unit-6.scss
 ┗ main.scss

Lessons learned

• Sass in pratice
• Combined SMACSS (Scalable and Modular Architecture for CSS) and SASS.
• Github's workflow in a team
• Clean coding

Contributors

• Anh Tung Bui (Team Lead)
• Rasel Hasan
• Mykhailo Riabokliach