Applying a Style Guide to a Webflow Site for Consistent Design

Quinn B. · 2024-05-09T20:29:15.663Z

Hi There! First time poster here. I have a client that has tasked me with taking an existing Webflow site and to "smooth out the edges". It was built with no style-guide in mind so the typography is all over the place. I love how Relume provides their styleguide inside figma, and all you need to do is update the styles there and it proliferates across the entire project. Is there a way to apply that same mode of thinking to this site? For example, would I be able to publish Relumes styleguide, and then apply those styles across the site? I hope that makes sense. Would anyone have guidance on how to

Applying a Style Guide to a Webflow Site for Consistent Design | Relume Community

9 comments

· Sorted by Oldest

Matt J.
·
Quinn B. well in theory yeah you could copy in our style guide which will give you those classes that you need to make those changes across the site but it really depends on how the site was built and if it was built with cascading in mind. If it was created very haphazardly I would say its going to be challenge no matter what route you go. Even after you paste in our style guide, there will not be an "automatic" way for those classes to apply to this project, you would still need to manually restructure divs and assign the proper classes etc to the project.
Quinn B.
·
Hi Matt! Thank you for the quick reply!
Matt J.
·
But I would say pasting in the style guide into the webflow project, and starting to move it towards a client-first organization and strategy will put that project into a much better state, but its not automatic - it will be manual. And it will take time. If you are new to Webflow, I would factor about 8-12 hours for a 5-10 page website. Depending on complexity, maybe more. If you are more experienced, and have the keyboard shortcuts down, I could see it taking less time overall.
Quinn B.
·
Perfect. Thank you for this guidance. I'm still learning the ropes of Webflow and Relume so unfortunately I have that working against me as well. When you say "Paste in the style guide" ... how would go about doing that?
Matt J.
·
so you could clone the style guide, as a new project, open that project, navigate to the style guide page, select the page-wrapper div and copy, then open up the existing project, create a new draft page and call it Style Guide, and paste it into that page. Now you have all the necessary classes you will need. I would also make sure to install our chrome extension and have class sync turned on before doing this, this will help bring in any existing classes you might have in the project and bring those styles INTO the style guide as well - at least in theory. So lets say the existing project has a button class, our style guide also has a button class and it'll sync the styles into one which would be nice.
🙌1
Quinn B.
·
Perfect. I'll take this path and report back if I run in to any issues. Thank you so much for taking the time to help me. I really appreciate it.
Matt J.
·
No problem, best of luck Quinn!
Blair
·
Quinn B. you could also consider rebuilding the site using resume and Webflow. That way you have simplicity structure and control over styles. Hard to say for sure but my guess is this will be easier in the long run (without ever seeing the site you are referring to) 😉
💪1
Quinn B.
·
Blair Funny you mention that. Thats actually the path I've ended up taking. Or, more so a merge of the two paths laid above. The site is about 10 pages, so in theory it shouldn't be too time consuming once I hit a good rhythm. Thank you all for your tips and guidance. Its really helped a ton.
🙌1

Matt J.
·
Quinn B. well in theory yeah you could copy in our style guide which will give you those classes that you need to make those changes across the site but it really depends on how the site was built and if it was built with cascading in mind. If it was created very haphazardly I would say its going to be challenge no matter what route you go. Even after you paste in our style guide, there will not be an "automatic" way for those classes to apply to this project, you would still need to manually restructure divs and assign the proper classes etc to the project.
Quinn B.
·
Hi Matt! Thank you for the quick reply!
Matt J.
·
But I would say pasting in the style guide into the webflow project, and starting to move it towards a client-first organization and strategy will put that project into a much better state, but its not automatic - it will be manual. And it will take time. If you are new to Webflow, I would factor about 8-12 hours for a 5-10 page website. Depending on complexity, maybe more. If you are more experienced, and have the keyboard shortcuts down, I could see it taking less time overall.
Quinn B.
·
Perfect. Thank you for this guidance. I'm still learning the ropes of Webflow and Relume so unfortunately I have that working against me as well. When you say "Paste in the style guide" ... how would go about doing that?
Matt J.
·
so you could clone the style guide, as a new project, open that project, navigate to the style guide page, select the page-wrapper div and copy, then open up the existing project, create a new draft page and call it Style Guide, and paste it into that page. Now you have all the necessary classes you will need. I would also make sure to install our chrome extension and have class sync turned on before doing this, this will help bring in any existing classes you might have in the project and bring those styles INTO the style guide as well - at least in theory. So lets say the existing project has a button class, our style guide also has a button class and it'll sync the styles into one which would be nice.
🙌1
Quinn B.
·
Perfect. I'll take this path and report back if I run in to any issues. Thank you so much for taking the time to help me. I really appreciate it.
Matt J.
·
No problem, best of luck Quinn!
Blair
·
Quinn B. you could also consider rebuilding the site using resume and Webflow. That way you have simplicity structure and control over styles. Hard to say for sure but my guess is this will be easier in the long run (without ever seeing the site you are referring to) 😉
💪1
Quinn B.
·
Blair Funny you mention that. Thats actually the path I've ended up taking. Or, more so a merge of the two paths laid above. The site is about 10 pages, so in theory it shouldn't be too time consuming once I hit a good rhythm. Thank you all for your tips and guidance. Its really helped a ton.
🙌1