Differences Between Relume Template and Client-First 2.1 Template

Vojta H. the only difference between the two are the variable structures and how we present the actual information on the style guide. Otherwise, we work very closely with Finsweet on the definition of classes and the use of them.

OK relume uses 5% in padding-global, CF 2.1 uses 2.5rem I guess? There are no 'alternate' buttons in CF... but is that all? .)

because some elements appear broken when you import them to CF 2.1 template

Matt J. so fyi not only variables are diferent but these are also different: padding-global: 5% x 2.5rem padding values in general line height and type breakpoint scaling button classes (tertiary, is-alternate are missing in CF2.1)... why does relume SG go with 5% padding-global instead of 2.5rem?

so this all leaves relume styleguide as the only viable option if you don't want to make any extra effort before you even begin designing?

Vojta H. yeah apologies, I didn't understand the context for why you were asking this and I also asked one of my teammates about this and it turns out there are some subtle changes for sure. Using the Relume Style Guide is the recommended approach to prevent any importing issues. Can you let me know why you are wanting to use the CF style guide?

for one, I'd love to understand why Relume went for 5% padding-global instead of a rem defined padding-global... just veery curious

okay well the main reason is that on smaller screen sizes the gap is then relative rather than a fixed number, making for a more "automatic" adjustment instead of having to worry about adjusting this at different screen sizes

you can always adjust this value within your own project, editing global utility classes can easily be done.

got it! thanks for the prompt reply Matt

no problem