4 ms·

Please, please have constraint-based layout support- I know you want to have it, given your work on react-gss :-)

• yuchi 12y ago
  Given the presence of https://github.com/facebook/css-layout https://github.com/facebook/css-layout it will probably flex-based. Not cool as a constraint based layout but good enough for easier portability of knowledge.
  • drcode 12y ago
    Can I create the largest possible square div in a rectangular div with this library? That is my standard test as to whether a layout framework is advanced enough to meet my basic needs. (vanilla CSS fails this test of course, even with the most recent extensions, AFAIK)
    • yuchi 12y ago
      You can do that with some funny inline-block wizardy on Vanilla CSS by the way. I don’t currently know if flex-box helps here. I think not.
      • carterehsmith 12y ago
        Source? AFAIK if you want your border, padding and margin respected, there is no way to do the above in vanilla CSS. Which is why css-flexbox was proposed.
        • yuchi 12y ago
          Here it is (it’s border-{top, bottom} based, not inline-block) http://www.mademyday.de/css-height-equals-width-with-pure-css.html http://www.mademyday.de/css-height-equals-width-with-pure-cs... The issue is that it’s only width-constrained.
    • carterehsmith 12y ago
      With css-flexbox, you probably can. Your DIV should have flex-grow: 1 which will make it take the allowable space along the "main axis" (shared with other flex-growers) and then align-items: stretch, to pick up all available space along the "cross axis". With some nesting, you can do pretty much whatever you want except for the grid layout. Grid layout is another thing coming but barely implemented in the today's browsers. Anyways, flex-box is not available in IE < 10. IE10 requires ms- prefix. If React makes it available everywhere (IE8+) that will be really great.
      • drcode 12y ago
        Thanks, but last I looked into this it wasn't possible for this to work for a square in a parent rectangle of arbitrary dimensions. Can you find an example that works, using jsfiddle or something similar?
    • vkjv 12y ago
      Are you excluding hacks? Because you can do this pretty easily in CSS2 since padding is always relative to width. Make your square div { width: 100%; height: 0; padding-bottom: 100% (or whatever ratio you want, doesn't have to be 1:1); };
      • drcode 12y ago
        That only works for one dimension, can't handle square in landscape rect.
• gshearer 12y ago
  What would be awesome and truly useful is real constraints, like in CAD software. I should be able to express every width, height, x, and y value as a variable, or as a function of other variables. So I call the device height "A", the width "B", and express the rest of the UI in terms of those variables. Then at runtime "A" and "B" are defined, and the rest of the layout magically does its thing. What Apple calls "constraint-based layout" is cool, but does not follow the classical definition of what a constraint-based layout actually is. They don't use variables anywhere in the IB UI. You can only define proportions in code which is incredibly clunky.
  • mlvljr 12y ago
    QML has exactly this -- and you write the constraints (arbitrary complex, almost) in Javascript :)