Adjusting Text Size for Specific Breakpoints in Relume/Client First

·

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?

5 comments

Brandon B.
·
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.
Sara M.
·
thank you Brandon B.. 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.
Sara M.
·
I ended up creating a new element and did the hide/show on different breakpoints. Wondering if that's the best method though.
Brandon B.
·
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 😅
Sara M.
·
interesting!