This explores adding responsive display utilities, replacing the static inline
, inline-block
, and block
options we have currently. The twist here though is that the lowest breakpoint doesn't have a breakpoint abbreviation in the class name.
Here's an example of what I mean with just the display: none
utility:
/* Same as `.d-xs-none`, but without the `-xs` part */
.d-none { display: none !important; }
@media (min-width: 576px) {
.d-sm-none { display: none !important; }
}
@media (min-width: 768px) {
.d-md-none { display: none !important; }
}
@media (min-width: 992px) {
.d-lg-none { display: none !important; }
}
@media (min-width: 1200px) {
.d-xl-none { display: none !important; }
}
I'm exploring this since the lack of xs
could make it an easier transition to v4 for those who used the v3 utilities. Plus it's a bit more accurate to what's happening in the compiled CSS since there's no media query around those styles.
Thoughts?