Hello! I've decided to start publishing all the tools I wrote/I'll write for myself or for educational purpose.
This is the first one, Flex playground: you can find/try it here stefanocappellini.it/flex-playground/ (If you prefer, I've also made a short video to show it in action: youtube.com/watch?v=viBT1MaGr1E).
As the name may suggest, it allows the user - at least, that's the aim - to easily experiment with CSS Flexbox layout, test ideas and (maybe) learn. There are lots of Web app like this out there, but no one suited my needs and that’s why I built it.
- Customize the flex container (setting the
- Change the number of items (its children)
- Define an overall style for all those items (setting the
min-height, margins properties)
- And even override that overall style, customizing each item individually (the items having some customization are marked with a green background instead of the standard orange one).
All the changes you make are obviously immediately reflected on the UI. This Web App is made with React and I tried to make it as light, fast as possible, removing all the distracting elements and decluttering the UI: for example, the elements are simple orange/green boxes with a number, nothing more.
There is still a lot to be done: some code cleaning, testing (both ui and functional/unit), some UI polishing, some minor known, annoying, issues to be fixed, especially on mobile and on Windows (and there is the order property still missing!), handle IE (or not?). Then, I think I'll release it on Github and I'll probably move it to a more neutral domain.
Please, keep in mind that I am absolutely not a frontend guru (I work mostly as a backend sw engineer and with ML)!
Comments, suggestions are really welcome, criticisms too! If you have any questions, I'll be happy to answer them all.
As I said, it's completely free (no costs, no subscriptions, no ads, no cookies, ...). I hope you'll find it useful, let me know! Here is the link: https://www.stefanocappellini.it/flex-playground/