Hey all! 👋 Is there a training or walkthrough on the main differences between the two primary Style Guides (Relume vs. Client-First) and the Spacing Strategies? Doesn’t need to be long… but just the ins and outs and pros/cons of each. Thanks! 🙌
For the spacing strategies, go check out the Client-First Doc. ✌🏼 https://finsweet.com/client-first/docs/spacing-strategy#spacing-block-strategy
Chris M. 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.
Matt J. - 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.
Does “Wrappers” have less clutter and bloat than “Blocks”?
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. 🙂
and other topics im sure
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.
🤣💪😉
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
Thanks again! ✨
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?
