Optimizing Relume for Non-Webflow Projects: A Workflow Guide | Relume Community

Optimizing Relume for Non-Webflow Projects: A Workflow Guide

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?

11 comments

Luuk
·
Maybe the React Library is interesting for your use case? https://www.relume.io/react/components
Nat
·
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.
Matt J.
·
Nat in your workflow, where does the final result live?
Matt J.
·
Let's say you did get the HTML/CSS/JS - where are you putting it?
Nat
·
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.
Nat
·
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.
Matt J.
·
got it - yeah thats helpful for us to understand. I'll tag Rob A. 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.
🙌1
Rob A.
·
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.
Nat
·
Rob A. Where can the HTML/CSS be exported?
Nat
·
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.
Nat
·
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?