Community forum for knowledge and support

Updated 6 months ago

Restoring Correct Class Order in an Existing Project

At a glance

hi a question, I imported the relume style guide onto an existing project, what is the best way to restore the correct class order instead of doing it manually one by one?
for example margin-bottom is before margin-small but it should be the opposite

M
N
H
14 comments

how did you import the style guide?

I created a new page and copied and pasted the page-wrapper

okay and was this an existing website, and thats why you couldn't start the project by cloning the style guide?

okay, and where are you seeing the class order? Can you share a read-only link?

Using the finsweet extension with the css reorder i can see that the styles are in the wrong order

okay, you are likely not going to want to modify that

using that tool is for modifying the cascading nature of the classes, 99% of the time you do not want to be messing with the order - especially on global/utility classes.

if you send along a read-only link, I can take a look to see if everything looks how it should and we can go from there as far as resolving any issues.

Perfect thank you, can i send you the link in dm?

Hi sorry i'm new here. I don't see on how to actually import the style guide into your site. the video cvers how to modify the style guide once you clone it into a new site. how do you move the style guide into an existing webflow site? thanks sorry if the question is redundant.

sure, we have a doc on how to retrofit Relume into an existing project here:
https://www.relume.io/resources/docs/updating-existing-projects

Its not nearly as smooth or as clean as starting over and that is usually our recommendation but we understand that is not always possible.

amazing matt thank you!

Add a reply
Sign up and join the conversation on Slack