4 ms·
Visual game to learn Flexbox
- Vekz 10y agoI prefer http://flexboxfroggy.com/ http://flexboxfroggy.com/
- callmevlad 10y agoHey Kev, we actually worked with Tom Park (the creator of Flexbox Froggy) to apply the same exact concept to a more visual paradigm - so they're meant to serve the same purpose, but the visual version is meant to be more approachable to people who don't have as much experience with raw CSS. I hope that makes sense.
- devrelm 10y agoThis is great! I enjoyed flexboxfroggy.com, but this seems to go into a bit more depth in terms of the number of flexbox properties being shown off. It takes a bit to work out what the actual css being used is, but it's otherwise a great way to play and learn what flexbox can do.
- NDizzle 10y agoI don't normally use these kind of things, but this one was really well done. Nice work! I actually completed it.
- throwaway2016a 10y agoAlso, http://www.flexboxdefense.com/ http://www.flexboxdefense.com/ is more like an actual game. It did get me to check out webflow though, which I'm guessing was part of the goal.
- virgil_disgr4ce 10y agoHaha yeah. Seems to be a pretty effective technique!
- tsumnia 10y agoVery cool, though I'd love to have an option to reset if possible
- soperj 10y agoThere is an undo button.
- pcl 10y agoI love the tool itself... have you guys thought about some way to integrate it into Chrome or FF as a development / debugging tool?
- callmevlad 10y agoWe've been advocating moving our visual implementation (or something similar) to dev tools in both FF and Chrome. Here are some before/after examples to show you how a more abstract input method can really speed up development: http://things-that-web-inspectors-should-have.webflow.io/ http://things-that-web-inspectors-should-have.webflow.io/
- pcl 10y agoFeature request: I understand your goal of visual tooling, but it'd be neat if I could turn on a mode in which the css for a given operation showed up in the tooltip, instead of english descriptions.
- neil_s 10y agoI cannot crack the last 3 :( Any hints anyone?
- soperj 10y ago26 gave me a hard time because I kept trying to do them vertically. Once I completed 27 & 28 w/ horizontal tiling I finally cracked 26.
- jbotch 10y ago(Spoiler coming) For 26: - Changed the order to have 1 at the end, aligned it at the bottom, then set its width to 100%. Then, for the parent container, click "Wrap children", so that 1 gets its own line. 1 should now be done. - Next, click the parent container. For the row layout, align them the right end. This gets 2 and 3 properly aligned on the right side. - Finally, click 3, and click "Align Self: End". This gets 3 properly positioned vertically. The key insight for me was to realize the easiest way is to get it to work with the row layout. If 1 is at the beginning there's no magic mix of widths that will work, which means 1 needs its own line & therefore must be at the end position-wise. Haven't done 27 and 28 yet :).
- metasean 10y agoIn a similar vain: - Flexbox Froggy - http://flexboxfroggy.com/ http://flexboxfroggy.com/ - CSS Diner - https://flukeout.github.io/ https://flukeout.github.io/
- vamega 10y agoIs there a technical reason Firefox isn't supported?
- callmevlad 10y agoYep, more background here: https://news.ycombinator.com/item?id=9325796 https://news.ycombinator.com/item?id=9325796 (We're working around this soon though by moving away from native scrollbars, since it's very unlikely that Firefox will fix this anytime soon.)