Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/olgaprikhodko/trillo-flexbox-practice
- Owner: OlgaPrikhodko
- Created: 2024-02-27T11:32:41.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-02-27T11:42:00.000Z (9 months ago)
- Last Synced: 2024-02-27T12:48:28.901Z (9 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/).