feat(layout): alignment utilities 🛠

[alexsasharegan]

No description provided.

[codecov-io]

Codecov Report

Merging #941 into dev will decrease coverage by 0.04%.
The diff coverage is 20%.

@@            Coverage Diff             @@
##              dev     #941      +/-   ##
==========================================
- Coverage   42.62%   42.57%   -0.05%     
==========================================
  Files          96       96              
  Lines        2353     2358       +5     
  Branches      680      680              
==========================================
+ Hits         1003     1004       +1     
- Misses       1188     1192       +4     
  Partials      162      162

Impacted Files	Coverage Δ
lib/components/col.js	92.85% <0%> (-3.44%)	⬇️
lib/components/row.js	50% <25%> (-50%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a9bb99f...3980613. Read the comment docs.

[mosinve]

whats purpose of col attribute? played out with docs and dont find one...
it false by default and b-col sets class=col by itself. in case of this example:
<b-col col lg="2">1 of 3</b-col> we dont have to explicitly apply col class, as BS have common class definition for all col-*, so .col got redefined, as you can see here:

[alexsasharegan]

b-col sets .col only when no col-* class is given. It's the most basic, equal width flexbox class from the BS4 grid system (basically lets all the b-col's flex-fit themselves into the row). The reason it sets that automatically is that plain <b-col></b-col> tags should do something by default. However, the moment you change that up to do this: <b-col cols="6"></b-col> that default behavior of equal width columns becomes unexpected.

[mosinve]

KK, so what's the real needed use case of col prop?

[alexsasharegan]

Just following the BS4 library: https://getbootstrap.com/docs/4.0/layout/grid/#equal-width

[mosinve]

In case using col-* classes, .col is not needed. So we have to set .col class only when we have not any other modifiers. And this done by b-col itself. At BS examples, i think it excessive, you can check it from browser console by yourself, the reason they do it, only to show that div is col, it does not make any real work in case other col-* classes used.

[alexsasharegan]

I'm not sure I follow. b-col offers out-of-the-box responsive, flexible row columns. The moment you add in a specific column width, b-col adapts to that and chucks the .col class. This feels really nice as you develop because you just start using <b-col>s everywhere and then add props as your responsive layout needs change.

[mosinve]

I just wanted to know the purpose of col attribute of b-col, but already figured out it.... it's' used as fallback in BS.

[alexsasharegan]

Ah, then yeah. To be honest, the flex grid system is a little confusing. I followed their "spec" as closely as possible, and while I know how to use it well, I'm not super confident on the flex basis and all that behind it.

Makes it hard to explain 😜

[mosinve]

.col[1-12] works when size breakpoint classes not in action to retain flex ability.
<b-col col lg="2">1 of 3</b-col> Here at sizes lower than lg it fallback to .col and still use flexbox, otherwise, without .col, at sizes lower lg, it will be just block with width:100%

[alexsasharegan]

Exactly. Couldn't have said it better myself!

[tmorehouse]

Maybe we should mention that in the docs under b-col?