Hey Product Hunt!
If you've ever tried to build anything with CSS, you know how annoying it can be to get even the basics right. There have been entire blog posts written on something as simple as centering an element vertically, and entire books written on how to write code to get basic layouts to work.
Thankfully, the people who define web standards have come up with something to solve most of our CSS problems β it's called CSS Flexbox, and it has nearly universal support across all modern browsers. However, it's so complicated that even most seasoned developers have to have a cheatsheet open to look up the right code syntax for specific layout settings.
Well, we thought this was a terrible way for creative people to utilize the power of flexbox, so we created a totally visual flexbox UI and built it into Webflow. Our approach looks and feels a lot more like Photoshop/Illustrator/Sketch-inspired alignment and distribution buttons than a long list code properties that you have to remember.
Also, we created this game to help you visually learn the concepts used by flexbox: https://www.flexboxgame.com/ β I bet you can't pass level 28 :P
We'd love to hear your feedback on both the product and the game, and we'll be hanging out here all day.
Cheers,
Vlad
@callmevlad Love this! I'm now immersed in the tech world here in San Francisco, and I really abhor the notion that I'd have to learn how to write code again in order to make great looking products! Can't wait to try out your game :)
@bentossell Thanks for hunting this! And don't worry, the day is coming where you'll be just as powerful as a frontend developer, it's only a matter of time :)
And to think, just 2 weeks ago I was at An Event Apart conference where they said that learning how to use flexbox over the next YEAR would make you a certifiable web wizard genius...
Slick Vlad! Integrating the game as a way of introducing the product before sign-up is a subtle touch I can appreciate! It's an on-boarding strategy I expect to catch on.
The Webflow team is one of the best product team in the game right now. They remind me the Invision team in a way. Now that they're releasing this, I'm late. I have to build something using their CMS solution AND this Flexbox thing π€πΌ Congrats folks!
I commented on that project Matt is going curating content for us using Webflow for the entire project. You guys have no problem utilizing this tool to make some seriously compelling content. That Flexbox Game was so cool. You folks at Webflow are truly taking Web design and development to exactly where it should be in this day and age. This is how you make web content, folks. Not code editing, learning tons of languages. Finally someone took on the challenge and is doing the best job at it to date. Can't wait to see what you Voodoo Shaman come up with next.
@vladkorobov It's technically IE11 and up, but IE11 has a ton of bugs unfortunately: http://caniuse.com/#search=flexbox - if you need to support IE11 (the last version before Edge), you'll need to make sure to test your layouts in that browser. We tried to abstract away as many bugs in our implementation as possible, but we unfortunately can't anticipate all scenarios :\
Love it! Using a game for the on boarding is a brilliant idea, and works incredibly well for a product like Flexbox. What I was missing, was some help in case you couldn't complete a task. Will definitely play a little more around with it. Keep up the great work!
Seems really powerful and easy to use. I like the idea of having a game to help people learn the concepts. It would be nice if the game had feedback or a suggested solution (Flex Layout alignment vs the boxes under Position), and also a hint if someone gets stuck. Still great though!
Replies
Webflow
Taza
1 1 1 1
Makerpad
Webflow
SellX
Webflow
Basedash
Tribe Games
Quuu
Wireframe Components Kit
Imgur Melee
Timestripe
Webflow
Precursor for Teams
MINE to Save
Squla