G'day all, quick question about default font size. When I copy and paste a Relume component into Webflow, the paragraph elements automatically have the "text-size-medium" class added to them. While it's a good size for most cases, not every client wants that size. I'm wondering if there is a way for this to be removed as having to go into each text element and remove it can be very tedious. Cheers
The easiest and recommended way to handle this is to adjust the style guide according to your project. text-size-medium can be whatever size you want it to be. Its a type scale though so I would adjust size-large and size-regular and so on accordingly.
I know you had asked this question before Sam, apologies for not responding sooner - thanks for bumping it back up though - hopefully that helps - if you have additional questions though, happy to help!
Hi , thanks for your response.
Yes I understand that is an option but it doesn’t seem to make much sense to have to go and change these utility classes. The whole point of client first is to have descriptive class naming conventions. Would it not be better to not assume the text size and let the user set the base font size in the “Paragraph” element in the Style Guide?
p.s. I’m still relatively new to Webflow, so please excuse any misunderstandings I may have. Just trying to work out best practices
Thanks
The whole point of client-first is for there to be an open playbook of how a webflow site should be built. Modifying these utility classes is not recommended, but its not against the law either. As a designer, you have the freedom to do what you need to do. Be intentional about your decisions, rather than random or haphazardly about them. If you want just a single section to have bigger text, swap the class. If you want all text-size-medium to be smaller, do as I said above. Lots of ways to interpret Client-First.
I feel like a lot of people take these guidelines too literal.
Some awful examples of how sites are built without client-first:Medium - medium what?Medium Text - again, medium weight or medium size?Text 24 - huh?m - ??med - ??fs-1 - ?? Bootstrap 5text-base - ?? tailwind
With client-first:text-size-medium - descriptive - the size of the text is medium. But what does medium mean? Medium is relative to small and large. You can scale down your entire type scale if that is what your design direction calls for. With a single change to a class (and a single change to a couple other classes as well) you can modify 90% of the text across 1,300 components.
I actually don't necessary disagree with you that maybe the initial paragraph tag within a section shouldn't have this class, but I'm also not sure the alternative is much better for most use cases. I think things start to get tricky when you look at the scale of the library and the various pieces of it and the layouts that some of these components make up. It's not as easy as it sounds.
Yes, that all makes sense. So should the 'Paragraph' element in the style guide generally just be used to edit the font family?
I would likely change the font family at the body tag "All Pages" pink tag level for a full site, global change to font family. But obviously if you have different fonts for headings or quotes or what have you, then you'd narrow it down to those elements.
You generally want to look at your decisions in a "cascading" way - this is how CSS (Cascading Style Sheets) works and would prioritize your decisions accordingly.
Webflow has a great starting point for HTML/CSS doc here.
This, along with a few others, can actually be found in the many resources sections of Client-First.
Happy to answer any and all questions you may have around this though if you do continue to have any specific questions or roadblocks Sam. I've got your back here! 💪
