Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Showrin/flexo
An Exclusive playground to learn CSS Flexbox
https://github.com/Showrin/flexo
css flexbox javascript react
Last synced: about 1 month ago
JSON representation
An Exclusive playground to learn CSS Flexbox
- Host: GitHub
- URL: https://github.com/Showrin/flexo
- Owner: Showrin
- License: mit
- Created: 2020-07-22T17:55:59.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T22:43:48.000Z (almost 2 years ago)
- Last Synced: 2024-08-04T01:27:23.934Z (5 months ago)
- Topics: css, flexbox, javascript, react
- Language: JavaScript
- Homepage: https://www.flexo.icu
- Size: 4.79 MB
- Stars: 23
- Watchers: 1
- Forks: 2
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - flexo
README
# Flexo
## An Exclusive playground to learn CSS Flexbox
**FLEXO** is a web app, made to simplify the learning path of CSS Flexbox. One can learn flexbox in an interactive way and also can teach other easily, just using this app. Developers can make a rough sketch here and also can know what properties they have to use before diving into the code. It'll make their coding path smooth.
Are you ready???
**Let's play with Flexbox 🥳 🥳 🥳**
Visit this link ---> [https://www.flexo.icu](https://www.flexo.icu)
### Important Links
- **Production Link:** [https://www.flexo.icu](https://www.flexo.icu)
- **Design Guide Link:** [https://zeroheight.com/2615b42d7](https://zeroheight.com/2615b42d7)
- **Test Domain:** [https://test.flexo.icu](https://test.flexo.icu)
### Little demonstration of Flexo
### Supported Features
Currently Flexo app supported the following features:
- **Unlimited flex-child creation**
- **Interation of main and cross flex axis with the flex direction**
- **Real-time effect of changing one or more property of Flex-container or a flex-child**
- **View sharing over the hyperlink** (One can make a layout, generate sharing link, send it to other and taping this link, that person can see the same view with its properties)
- **Two positions of sidebar.** Users can switch between them according to their comfort.
- One from left side of the screen
- One comes from bottom side of the screen
> **It takes lots of work (typing flex properties one after one) while teaching other.**
> **Here is FLEXO. A mighty tool to solve this problem. Flexo app can be used for teaching and learning purpose.**
> **With the help of Flexo, one can easily know what properties he/she has to use before diving into the code.**
### Supported Flexbox Properties
| **Flex-Container** | **Flex-Child** |
| ------------------ | -------------- |
| display | order |
| flex-direction | flex-basis |
| flex-wrap | flex-grow |
| justify-content | flex-shrink |
| align-items | align-self |
| align-content | |
## Want to contribute?
### Setup Project
It just requires some simple steps to setup this project on your local machine. Simply,
- Clone the repo
- Run `yarn install`
- Then run `yarn start`
- Yahooo! You are ready to contribute 🎉 🎉 🎉
### How to give PR (Pull Request)
To submit your code for review, follow these steps :
- Create a brunch from **master branch**
- Commit your changes in this branch
- Push your branch to remote
- Give this PR for review
- If your changes get approval then author will merge this into the master
### How to test your changes on Flexo Test Domain
**Flexo has a test domain. This domain is used for testing purpose.** When a new feature has been developed or new enhancements or fixes have been made, they are **deployed to the test domain first. Here all the functionalities, design issues, bug fixes, etc. have been checked.** When the changes pass all the test, then they are ready to be merged in the **production branch (master)**.
You can also check your changes in the test branch. All you have to do is:
- Create a branch named **'test'** on your local machine by running **`git checkout -b test`**
- Pull from **'test'** branch from the origin by running **`git pull origin test`**
- Then merge your branch(which containing your changes) into the test branch by running **`git merge `**
- Then push the test branch to the origin's test branch by running **`git push origin test`**
- Wait for few minutes and go to **[https://test.flexo.icu](https://test.flexo.icu)**
- You should see your changes here
- If there is any problem, simply leave a message for admin