Consistent border radius options for images and divs

depending on how many cooks are in the kitchen and what not - you can customize the rich text field to include a set radius and then create documentation within the style guide page itself as far as direction for other designers/developers - otherwise if its just you, then I would suggest using variables - I usually have 3 - small, default, large. You could name them semantically as well like "Radius/Image" or "Radius/Button" - really depends on the system you are trying to put together for it.

Thanks Matt! I think using variables makes the most sense for my case, so I’ll give that a try.

How do you suggest handling different font families? For example, I would like testimonials (within various different components, not just one component), to be a different font family.

• Should I create a testimonial class (in the text styles section of the style guide) and assign the alternative font family to it?
• Should I create a basic text style class with this alternative font family, so that I can use it in other elements (not just testimonials)?
• Any better option than the above?

yeah whats the difference between the two font families (or are there more than two?).

One is a sans serif which will be used throughout the site. The other is a serif which I’d like to use for testimonials, and maybe other areas. I’m planning only for 2 right now, but it’s possible that I will want a different header font as well, which would make it 3.

The testimonials will be scattered throughout the home page, so I’d like an easy way to keep them consistent.

okay, couple of approaches here - one is you could extend the text-style utility class and do something say text-style-serif or you could just create a combo class on say a custom class.

So lets say you have a testimonial component - and the actual testimonial text has a custom class like testimonial_text - you could add a combo class modifier is-serif to that class, and it'll change it to the serif font you want.

In order to do this though, you'll first lay down a new div, give it just the class is-serif and then set the font family for that div - nothing else. Then delete that div. To preserve this combo class so that it doesn't accidentally get deleted when you clean up your CSS, you would need to apply it to something on the style guide page - duplicate a header and add this combo class.

If this was all jibberish to you, I apologize. I would read over Class Strategy 1 and Class Strategy 2 - specifically around utility classes and custom classes to get familiar with the redirection I am taking you - and then if you have more specific questions around this - sharing a read-only would help a lot to provide more concrete direction/examples as well.

https://finsweet.com/client-first/docs/classes-strategy-1
https://finsweet.com/client-first/docs/classes-strategy-2

Thank you! I will definitely read the docs, and play around with the approaches you provided.

Awesome! If anyone has anything to add or opinions on this matter would love to keep the discussion going. Questions like this get me fired up! There's many ways to interpret CF strategies. 😄

Here's a similar issue I haven't figured out yet... When using a layout where the heading has a class of text-align-center, what do I do on smaller breakpoints when I want the heading to be left-aligned?

Changing the style of the class would be silly, and removing the class breaks it on larger breakpoints. Should I add some sort of combo class like text-align-left-mobile-landscape? Would love your thoughts!

yeah so in that case you would just use the Finsweet Chrome Extension and use the Merge Combo Classes - which will grab all the styles from the combo class and merge it into a custom class for that component. So lets say that its a heading in the layout1_component.

layout1_component
layout1_content
margin-bottom margin-small text-align-center
h1

I would just select the div that has those 3 combo classes on it, open up merge combo classes, and type layout1_heading. Once complete, it'll take all of those combo classes and merge it into a new class layout1_heading and in most cases, I'll even move this class down to the heading itself - rather than a wrapping div.

In most cases, shortly after I have pasted a component into a page, I have already renamed the component to make sense for the actual section. But in some cases, maybe I'm just getting right into some customizations, in which case I'll just use the component's naming convention so that when I do rename, it'll all clean up nicely.

I feel like CF gets a bad rap from some folks because they aren't using custom classes, but in actuality, you should be creating custom classes - but just with a high level of intentionality, while still following some of the naming conventions.

For the Relume components - we ship our components with a few extra wrapping divs because its easier to decouple, remove, and modify them once you paste them in but in realty - I'm removing like 3-4 divs per component almost every time, and combining them into combo classes or simplifying and usually for the reasons you just highlighted.

Okay this makes a lot of sense!! Thanks so much Matt. Do you have a project I could take a look at where you use this approach?

sure! I'll DM a read-only link to anyone that would like to see it - send one to you now!