Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Alpha 6 Responsive Utilities vs. Beta 1 Display Properties

See original GitHub issue

According to the Docs, Beta 1 has done away with Alpha 6’s Responsive Utilities (specifically the .hidden-* classes due to conflicts with jQuery’s hidden() method. Fine, I get that.

However, in upgrading templates coded for Alpha 6, it became apparent to me that what the Docs say in regards to replacing them is a bit vague, so I thought I’d help by offering what I think is (hopefully) an accurate mapping of the Alpha 6 Responsive Utilities to Beta 1’s Display Properties.

The basics are this: any usage of the .hidden-* classes will now require multiple .d-* classes to achieve the same results.

Below is a table (hopefully pasting from Excel 2016 carries over, otherwise I’m gonna do a lot of formatting) showing the Beta 1 equivalents to Alpha 6’s classes. Please correct me if I am mistaken, or have omitted something, or perhaps am not taking the right approach with this.

Hopefully (if I am correct with my matrix above) this will help others and perhaps should be considered as part of the Migration section of the documentation, at least (until BS4 is out of Beta or Alpha 6 is a long and distant memory).

Issue Analytics

State:
Created 6 years ago
Reactions:35
Comments:25 (8 by maintainers)

Top GitHub Comments

9reactions

hugofelpcommented, Sep 8, 2017

I think removing .hidden- is a mistake, because .d- and .hidden- serve different purposes IMO, they just happen to modify the same property. The .d- classes are handy if you intend to switch the display property between inline, block, etc. That is no substitute for hiding and showing an element responsively. Let’s say, for example, you are implementing a previously defined component, that has responsive display property, alternating between block and flex. Now you decide to hide that element on mobile. With the new classes, instead of simply adding .hidden-xs-down, you need to define .d-none, and then learn the guts of the component in order to restore the correct display property for every breakpoint. Now the worst side effect: imagine you come back later on and edit the definition of said component, changing the display property. You have to be aware of, and edit every instance of the component that uses .d- for the unrelated purpose of hiding/showing.

Maybe if .d-none also had up/down variations, it could accommodate for both use cases?

@Joyrex great work with that table by the way 😃

7reactions

laxikacommented, Sep 6, 2017

These .d-* classes are so inconvenient to use. .hidden-*-up/down were a lot more appealing…