3 ms·

Make flexbox the default layout for everything, and add a flex-snap feature that will snap to the nearest multiple of some given size. I'm not sure we actually

Make flexbox the default layout for everything, and add a flex-snap feature that will snap to the nearest multiple of some given size. I'm not sure we actually would still need grids. I also wonder if you couldn't have a more transparent and parameterizable auto width algorithm based on a lowest cost solver. So you could say "If this element wraps, it's cost 50", meaning you want all the boxes to stay on as few lines as possible. Or "Every em of height this element has is cost 10, if anything triggers a scrollbar, that's cost 100". Maybe instead of flex-grow, you'd just add negative cost to the width of something. You could have alternate rulesets so the browser could choose one or the other for lowest overall page cost. Also, class inheritance. I don't see why that's not a thing. "Not needing processors" should be a pretty big design goal.

4death4 3y ago
How would your flex box solution handle a simple two column layout where the first column is a variable size? There isn’t a fixed multiple to “snap” to.
- eternityforest 3y ago
  Didn't think of that case! But if you had a full algebra/constraints/logic programming system, you could set a solver rule where the first column items had width X, with fairly high priority. And other rules(like fit-content) on that same property, to specify what the width should be. The solver would figure out what X should be, and everything in the first column would have that width unless something even more important changed it. You could even give rules a "layer" in addition to the solver cost, and properties would only take rules from the highest active layer, so you could still do overriding, just explicitly instead of with specificity. To avoid confusion with different CSS files, layer could be a hierarchal tuple, and you could manually specify the layer of an imported file, forcing all its layers to become sub layers of the one you specified, so you could override a file, or merge two files in one layer, etc.
- onion2k 3y ago
  You could snap to a percentage width.
- maxloh 3y ago
  Maybe add `flex: 1` to the second column?
  - eternityforest 3y ago
    The second column can't always just be a tall column shaped div, because you probably want to reflow 12, 34, 56, 78 on mobile where you don't have room for 2 columns, to something like 12345678, not 13572468
    - maxloh 3y ago
      You can reorder flex children with the CSS `order` property. https://developer.mozilla.org/en-US/docs/Web/CSS/order https://developer.mozilla.org/en-US/docs/Web/CSS/order
felixfbecker 3y ago
Nothing stops you from adding `<style> * { display: flex }</style>` to your index.html
maxloh 3y ago
I like this idea. Would that impact performance negatively?
- eternityforest 3y ago
  Looks like someone actually tested it, flex is a bit slower but not terribly slower. https://stackoverflow.com/questions/39463220/does-deep-nesting-flexbox-layout-cause-performance-issue https://stackoverflow.com/questions/39463220/does-deep-nesti... I'm guessing the solver engine would need lots of work to optimize, but I've never implemented that kind of thing so I don't quite know. I'm not even sure what kind of library could handle it. Something like OptaPlanner?

4death4 3y ago

How would your flex box solution handle a simple two column layout where the first column is a variable size? There isn’t a fixed multiple to “snap” to.

eternityforest 3y ago
Didn't think of that case! But if you had a full algebra/constraints/logic programming system, you could set a solver rule where the first column items had width X, with fairly high priority. And other rules(like fit-content) on that same property, to specify what the width should be. The solver would figure out what X should be, and everything in the first column would have that width unless something even more important changed it. You could even give rules a "layer" in addition to the solver cost, and properties would only take rules from the highest active layer, so you could still do overriding, just explicitly instead of with specificity. To avoid confusion with different CSS files, layer could be a hierarchal tuple, and you could manually specify the layer of an imported file, forcing all its layers to become sub layers of the one you specified, so you could override a file, or merge two files in one layer, etc.
onion2k 3y ago
You could snap to a percentage width.
maxloh 3y ago
Maybe add `flex: 1` to the second column?
- eternityforest 3y ago
  The second column can't always just be a tall column shaped div, because you probably want to reflow 12, 34, 56, 78 on mobile where you don't have room for 2 columns, to something like 12345678, not 13572468
  - maxloh 3y ago
    You can reorder flex children with the CSS `order` property. https://developer.mozilla.org/en-US/docs/Web/CSS/order https://developer.mozilla.org/en-US/docs/Web/CSS/order

felixfbecker 3y ago

Nothing stops you from adding `<style> * { display: flex }</style>` to your index.html

maxloh 3y ago

I like this idea. Would that impact performance negatively?

eternityforest 3y ago
Looks like someone actually tested it, flex is a bit slower but not terribly slower. https://stackoverflow.com/questions/39463220/does-deep-nesting-flexbox-layout-cause-performance-issue https://stackoverflow.com/questions/39463220/does-deep-nesti... I'm guessing the solver engine would need lots of work to optimize, but I've never implemented that kind of thing so I don't quite know. I'm not even sure what kind of library could handle it. Something like OptaPlanner?