Community forum for knowledge and support

Updated 4 months ago

A Workflow for Using Relume Without Webflow

At a glance

The community member is trying to understand a good workflow for using Relume without Webflow. They want to use Relume's sitemaps and wireframes, build Figma designs, and then have the plain HTML/CSS/JavaScript for the components to use as a base, rather than building from scratch. However, it seems Relume is currently tied to Webflow. The community member is looking for a way to extract the base Relume CSS (utility classes, design tokens, etc.) and split out the CSS on a per-component basis.

In the comments, another community member suggests the Relume React library as an option. However, the original community member prefers to keep it simple with vanilla HTML, CSS, and JavaScript, as they are using Astro and have some custom WordPress projects. They are interested in a way to export the HTML/CSS/JS for the Relume components, but it seems the HTML/CSS export is only available for the React components and using Tailwind, which is not quite what they were looking for.

There is no explicitly marked answer in the comments, but the community members are discussing potential solutions and providing feedback to the Relume team to consider for future developments.

Useful resources

Hi everyone.

I'm trying to understand what a good workflow would be to use a Relume for our use case, which doesn't involve Webflow. We'd use the Relume sitemaps + wireframes, build out the Figma designs but then rather than build the components from scratch when it comes time to code it, it would be great to have the plain HTML/CSS/JavaScript for the components to use as a base. However, at the moment, it looks like it's all tied to Webflow? Is there any simple way to have a copy of a the base Relume CSS (the utility classes, design tokens etc.) and then split out CSS on a per-component basis?

1
L
N
M
11 comments

Maybe the React Library is interesting for your use case? https://www.relume.io/react/components

It is closer for our use case but really vanilla HTML + CSS and then JS as bonus would be ideal. There just doesn't seem to be a way to neatly extract out the global styles required and then just the CSS used for a particular component. I just checked out an example demo page for a component, like this: https://apis.relume.io/v1/preview/hero-header-sections/section_header1/. You can copy out the HTML but the CSS is a bit of mash up. See: https://assets-global.website-files.com/624380709031623bfe4aee60/css/relume-library-master.fee0b510a.css. Top-level HTML element tags like h1s appear multiple times, some of the webflow code is sprinkled in amongst other general code, some utility classes randomly appear between specific component code. For example, if you search for the utility class .align-center { it appears between code for .blog5 and .blog-post1 elements, so there's no way to extract out just the utility classes reliably.

in your workflow, where does the final result live?

Let's say you did get the HTML/CSS/JS - where are you putting it?

We're using Astro, so React is possible but we'd prefer not to go that route and keep it simple, more in line with what we currently do. Also, some custom WordPress projects, so converting these over to being templated and CMS-connected.

We build both types of projects in a component approach, only loading in what is required for a given page based on the components used, as with the Relume React library approach.

got it - yeah thats helpful for us to understand. I'll tag in here to see if he has any insights into what we might be able to do or to account for this feedback in future developments.

Hi Nat, the components are also available as HTML. But they dont include any vanilla JS for the interactions, you need to rewrite those yourself if you opt for the HTML export.

Alternatively just use the React components in Astro, they are ready to go.

Where can the HTML/CSS be exported?

OK, so I think I found it. So exporting as HTML is only available for the React components and only using Tailwind. Not quite what I was after but it's something.

Is there a way in the Site Builder (wireframing) and Figma Library to only show the components available in the React Library? Not sure how designers would know which components they could or couldn't use?

Add a reply
Sign up and join the conversation on Slack