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?
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 π