The Main Differences Between Relume and Client-First Style Guides and Spacing Strategies

For the spacing strategies, go check out the Client-First Doc. ✌ https://finsweet.com/client-first/docs/spacing-strategy#spacing-block-strategy

- Can you shed some further light on this topic please?

I’d just like to know the core differences and pros/cons of each Style Guide (or what the differences are and what to look out for).

Thanks!

sure - I think it ultimately comes down to personal preference. Wrappers can sometimes create unintended results with div nesting, while spacers create empty divs. I personally use wrappers, but I also only using spacing utility classes where necessary - typically for spacing something differently from something else - small adjustments. The bulk of my spacing is built into custom classes.

As Marc-Andre pointed out though, that link is a really great overview of the two different strategies.

One thing that I think gets very misunderstood about CF is the keyword "strategy" - I interpret that word to not mean rule, law, etc. I think overtime, you'll get used to how to create classes in a way that is consistent, thus creating a project that is easily understood - using spacing divs for the sake of using spacing divs and avoiding using spacing on custom classes is usually where I see things start to fall apart for me personally.

- In summary, what are the core differences between the two Style Guides? In a nutshell, why are there two? Where exactly do they differ, without any customizations being made to them?

If I installed each one, on two different sites, what would the differences be exactly?

Thanks what I’m getting at here.

Thanks so much! 🙌

ah okay, got it.

Style guides, apologies I missed that piece.

Version number aside - because thats a whole other ball of wax, the core differences between the Relume style guide and the client first style guide is literally just the layout of the actual style guide page. Our style guide is literally built using the same methods as CF, it as all of the same "core" pieces. Its just a different layout. How the pieces are actually being presented

Ohhhhh…. so the spacing strategies are the SAME, and everything about the classes and methods are the same?

It’s literally only the appearance and layout of the Style Guide page, that’s it?

LOL… that would be great.

I remember about 1-2 years ago, this was not the case. But maybe that was cleared up by some changes to the way Client-First does things?

There used to be differences in spacing methods.

yeah, and the dropdowns that we have for preferences, is so that when you paste one of our components into either the Relume style guide or the CF style guide, we are using either wrappers for spacing or empty divs (blocks).

this menu inside of the library, if you hover over each option, explains a little bit more about the differences as well.

But 1-2 years ago there were actual, literal differences in methodology though, right? sent me a Loom video a long time ago about this.

I’m glad to here that’s a thing of the past (it seems).

Does “Wrappers” have less clutter and bloat than “Blocks”?

yeah I can't speak for 2 years ago but I would say its a thing of the past, we're now apart of the Finsweet Client-First board and actively advise on core changes to Client-First

yeah thats one argument for it, for sure

Sorry, so “Wrappers” is cleaner?

it really depends on how you deploy the strategy - as I was saying, I don't create a div and then do margin-bottom margin-small - if its just wrapping a custom class, I'm just going to add a bottom margin 1.5rem instead

thats how most of our components are built (nested divs with just margin-bottom margin-small) because we are not going to be opinionated on how a class should be named, we do as little direction as possible, giving you more flexibility to customize it

So, the new default way would be Relume Style Guide + Wrappers strategy?

I’m trying to latch onto something “standard” here rather than having too many choices. Ya know?

yeah that is the default

I would roll with that

Awesome. I appreciate you. This has been very helpful.

Gonna upgrade to Annual. 🙂

awesome Chris, this was a good convo for sure - seems like we should do an office hours chat on something like this - would that be of interest to you?

appreciate the support! 🙌

and other topics im sure

Absolutely . 💯

alright, keep an eye on the community roundup - coming soon!

I would love to know the EXACT differences between the two Strategies and the differences between the two style guides.

Also, in general, I think the University needs some updating and some more love. 🙂

color variables, etc. etc. etc.

dude, are you spying on what I'm working on or what?

🤣💪😉

we are on it!

I’ve seen a number of complaints in the YouTube comments about things being different and outdated, etc.

So very happy to hear it’s going to get a revamp.

Training is sooooo important to user adoption and reducing churn, etc… and, I mean, it’s just the right thing to do. 🙂

it is

and we'll be taking it further than most

May you all be blessed! Seriously LOVE you all and what you’re doing.

Thanks again! ✨

you bet, have a good one Chris!

This topic was exactly what I was searching for. I’ve built two websites with Relume that use the spacing wrappers, and I continue to use Relume components to add to those builds. I’m just now getting myself up to speed on the updated documentation for the new spacing methods with Client First, so this discussion was helpful to read through.

Also, I’ve been hoping that team Relume would be adding updated educational content to the university. I love to hear it. Any rough timeline of when we should expect to see that new content?

we're working feverishly on it - there are at least two of us, if not more, solely dedicated to it. Been a full team effort though and its one of our main priorities. With all that said, we do not yet have a set date. It can NOT come soon enough though, we hear you!