Created by: lunelson
Since .col-
elements are required to be direct children of .row
elements, the styles in the make-col-ready
mixin can be more simply and efficiently applied (bytes saved), and IMO be more in keeping with the dynamics of flexbox (i.e. container > item
structure), if they are applied as part of the make-row
mixin using a direct-child universal selector.
As a further optimisation, I suggest removing position: relative
and adding explicit flex
values, since flex-item defaults are not cross-browser consistent. Also, an alternative way of writing the direct-child selector, rather than using the universal selector, would be .col, [class^="col-"], [class*=" col-"]
; this might be preferable for clarity, but I'm not sure if it creates the possibility of a specificity conflict. With the universal selector, the .col
classes breakpoint- and variant-specific styles clearly override the ones they inherit by being direct-children of .row
EDITS:
- restored the
make-col-ready
mixin with comment to the effect of deprecation, in order to not break dependent code