Best Practices for Integrating Client-First Design into Existing Projects

Hi everyone, I have a question. I’m working on an existing client website that currently doesn’t use the Client-First naming system or Relume modules. I’ve built new pages in a separate project using the Client-First cloneable and Relume modules, allowing me to work in a more organized way. Now, I want to move these new pages into the old project. My plan was to rename all the classes with a “2024_x” prefix to avoid conflicts. However, when I do that, I notice that some things break (margins and paddings stop working). If I simply copy the new pages into the old project, they inherit the old classes like “padding-global 6,” which is not ideal. What do you think is the best approach here? I want to avoid using the old class structure, but also don’t want to break the layout.

3 comments

Hidde C.
·
Ultimately, we want to migrate all the pages to the Client-First naming system, but it’s too much work to do all at once.
Kris
·
So I think there may a few different things going on here that is causing complications and may well continue to cause headaches until the whole site is migrated. Just a caveat going in - this all just educated guesses and I could well be wrong, but here goes... Are you able to share a preview link of the Webflow site? The margin and paddings thing is interesting but hard to comment on without seeing the setup. Do you have any hardcoded styles in code embeds? Or in the site code? I could be wrong, but one thing to consider first going in, is that you may need to work from the Relume Starter cloneable rather than the Client First cloaneable to ensure copy and pasting of Relume modules works correctly. Last year I had a similar situation, but ultimately ended up rebuilding the site in a separate project from the Relume Starter cloneable due to bugs and odd behaviour that I think may well end up being unavoidable when utilising disparate albeit complementary. I had a similar approach to you. I renamed existing classes, built out a style guide on a hidden page on the existing Webflow project etc. It's quite an old video now, but Finsweet did a livestream about converting an existing Webflow site to Client-First (v1). Early on the video, Joe explains that there needs to be some Client-Firsty elements/approaches to the existing build to make the process possible/more manageable. Even if you completely integrate Client-First into the existing Webflow project, I think you may still encounter issues when copying in elements from other projects.
Hidde C.
·
Hi Kris, Thanks for your detailed response, I really appreciate it! I’ve renamed all the new classes with a “2024_” prefix, and now I’m running into an issue where padding, margin-top/bottom, etc., are not working as expected (as you can see in the screenshots). Did you encounter this problem as well when you did your migration? If so, how did you fix it? No, I haven’t used any hardcoded styles in the code embeds or the site code itself. Everything has been done within Webflow.

Best Practices for Integrating Client-First Design into Existing Projects | Relume Community