4 ms·

> What I would really like are more robust layout APIs for both the browser and native apps. This is what I love about CSS flexbox and grid. Flexbox completely

> What I would really like are more robust layout APIs for both the browser and native apps. This is what I love about CSS flexbox and grid. Flexbox completely changed how I approach layouts, and I'm excited for grid to hit the big time as well. The only thing I wish flexbox could do is allow custom spacing functions, so I could write my own alternative to "justify-content: space-around".

jasondc 10y ago
Here is the best visual approach ive seen to designing flexbox layouts: http://flexboxgame.com http://flexboxgame.com
- briantmaurer 10y ago
  This is great. Until now, I have been using the "flex box froggy" game for reference. It has been faster for me to recall flex-box CSs rules by scrolling through levels in that game than reading any "real" documentation. The link you shared above is a big upgrade.
  - fiveseven_ 10y ago
    Flexbox Game doesn't support Firefox 53 yet, but I can vouch for Flexbox Froggy as well as Flexbox Defense http://www.flexboxdefense.com/ http://www.flexboxdefense.com/
  - nojvek 10y ago
    I really like what safari has done with its devtools for the style editor. Right-click inspect element selects the element you want to modify. Then change CSS properties in a GUI editor. Only problem is persistence. I love designing and tweaking with devtools iteratively. A lot of things are done in editors because it gives you a lot of control of logic. Designing assets in visual language like flash makes a lot of sense. Unity has the same idea. Create your assets visually and assign behaviors to it via code. Their GUI/code fusion is pretty cool. Writing a public var in a class exposes it in GUI and makes it bindable to other things via click and drag.
namuol 10y ago
> custom spacing functions Keep an eye on "Houdini" -- a new browser API draft that exposes the internals of CSS's layout system (and much more): https://www.youtube.com/watch?v=sE3ttkP15f8 https://www.youtube.com/watch?v=sE3ttkP15f8

jasondc 10y ago

Here is the best visual approach ive seen to designing flexbox layouts: http://flexboxgame.com http://flexboxgame.com

briantmaurer 10y ago
This is great. Until now, I have been using the "flex box froggy" game for reference. It has been faster for me to recall flex-box CSs rules by scrolling through levels in that game than reading any "real" documentation. The link you shared above is a big upgrade.
- fiveseven_ 10y ago
  Flexbox Game doesn't support Firefox 53 yet, but I can vouch for Flexbox Froggy as well as Flexbox Defense http://www.flexboxdefense.com/ http://www.flexboxdefense.com/
- nojvek 10y ago
  I really like what safari has done with its devtools for the style editor. Right-click inspect element selects the element you want to modify. Then change CSS properties in a GUI editor. Only problem is persistence. I love designing and tweaking with devtools iteratively. A lot of things are done in editors because it gives you a lot of control of logic. Designing assets in visual language like flash makes a lot of sense. Unity has the same idea. Create your assets visually and assign behaviors to it via code. Their GUI/code fusion is pretty cool. Writing a public var in a class exposes it in GUI and makes it bindable to other things via click and drag.

namuol 10y ago

> custom spacing functions Keep an eye on "Houdini" -- a new browser API draft that exposes the internals of CSS's layout system (and much more): https://www.youtube.com/watch?v=sE3ttkP15f8 https://www.youtube.com/watch?v=sE3ttkP15f8