Can we drop Flex Col Expand?

[marcoscv-work]

Could It be replaced by new BS 4.0 > utilities > flex ?
https://getbootstrap.com/docs/4.0/utilities/flex/

[pat270]

I don't think we can, don't see a direct replacement for something like:

|------------------ container ------------------|
|-------- flex-col-expand --------||-- flex-col--|

[marcoscv-work]

Hey Patrick!

It's true there is not a direct replacement class by class but I think we could use new BS4 grid + BS4 utilities to do it, I mean we can get the same result with closer markup to BS4 and its grid, I think it would be great because we could use in a more friendly way all new utilities like order-, col-sizes, etc.

I've created an example here only with BS4:
https://codepen.io/marcoscv/pen/EvrgrZ

There you can see a similar display and one particular example I think is great: the complex grid, where we can see the resizing or reorder in differents devices:

Desktop:

Small Device:

Extra small device:

UX guys wanted to do layout size/order changes inside lists for mobile, and if we can do it directly with BS4 flexbox/grid I think we can make Clay a little bit cleaner. What do you think?

[pat270]

Hey Marcos,

It would be nice to use Bootstrap's classes. The problem is we still need to add in some CSS properties to make the grid function properly when there is long content with no white space. We can add it to Bootstrap's col classes which would require us to duplicate all the .col classes for every screen size. If we decide not to add them on the col class, we would create our own class which is essentially the same thing thats happening with .flex-col-expand. It's also hard to say what kind of bugs it will introduce across the grid framework, whereas, having it scoped to an unrelated class it becomes isolated and easier to debug/support in the future.

What kind of layout size/order changes are they wanting to do exactly? Maybe we need to rethink what we are including in Lists? I'm not a big fan of using order unless we have to. It throws the focus order off when tabbing through content.

If we can accomplish this with Bootstrap's grid I'm all for removing .flex-col-expand.

[marcoscv]

Hey Patrick! Thank you for answering me so quickly 😊
All of it make sense, I didn't think about the long content, but yes, we always will need to accomplish that.

If finally we are able tu use BS grid we could rename the class as a modifier of col, something like col-no-white-space 😅 (better think on better name). Or even better, we could try to make aware Bootstrap team about this need.

About reorder, previus year we wanted some info reorder for lexicón but it was discarted because of tecnically reasons, I agree about don't use it but maybe some customer wants and I think all would be easier for them if we use BS grid as much as possible.

Thanks guys!!