Clarity: Upgrade to BS4 Alpha 6 Grids + Utility Classes

[adityarb88]

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[x] enhancement

Upgrade BS4 from alpha 5 to 6

alpha 6 changes some grid + utility classes so it may be a breaking change.

https://blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6/

[manju-reddys]

Where is this on your priority list?

[adityarb88]

Hi @manju-reddys: This is on our priority list but we have to analyze how big a breaking change this is. Also, since this is a breaking change this change can only go in 0.9.0 or 0.10.0. We don't have any concrete dates for 0.9.0 yet. But this shouldn't affect anything major apart from the Grid class names and a few other utility classes. The only major component that we use from bootstrap 4 is Grids and that is fully functional right now. Could you please let us know which feature are you looking for from Alpha 6? cc: @jaffoneh

[manju-reddys]

Hi @adityarb88,

I'm particularly interested in equal width column. I'm working on portlet layout module, user can drag and drop the widget (a portlet). When they drop the widget on the existing row it will adjust the width (just css) on to dropzone (that changes dynamically) and if one of the widget width changed (javascript => resize) then the rest of the columns get adjusted automatically (again css). I can't use col-* because V4-RC6 col will take care of wrapping when the columns overflown into new row.

For now I don't have much dependency on Clarity but when I use this portlet layout module in the main application it may conflict.

I hope I have given enough info!

[adityarb88]

Hi @manju-reddys: Although the class names have changed in Alpha 6, I believe we do provide that functionality:

Is this what you are looking for?

[manju-reddys]

Hi @adityarb88, There is difference between .col-<breakpoint> and just .col'. The.col-stacks up when the size reaches the break point but the.col` won't.

[adityarb88]

@manju-reddys: But you could use the lowest breakpoint right? .col-xs?

[manju-reddys]

Hi @adityarb88, Better I will showcase when I finished my project. .col-xs will not work in my case.

[manju-reddys]

Hi @adityarb88, No. here is the reason:

When user drag and drop the widget first time, it will have default width (whatever BS4 col have) and one can drop up-to 6 widgets in one row (we enforce the restriction). In default mode all column's will take up equal space. If user resize one or more of the widget the remaining widgets will adjust the size automatically (CSS controlled). If any of the widget or sum of the widgets size greater than the container size then it should stack up/move the columns that are not fit in the row to new row (like using col-xs-12 col-sm-3). If we use the col-xs-<size>, it always allow only one column per row which is undesirable in my case.

And also BS4 R6 responsive utility classes are very useful.

[manju-reddys]

which release it would go in? I have strong requirements to upgrade to BS 6.

[mathisscott]

@manju-reddys : What do you mean when you say "strong requirements"? It will help us to prioritize this issue if we have a better understanding of your use case.

[mathisscott]

Closing for now. Will open a new issue when we decide to upgrade to the latest BS4 version.

[manju-reddys]

I would recommend to remove bootstrap dependency that helps who is keeping up with bootstrap version will not consider to discontinue using clarity (like me).... For me writing components are lot easy over customizing css (which also need to document not easy job).... Keep up the good work, will consider the clarity in the future work :)

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.