Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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

bem-methodology flexbox scss

Last synced: 1 day ago
JSON representation

Flexbox CSS practice

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/).