Community forum for knowledge and support

Updated 10 months ago

Is There a Method in Relume or Client First if You Want to Change Something Just on Certain Breakpoints?

At a glance

The community members are discussing methods to change styles on certain breakpoints, such as making text smaller on mobile devices. Some suggestions include using duplicate utility classes or combo classes like is-tablet or is-mobile-portrait. The Relume style guide is mentioned as having hide-mobile and hide-desktop combo classes that could be useful. One community member tried creating a new element and using hide/show on different breakpoints, while another mentioned the "duplicate-and-modify" approach, such as turning text-size-large into list-text-size-large for ordered lists. There is no explicitly marked answer, but the discussion explores different techniques for handling responsive design changes.

Is there a method in relume or client first if you want to change something just on certain breakpoints?
i.e. text in a list should be smaller on mobile to fit better but the class is "text-size-large"
Any thoughts?

B
S
5 comments

I think the standard convention is to make a duplicate utility class or to use a combo class with something like is-tablet or is-mobile-portrait. Not certain, though.

If I recall correctly, the Relume's style guide cloneable has a hide-mobile / hide-desktop combo class. Something like that would probably do the trick.

thank you . Yes, the style guide does have those combo classes, which works great. But sometimes I'll want to change something and not create a whole new element.

For example, I have a list that I wanted the text and icons to be smaller just on mobile.

I ended up creating a new element and did the hide/show on different breakpoints. Wondering if that's the best method though.

I gotcha!

I've done the duplicate-and-modify approach before for stuff like that. Especially text treatments. E.g., turning text-size-large into list-text-size-large for ordered lists & such. That might not be best practice either, though πŸ˜…

Add a reply
Sign up and join the conversation on Slack