cast-org/figuration

Utilities - Refactor

Closed this issue · 3 comments

mbrambilla commented

Thinking of refactoring the utilities. This would also introduce breaking changes, might have to think about what other refactors can be done, and consider a 2.x release branch. This issue will potentially expand with more notes as I think of things.

Including vertical alignment thinking here since they are partially related.

Also looking to hear thoughts on Bootstrap's idea to drop the minimum breakpoint abbreviations (xs by default) in the class names. Should Figuration consider also? Keeping in mind we want Figuration to be its own animal (with influences) 😃. Their PR with discussion can be found here: twbs/bootstrap#20934

Naming

  • Not sure about shortening class names (e.g., padding to 'p' or 'pad', margin to 'm' or 'mar') - I sort of like having it spelled out. Yes it would reduce generated CSS size, but does readability suffer?

Spacing

  • Not a fan of the ambiguous numbering scheme 1=x1, 2=x1.5, 3=x3. Possibly consider something along the lines of 0=0, 0_5=x0.5, 1=x1, 1_5=x1.5, ... 3=x3. Would .margin-xs-top-1_5 be more straight-forward, or more confusing. (#104)

Display

  • Drop '.hidden and .hidden-{bp}-up/down in favor of .display-{bp}-none Keeping .hidden-* as it is much more useful, even with the addition of .display-{bp}-none. (#98)
  • Add visible-{bp} along-side invisible-{bp} (#107)

Vertical Alignment

  • Drop .valign-* > .valign-item groups in favor of changing to valign-group-* >.valign-item and introduce .valign-{bp}-top/middle/bottom
    • or just drop in and suggest use of using .display-table/table-cell and .valign-{bp}-top/middle/bottom (#105)

Border Radius

  • Drop .img-rounded in favor of .radius ?
    • include additional edge/corner targeting - e.g., .radius-t for top edge (both top corners), .radius-tr for top-right corner, etc.
    • [ ] include responsive variants? dropping since this will add a ton of generated CSS.
    • include 0 variants?
    • include component sizing variants? - this might be confusing with breakpoints and sizes sharing overlapping abbreviations - e.g. .radius-sm-tr-lg - small and above breakpoints round the top right corner with the large component border radius
  • Drop .img-circle in favor of `.radius-circle' ?
    • [ ] include responsive variants? Also dropped since its use is most likely very limited.

Floats

  • Drop.pull-left and .pull-right in favor of adding .float-{bp}-left\right\none (#101)

More to come.

mbrambilla commented

Switching border radius notes from .rounded-* to .radius-* to be more representative of properties.

mbrambilla commented

After considering for a while, thinking the smallest breakpoint should be dropped where needed in the naming conventions. This keeps inline with the mobile-first thinking. Drop all -up/down variants unless there is no matching override (I think this would only leave .sr-only-{bp}-up/down ). Also filtering back to grid layout.

This should allow for a smaller compiled CSS and remove a bunch of overlapping classes.

Naming convention will remain mostly, like it is now, and be base{-bp}{-dimension/direction}{-size}.

For example:

  • Columns: .col-6, .col-md-6 (using dimension)
  • Flo: .pull-right, .pull-md-right (using breakpoint and direction) (should we rename to .float-{} ?)
  • Buttons: .btn, .btn-xl (using sizing-not breakpoint)

Should we make component sizing available responsively, or is it overkill?

This could potentially greatly increase CSS complexity and cause extreme naming confusion.

Probably should skip and revisit this idea later.

For example
.btn, .btn-xs, .btn-md-xs

mbrambilla commented

moving this over to v2.0.0 milestone, since that is where it hit.