Skip to content
GitLab

Overhaul responsive, display, and visibility utilities

Merged Mark Otto requested to merge docs-structure into v4-dev

Bootstrap has a bit of a utility crisis right now. We've added a metric ton of new ones to v4 during our alphas, but we didn't really get back to cleaning things up that were already there. In particular, I'm looking at those .hidden- and .visible- classes, their documentation, and how to use them with the display utilities.

As it stands now, each of these families of utilities convolutes things a bit. Responsive visibility utilities don't actually toggle visibility, there's overlap with the display utilities, and we've gone a bit too far into providing utilities for utilities.

This PR revamps things to hopefully clear things up and reduce some duplication in our code.

  • Drops .hidden-*-down. If you need to hide something on the lowest viewport and then show it at a higher one, use two utilities. Example: <div class="d-none d-md-flex"></div>.

  • Drops .hidden-*-up. This is the same as our responsive display: none utility. Instead of .hidden-xs-up or .hidden-md-up, use .d-none and .d-md-none.

  • Relocates and renames all .hidden-* utilities. Instead of .visible-*, these classes start with .d- and now reside in the _display.scss file alongside our other display utilities.

  • Updates the visibility() mixin. Previously this mixin was only for hiding content with visibility: hidden, but now we have two utilities—.invisible and .visible—that make use of this mixin with an added parameter. there is presently no default value for this mixin. Moved visibility utilities docs to new file, adding docs for newly added .visible class.

  • Revamps the display and responsive utilities docs. We've renamed display-property.md to display.md and moved the newly renamed print utilities docs there. In addition, the responsive-utilities.md file is no more. Instead, we have a primer docs file that introduces folks to common layout-related utilities.

Okay, so that's a lot, but what's the savings? We drop 50 lines of code in each CSS bundle. Not a lot in the grand scheme, but this is a significant update to simplify an important area of our codebase.

Still to do:

  • Review examples to see if classes need updating
  • Clean up docs CSS to remove responsive test code
  • Write the new primer docs for the Utilities for layout page
  • Update migration guide

Also happens to fix #21965 (closed), and also fixes #21762 (closed).

/cc @cvrebert @bardiharborow