Powering up x-hide classes?

Beta
#1

Hi!

Every once in a while, I like to use the x-hide classes inside non-Cornerstone content such as a blog.

x-hide-xs = 480 & smaller
x-hide-sm = 481px to 767px
x-hide-md = 768px to 979px
x-hide-lg = 980px to 1199px
x-hide-xl = 1200px & up

Would there be any chance to “power them up”, so they follow new responsive styling?

Based on the base breakpoint, I’d like to add only one class instead of all that apply.

For example, If we add xr-hide-lg, that could apply to all breakpoints from lg downwards. Or something like that. I made the class up, because I understand that old ones need to stay as they are.

This is a rough idea, but It could be practical. :slight_smile:

1 Like
#2

Hi @Misho,

I see what you’re getting at here. With the new responsive styling system, we’ve actually done away with xs - xl naming since they’re going to be opinionated once it’s possible to set your own breakpoints. The only thing they’re used for now is keeping compatibility with the setting to hide during breakpoints. I don’t see us adding in more utility classes like this so you might just want to add some custom CSS to accommodate this on your site.

#3

In that case, great! I will use my own CSS. :slight_smile:

Pro as a system is still a bit detached from the content inside posts, but I’m sure the Theme Options reboot and the future updates will address this. I see less experienced members of the community struggling with it.

1 Like
#4

You’re right, we’re limited to the non builder content since it’s just using the stack styling. We’ve started working on the CSS foundations of the Theme Options reboot of how general (non Cornerstone) content will be styled across a site and its coming along nicely. It’s very early to give more info, but I can say there will be many options available for styling “the content” across the site.

6 Likes