Feature request: variable sizes

[peacechen]

I've come across situations where a flexible size is necessary. In the web world this is known as CSS Liquid Layout. Take this 3-column example:

|  Col A  |       Col B        |   Col C  |

The desire is to fix the widths for Columns A & C, and to let Col B take up the remaining space. The grid code might look something like:

<Row>
  <Col sizePoints ={100}>
    // A: Fixed size content
  </Col>
  <Col sizePoints ={*}>
    // B: Variable sized content
  </Col>
  <Col sizePoints ={80}>
    // C: Fixed size content
  </Col>
</Row>

Is this possible in the current code or will changes need to be made?

[idibidiart]

It says it in the initial portion of the Readme: you can use Flexbox sizing if you wish! Just set Flex to 1 for the middle column and it will overwrite the default Flex 0 (or at least it should, check the code for Column.js)

[peacechen]

Thanks for the tip. I've been struggling with this because row breaking should still happen for small screens, but setting flex:1 applies to all screen sizes.

For example, on large screens it should be one row with a variable sized content column:

|  Col A  |       Col B        |   Col C  |

But on small screens it should break:

|  Col A  |
|  Col B  |
|  Col C  |

I can get one or the other but haven't been able to get both.

[idibidiart]

At one point I wanted to remove all the xxSize xxOffset xxHidden pragma in favor of xxStyle where xx is small, medium, large, xlarge. That way you have full control but you lose the ergonomics.

Why don’t we just add xxStyle in addition to the ergonomic shortcuts and give xxStyle precendence in case someone uses both on a given row/col.

[peacechen]

That sounds like a great solution and offers more flexibility :)

If xxStyle also overrides xxSize, how would percentage size be set?

[idibidiart]

I think so too,

But we could also add xxFlex pragma for convenience ... all pragmas are overwritten by "style" so same for xxStyle in that it will overwrite xxFlex if xxStyle contains a flex declaration.

It's a small change and I can add it but I'm slammed all week. Next week I may get some time at night. So if you wish to go ahead and add it in your branch I'll be happy to review/comment and if any changes needed we'll decide on those and I can merge your PR. But if you can wait till next week I can do it, just not sure which day next week.

[idibidiart]

xxStyle should also have precedence over "style" when xx is the current screen size.

[peacechen]

I'll look at it if I have time, but also slammed at work here. This isn't a show-stopper for us so no rush.

[idibidiart]

Cool

off-topic:

In other news, have you seen this? Just came out today:

https://github.com/vincentriemer/react-native-dom

Blows my mind. It means that we can combine react-native-responsive-grid with react-native-dom to build apps that will look like desktop apps on large screen sizes and like mobile apps on small screen sizes AND it will share all the code for native mobile and responsive web.

It's insane that he ported Yoga to WASM.

[peacechen]

Wicked! I had attempted to build our app for web with react-native-web. For simple projects it's doable, but for complex ones there's too much that's broken. It would've been a monumental effort to make the necessary adjustments (and quite ugly too, peppered with a lot of conditionals). react-native-dom looks like it could be [almost] seamless. Thanks for the heads up!