https://github.com/olgaprikhodko/trillo-flexbox-practice

Flexbox CSS practice
https://github.com/olgaprikhodko/trillo-flexbox-practice

bem-methodology flexbox scss

Last synced: about 1 month ago
JSON representation

Flexbox CSS practice

• Host: GitHub
• URL: https://github.com/olgaprikhodko/trillo-flexbox-practice
• Owner: OlgaPrikhodko
• Created: 2024-02-27T11:32:41.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-27T11:42:00.000Z (12 months ago)
• Last Synced: 2024-11-18T22:02:45.389Z (3 months ago)
• Topics: bem-methodology, flexbox, scss
• Language: SCSS
• Homepage: https://olgaprikhodko.github.io/trillo-flexbox-practice/
• Size: 5.74 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Trillo Flexbox Practice

This is a fictional all-in-one booking app. UI only.

|             Desktop Screens              |                 Mobile Screens                  |

| :--------------------------------------: | :---------------------------------------------: |

| ![](img/readme/trillo-screencapture.png) | ![](img/readme/trillo-mobile-screencapture.png) |

### View Project Live

[https://olgaprikhodko.github.io/trillo-flexbox-practice/](https://olgaprikhodko.github.io/trillo-flexbox-practice/)

### Getting started

Clone or download project and then run:

```

npm install

npm start

```

### Used Technologies:

- **SCSS**: Styled with SCSS for more efficient, readable styling.

- **CSS Flexbox**: Extensive use of Flexbox for a modern, sophisticated layout.

- **SVG Icons**: Incorporates a sprite generated through [icomoon.app](icomoon.app) for crisp, scalable icons.

- **Responsive Design**: Utilizes a Desktop First strategy to ensure the site looks great on all devices.

- **BEM Methodology**: Adheres to BEM (Block Element Modifier) naming convention for CSS classes, enhancing readability and maintainability.

### Acknowledgments

Jonas Schmedtmann for the inspiring [Advanced CSS and Sass course](https://www.udemy.com/course/advanced-css-and-sass/).