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
Important Links
- Production Link: https://www.flexo.icu
- Design Guide Link: https://zeroheight.com/2615b42d7
- Test Domain: 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 <your branch name> - 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
- You should see your changes here
- If there is any problem, simply leave a message for admin